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

Chakra and globals

Browse Source
This commit is contained in:
Marko Marković
2023-06-14 21:21:55 +04:00
parent 42c5b438c3
commit 2fbdc4cd44
10 changed files with 1872 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/.env
View File

@@ -1,3 +1,4 @@
# The URL where your API can be reached on the web.
DIRECTUS_API_URL="http://0.0.0.0:8055"
GLOBALS_ID="4f8d9e66-ec95-4bdd-a5e7-34df8ea68a45"

64
frontend/app/components/header.js Normal file
View File

@@ -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',
},
]

31
frontend/app/layout.js
View File

@@ -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>
)
}

6
frontend/app/page.js
View File

@@ -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>
)
}

9
frontend/app/providers.js Normal file
View File

@@ -0,0 +1,9 @@
import { CacheProvider, ChakraProvider } from '~/app/ui'
export function Providers({ children }) {
return (
<CacheProvider>
<ChakraProvider>{children}</ChakraProvider>
</CacheProvider>
)
}

3
frontend/app/ui.js Normal file
View File

@@ -0,0 +1,3 @@
'use client'
export { CacheProvider, Link } from '@chakra-ui/next-js'
export * from '@chakra-ui/react'

4
frontend/app/vendors/page.js vendored
View File

@@ -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>

6
frontend/package.json
View File

@@ -9,7 +9,13 @@
"lint": "next lint"
},
"dependencies": {
"@chakra-ui/icons": "2.0.19",
"@chakra-ui/next-js": "2.1.4",
"@chakra-ui/react": "2.7.0",
"@directus/sdk": "10.3.3",
"@emotion/react": "11.11.1",
"@emotion/styled": "11.11.0",
"framer-motion": "10.12.16",
"next": "13.4.5",
"react": "18.2.0",
"react-dom": "18.2.0"

1739
frontend/pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff