Home, styles

This commit is contained in:
2023-07-09 21:10:35 +04:00
parent 9382da5750
commit 6438d1900c
9 changed files with 168 additions and 36 deletions

View File

@@ -21,5 +21,8 @@
"react-dom": "18.2.0",
"react-icons": "4.10.1",
"swr": "2.2.0"
},
"devDependencies": {
"sass": "1.63.6"
}
}

View File

@@ -31,7 +31,7 @@ export const getStaticProps = async ({ params: { slug } }) => {
export default function Page(page) {
return (
<Box>
<Box className="page">
<Heading>{page.title}</Heading>
<div dangerouslySetInnerHTML={{ __html: page.content }}></div>
</Box>

View File

@@ -2,6 +2,7 @@ import App from 'next/app'
import { ChakraProvider } from '@chakra-ui/react'
import Layout from '~/components/layout'
import theme from '~/src/theme'
import '~/src/style.scss'
export default function MyApp({ Component, pageProps, globals, menus }) {
return (

View File

@@ -1,7 +1,9 @@
export default function Home() {
return (
<main>
<pre>{JSON.stringify(new Date().toISOString().split('T').join(' ').substring(0, 16), null, 2)}</pre>
</main>
)
import Page, { getStaticProps as gsp } from '~/pages/[slug]'
export const getStaticProps = async () => {
return gsp({ params: { slug: 'home' } })
}
export default function Home(props) {
return <Page {...props} />
}

View File

@@ -39,7 +39,7 @@ export const getStaticProps = async ({ params: { slug } }) => {
export default function VendorPage(vendor) {
return (
<>
<Box className="vendor">
<Flex justifyContent="space-between" direction={['column', 'column', 'row']}>
<Heading marginY="6">{vendor.name}</Heading>
<Image
@@ -52,18 +52,7 @@ export default function VendorPage(vendor) {
bg="#fff"
/>
</Flex>
<Box
dangerouslySetInnerHTML={{ __html: vendor.long_description }}
sx={{
h5: {
fontFamily: 'var(--chakra-fonts-heading)',
fontWeight: 'var(--chakra-fontWeights-bold)',
fontSize: 'var(--chakra-fontSizes-xl)',
marginTop: 'var(--chakra-space-6)',
marginBottom: 'var(--chakra-space-1)',
},
}}
></Box>
<Box dangerouslySetInnerHTML={{ __html: vendor.long_description }}></Box>
<SimpleGrid columns={[1, 2, 3]} spacing={10}>
<Box>
@@ -168,6 +157,6 @@ export default function VendorPage(vendor) {
)}
</Box>
</SimpleGrid>
</>
</Box>
)
}

View File

@@ -134,7 +134,7 @@ export default function VendorsPage({ categories }) {
}
return (
<>
<Box className="vendors">
<Flex alignItems="center" justifyContent="space-between" direction={['column', 'row']} mb="5" gap="5">
<Heading size="lg">Vendors</Heading>
<Box>{isValidating && <Spinner />}</Box>
@@ -302,6 +302,6 @@ export default function VendorsPage({ categories }) {
</HStack>
</>
)}
</>
</Box>
)
}

115
frontend/pnpm-lock.yaml generated
View File

@@ -28,7 +28,7 @@ dependencies:
version: 1.2.1
next:
specifier: 13.4.9
version: 13.4.9(react-dom@18.2.0)(react@18.2.0)
version: 13.4.9(react-dom@18.2.0)(react@18.2.0)(sass@1.63.6)
react:
specifier: 18.2.0
version: 18.2.0
@@ -42,6 +42,11 @@ dependencies:
specifier: 2.2.0
version: 2.2.0(react@18.2.0)
devDependencies:
sass:
specifier: 1.63.6
version: 1.63.6
packages:
/@babel/code-frame@7.22.5:
@@ -500,7 +505,7 @@ packages:
'@chakra-ui/react': 2.7.1(@emotion/react@11.11.1)(@emotion/styled@11.11.0)(framer-motion@10.12.18)(react-dom@18.2.0)(react@18.2.0)
'@emotion/cache': 11.11.0
'@emotion/react': 11.11.1(react@18.2.0)
next: 13.4.9(react-dom@18.2.0)(react@18.2.0)
next: 13.4.9(react-dom@18.2.0)(react@18.2.0)(sass@1.63.6)
react: 18.2.0
dev: false
@@ -1476,6 +1481,13 @@ packages:
color-convert: 1.9.3
dev: false
/anymatch@3.1.3:
resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
engines: {node: '>= 8'}
dependencies:
normalize-path: 3.0.0
picomatch: 2.3.1
/aria-hidden@1.2.3:
resolution: {integrity: sha512-xcLxITLe2HYa1cnYnwCjkOO1PqUHQpozB8x9AR0OgWN2woOBi5kSDVxKfd0b7sb1hw5qFeJhXm9H1nu3xSfLeQ==}
engines: {node: '>=10'}
@@ -1492,6 +1504,16 @@ packages:
resolve: 1.22.2
dev: false
/binary-extensions@2.2.0:
resolution: {integrity: sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==}
engines: {node: '>=8'}
/braces@3.0.2:
resolution: {integrity: sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==}
engines: {node: '>=8'}
dependencies:
fill-range: 7.0.1
/busboy@1.6.0:
resolution: {integrity: sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==}
engines: {node: '>=10.16.0'}
@@ -1517,6 +1539,20 @@ packages:
supports-color: 5.5.0
dev: false
/chokidar@3.5.3:
resolution: {integrity: sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==}
engines: {node: '>= 8.10.0'}
dependencies:
anymatch: 3.1.3
braces: 3.0.2
glob-parent: 5.1.2
is-binary-path: 2.1.0
is-glob: 4.0.3
normalize-path: 3.0.0
readdirp: 3.6.0
optionalDependencies:
fsevents: 2.3.2
/client-only@0.0.1:
resolution: {integrity: sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==}
dev: false
@@ -1595,6 +1631,12 @@ packages:
engines: {node: '>=10'}
dev: false
/fill-range@7.0.1:
resolution: {integrity: sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==}
engines: {node: '>=8'}
dependencies:
to-regex-range: 5.0.1
/find-root@1.1.0:
resolution: {integrity: sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==}
dev: false
@@ -1630,6 +1672,13 @@ packages:
tslib: 2.4.0
dev: false
/fsevents@2.3.2:
resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==}
engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
os: [darwin]
requiresBuild: true
optional: true
/function-bind@1.1.1:
resolution: {integrity: sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==}
dev: false
@@ -1639,6 +1688,12 @@ packages:
engines: {node: '>=6'}
dev: false
/glob-parent@5.1.2:
resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
engines: {node: '>= 6'}
dependencies:
is-glob: 4.0.3
/glob-to-regexp@0.4.1:
resolution: {integrity: sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==}
dev: false
@@ -1665,6 +1720,9 @@ packages:
react-is: 16.13.1
dev: false
/immutable@4.3.0:
resolution: {integrity: sha512-0AOCmOip+xgJwEVTQj1EfiDDOkPmuyllDuTuEX+DDXUgapLAsBIfkg3sxCYyCEA8mQqZrrxPUGjcOQ2JS3WLkg==}
/import-fresh@3.3.0:
resolution: {integrity: sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==}
engines: {node: '>=6'}
@@ -1683,12 +1741,32 @@ packages:
resolution: {integrity: sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==}
dev: false
/is-binary-path@2.1.0:
resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==}
engines: {node: '>=8'}
dependencies:
binary-extensions: 2.2.0
/is-core-module@2.12.1:
resolution: {integrity: sha512-Q4ZuBAe2FUsKtyQJoQHlvP8OvBERxO3jEmy1I7hcRXcJBGGHFh/aJBswbXuS9sgrDH2QUO8ilkwNPHvHMd8clg==}
dependencies:
has: 1.0.3
dev: false
/is-extglob@2.1.1:
resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
engines: {node: '>=0.10.0'}
/is-glob@4.0.3:
resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
engines: {node: '>=0.10.0'}
dependencies:
is-extglob: 2.1.1
/is-number@7.0.0:
resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
engines: {node: '>=0.12.0'}
/js-tokens@4.0.0:
resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
dev: false
@@ -1718,7 +1796,7 @@ packages:
hasBin: true
dev: false
/next@13.4.9(react-dom@18.2.0)(react@18.2.0):
/next@13.4.9(react-dom@18.2.0)(react@18.2.0)(sass@1.63.6):
resolution: {integrity: sha512-vtefFm/BWIi/eWOqf1GsmKG3cjKw1k3LjuefKRcL3iiLl3zWzFdPG3as6xtxrGO6gwTzzaO1ktL4oiHt/uvTjA==}
engines: {node: '>=16.8.0'}
hasBin: true
@@ -1743,6 +1821,7 @@ packages:
postcss: 8.4.14
react: 18.2.0
react-dom: 18.2.0(react@18.2.0)
sass: 1.63.6
styled-jsx: 5.1.1(react@18.2.0)
watchpack: 2.4.0
zod: 3.21.4
@@ -1761,6 +1840,10 @@ packages:
- babel-plugin-macros
dev: false
/normalize-path@3.0.0:
resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
engines: {node: '>=0.10.0'}
/object-assign@4.1.1:
resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
engines: {node: '>=0.10.0'}
@@ -1796,6 +1879,10 @@ packages:
resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==}
dev: false
/picomatch@2.3.1:
resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
engines: {node: '>=8.6'}
/postcss@8.4.14:
resolution: {integrity: sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==}
engines: {node: ^10 || ^12 || >=14}
@@ -1922,6 +2009,12 @@ packages:
loose-envify: 1.4.0
dev: false
/readdirp@3.6.0:
resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
engines: {node: '>=8.10.0'}
dependencies:
picomatch: 2.3.1
/regenerator-runtime@0.13.11:
resolution: {integrity: sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==}
dev: false
@@ -1940,6 +2033,15 @@ packages:
supports-preserve-symlinks-flag: 1.0.0
dev: false
/sass@1.63.6:
resolution: {integrity: sha512-MJuxGMHzaOW7ipp+1KdELtqKbfAWbH7OLIdoSMnVe3EXPMTmxTmlaZDCTsgIpPCs3w99lLo9/zDKkOrJuT5byw==}
engines: {node: '>=14.0.0'}
hasBin: true
dependencies:
chokidar: 3.5.3
immutable: 4.3.0
source-map-js: 1.0.2
/scheduler@0.23.0:
resolution: {integrity: sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==}
dependencies:
@@ -1949,7 +2051,6 @@ packages:
/source-map-js@1.0.2:
resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==}
engines: {node: '>=0.10.0'}
dev: false
/source-map@0.5.7:
resolution: {integrity: sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==}
@@ -2012,6 +2113,12 @@ packages:
engines: {node: '>=4'}
dev: false
/to-regex-range@5.0.1:
resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
engines: {node: '>=8.0'}
dependencies:
is-number: 7.0.0
/toggle-selection@1.0.6:
resolution: {integrity: sha512-BiZS+C1OS8g/q2RRbJmy59xpyghNBqrr6k5L/uKBGRsTfxmu3ffiRnd8mlGPUVayg8pvfi5urfnu8TU7DVOkLQ==}
dev: false

29
frontend/src/style.scss Normal file
View File

@@ -0,0 +1,29 @@
.page {
h1,
h2,
h3,
h4,
h5 {
font-family: var(--chakra-fonts-heading);
font-weight: var(--chakra-fontWeights-bold);
margin-top: var(--chakra-space-6);
margin-bottom: var(--chakra-space-1);
}
ul {
margin-left: 2rem;
}
}
.vendor {
h5 {
font-size: var(--chakra-fontSizes-xl);
font-family: var(--chakra-fonts-heading);
font-weight: var(--chakra-fontWeights-bold);
margin-top: var(--chakra-space-6);
margin-bottom: var(--chakra-space-1);
}
}

File diff suppressed because one or more lines are too long