markomarkovic/pca-pijac
1
0
Fork 0
Code Releases Activity

WIP: app -> pages

Browse Source
This commit is contained in:
Marko Marković
2023-06-14 22:25:00 +04:00
parent a4bed55547
commit d7ed76ae6e
14 changed files with 109 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
frontend/components/footer.js Normal file
View File

@@ -0,0 +1,51 @@
import { Box, Flex, Link, Stack, useColorMode, useColorModeValue } from '@chakra-ui/react'
export default function Footer({ siteName }) {
return (
<>
<Box bg={useColorModeValue('gray.100', 'gray.900')} px={4} mt="8">
<Flex h={16} alignItems={'center'}>
<FooterMenu />
</Flex>
</Box>
</>
)
}
const FooterMenu = () => {
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',
},
]

65
frontend/components/header.js Normal file
View File

@@ -0,0 +1,65 @@
'use client'
import { MoonIcon, SunIcon } from '@chakra-ui/icons'
import { Box, Button, Flex, Heading, Spacer, Stack, useColorMode, useColorModeValue } from '@chakra-ui/react'
import { Link } from '@chakra-ui/next-js'
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',
},
]

47
frontend/components/layout.js Normal file
View File

@@ -0,0 +1,47 @@
import Header from '~/components/header'
import Footer from '~/components/footer'
import directus from '~/lib/directus'
import { Html, Head, Main, NextScript } from 'next/document'
// async function getGlobals() {
// return directus.items('globals').readOne(process.env.GLOBALS_ID)
// }
// 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 (
// <H lang="en">
// <body>
// <Providers>
// <Container maxW="3xl">
// <Header siteName={globals.site_name} />
// {children}
// <Footer />
// </Container>
// </Providers>
// </body>
// </H>
// )
// }
export default function Layout({ children }) {
return (
<>
<Header />
<main>{children}</main>
<Footer />
</>
)
}