Chakra and globals

2023-06-14 21:21:55 +04:00
parent 42c5b438c3
commit 2fbdc4cd44
10 changed files with 1872 additions and 23 deletions
--- a/frontend/app/components/header.js
+++ b/frontend/app/components/header.js
@@ -0,0 +1,64 @@
+'use client'
+
+import { MoonIcon, SunIcon } from '@chakra-ui/icons'
+import { Box, Button, Flex, Heading, Link, Spacer, Stack, useColorMode, useColorModeValue } from '~/app/ui'
+
+export default function Header({ siteName }) {
+  const { colorMode, toggleColorMode } = useColorMode()
+  return (
+    <>
+      <Box bg={useColorModeValue('gray.100', 'gray.900')} px={4}>
+        <Flex h={16} alignItems={'center'}>
+          <Heading size="md">{siteName}</Heading>
+
+          <MainMenu />
+          <Spacer />
+
+          <Flex alignItems={'center'}>
+            <Stack direction={'row'} spacing={7}>
+              <Button onClick={toggleColorMode}>{colorMode === 'light' ? <MoonIcon /> : <SunIcon />}</Button>
+            </Stack>
+          </Flex>
+        </Flex>
+      </Box>
+    </>
+  )
+}
+
+const MainMenu = () => {
+  const linkColor = useColorModeValue('gray.600', 'gray.200')
+  const linkHoverColor = useColorModeValue('gray.800', 'white')
+
+  return (
+    <Stack direction={'row'} spacing={4} pl="4">
+      {NAV_ITEMS.map((navItem) => (
+        <Box key={navItem.label}>
+          <Link
+            p={2}
+            href={navItem.href ?? '#'}
+            fontSize={'sm'}
+            fontWeight={500}
+            color={linkColor}
+            _hover={{
+              textDecoration: 'none',
+              color: linkHoverColor,
+            }}
+          >
+            {navItem.label}
+          </Link>
+        </Box>
+      ))}
+    </Stack>
+  )
+}
+
+const NAV_ITEMS = [
+  {
+    label: 'Vendors',
+    href: '/vendors',
+  },
+  {
+    label: 'About Us',
+    href: '/about-us',
+  },
+]
--- a/frontend/app/layout.js
+++ b/frontend/app/layout.js
@@ -1,13 +1,34 @@
+import Header from '~/app/components/header'
+import { Providers } from '~/app/providers'
+import { Container } from '~/app/ui'
+import directus from '~/lib/directus'

-export const metadata = {
-  title: 'PCA Pijac',
-  description: '',
+async function getGlobals() {
+  return directus.items('globals').readOne(process.env.GLOBALS_ID)
 }

-export default function RootLayout({ children }) {
+export async function generateMetadata() {
+  const globals = await getGlobals()
+
+  return {
+    title: globals.meta_title,
+    description: globals.meta_description,
+  }
+}
+
+export default async function RootLayout({ children }) {
+  const globals = await getGlobals()
+
  return (
    <html lang="en">
-      <body>{children}</body>
+      <body>
+        <Providers>
+          <Container maxW="3xl">
+            <Header siteName={globals.site_name} />
+            {children}
+          </Container>
+        </Providers>
+      </body>
    </html>
  )
 }
--- a/frontend/app/page.js
+++ b/frontend/app/page.js
@@ -1,11 +1,7 @@
 export default async function Home() {
-
-
  return (
    <main>
-      <pre>
-        {JSON.stringify(new Date(), null, 2)}
-      </pre>
+      <pre>{JSON.stringify(new Date(), null, 2)}</pre>
    </main>
  )
 }
--- a/frontend/app/providers.js
+++ b/frontend/app/providers.js
@@ -0,0 +1,9 @@
+import { CacheProvider, ChakraProvider } from '~/app/ui'
+
+export function Providers({ children }) {
+  return (
+    <CacheProvider>
+      <ChakraProvider>{children}</ChakraProvider>
+    </CacheProvider>
+  )
+}
--- a/frontend/app/ui.js
+++ b/frontend/app/ui.js
@@ -0,0 +1,3 @@
+'use client'
+export { CacheProvider, Link } from '@chakra-ui/next-js'
+export * from '@chakra-ui/react'
--- a/frontend/app/vendors/page.js
+++ b/frontend/app/vendors/page.js
@@ -25,7 +25,9 @@ export default async function VendorsPage({ params }) {
      <ul>
        {vendors.map((v) => (
          <li>
-            <Link href={`/vendors/${v.slug}`}>{v.name}</Link>
+            <Link href={`/vendors/${v.slug}`} prefetch={false}>
+              {v.name}
+            </Link>
          </li>
        ))}
      </ul>