Menus, globals, vendor page
This commit is contained in:
@@ -1,3 +1,5 @@
|
||||
import { Box, Button, Heading, Image, List, ListIcon, ListItem, SimpleGrid, Text } from '@chakra-ui/react'
|
||||
|
||||
export const getStaticPaths = async () => {
|
||||
const url = new URL(`${process.env.NEXT_PUBLIC_DIRECTUS_API_URL}/items/pages`)
|
||||
url.searchParams.append('fields[]', 'slug')
|
||||
@@ -29,9 +31,9 @@ export const getStaticProps = async ({ params: { slug } }) => {
|
||||
|
||||
export default function Page(page) {
|
||||
return (
|
||||
<div>
|
||||
<h1>{page.title}</h1>
|
||||
<Box>
|
||||
<Heading>{page.title}</Heading>
|
||||
<div dangerouslySetInnerHTML={{ __html: page.content }}></div>
|
||||
</div>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,13 +1,43 @@
|
||||
import App from 'next/app'
|
||||
import { ChakraProvider } from '@chakra-ui/react'
|
||||
import Layout from '~/components/layout'
|
||||
import theme from '~/src/theme'
|
||||
|
||||
export default function MyApp({ Component, pageProps }) {
|
||||
export default function MyApp({ Component, pageProps, globals, menus }) {
|
||||
return (
|
||||
<ChakraProvider theme={theme}>
|
||||
<Layout>
|
||||
<Layout globals={globals} menus={menus}>
|
||||
<Component {...pageProps} />
|
||||
</Layout>
|
||||
</ChakraProvider>
|
||||
)
|
||||
}
|
||||
|
||||
MyApp.getInitialProps = async (context) => {
|
||||
const pageProps = await App.getInitialProps(context)
|
||||
|
||||
let url = new URL(`${process.env.NEXT_PUBLIC_DIRECTUS_API_URL}/items/globals`)
|
||||
url.searchParams.append('fields[]', '*')
|
||||
url.searchParams.append('limit', 1)
|
||||
const resG = await fetch(url.toString())
|
||||
let { data: globals } = await resG.json()
|
||||
|
||||
url = new URL(`${process.env.NEXT_PUBLIC_DIRECTUS_API_URL}/items/menus`)
|
||||
url.searchParams.append('fields[]', '*')
|
||||
url.searchParams.append('fields[]', 'menus_menu_items.sort')
|
||||
url.searchParams.append('fields[]', 'menus_menu_items.menu_items_id.label')
|
||||
url.searchParams.append('fields[]', 'menus_menu_items.menu_items_id.url')
|
||||
url.searchParams.append('fields[]', 'menus_menu_items.menu_items_id.sort')
|
||||
url.searchParams.append('limit', -1)
|
||||
const resM = await fetch(url.toString())
|
||||
const { data: menus } = await resM.json()
|
||||
|
||||
return {
|
||||
...pageProps,
|
||||
globals,
|
||||
menus: menus.map((m) => ({
|
||||
id: m.id,
|
||||
items: m.menus_menu_items.sort((a, b) => a.sort - b.sort).map((mm) => mm.menu_items_id),
|
||||
})),
|
||||
}
|
||||
}
|
||||
|
||||
188
frontend/pages/vendors/[slug]/index.js
vendored
188
frontend/pages/vendors/[slug]/index.js
vendored
@@ -1,4 +1,8 @@
|
||||
// import directus from '~/lib/directus'
|
||||
import { Link } from '@chakra-ui/next-js'
|
||||
import { Box, Button, Flex, Heading, Image, List, ListIcon, ListItem, SimpleGrid, Text } from '@chakra-ui/react'
|
||||
import { FaFacebookSquare, FaLinkedin, FaTwitterSquare } from 'react-icons/fa'
|
||||
import { TbWorldWww } from 'react-icons/tb'
|
||||
|
||||
export const getStaticPaths = async () => {
|
||||
const url = new URL(`${process.env.NEXT_PUBLIC_DIRECTUS_API_URL}/items/vendors`)
|
||||
url.searchParams.append('fields[]', 'slug')
|
||||
@@ -36,62 +40,134 @@ export const getStaticProps = async ({ params: { slug } }) => {
|
||||
export default function VendorPage(vendor) {
|
||||
return (
|
||||
<>
|
||||
<h1>{vendor.name}</h1>
|
||||
<p>{vendor.description}</p>
|
||||
<Flex justifyContent="space-between" direction={['column', 'column', 'row']}>
|
||||
<Heading marginY="6">{vendor.name}</Heading>
|
||||
<Image
|
||||
rounded={4}
|
||||
objectFit="contain"
|
||||
src={`${process.env.NEXT_PUBLIC_DIRECTUS_API_URL}/assets/${vendor.logo}?key=logo-page`}
|
||||
alt={vendor.name}
|
||||
width="350px"
|
||||
height="150px"
|
||||
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>
|
||||
|
||||
<h2>Address</h2>
|
||||
<p>
|
||||
{vendor.address_line_1 && (
|
||||
<>
|
||||
{vendor.address_line_1}
|
||||
<br />
|
||||
</>
|
||||
)}
|
||||
{vendor.address_line_2 && (
|
||||
<>
|
||||
{vendor.address_line_2}
|
||||
<br />
|
||||
</>
|
||||
)}
|
||||
{vendor.city && (
|
||||
<>
|
||||
{vendor.city}
|
||||
<br />
|
||||
</>
|
||||
)}
|
||||
{vendor.state && (
|
||||
<>
|
||||
{vendor.state}
|
||||
<br />
|
||||
</>
|
||||
)}
|
||||
{vendor.country && (
|
||||
<>
|
||||
{vendor.country}
|
||||
<br />
|
||||
</>
|
||||
)}
|
||||
</p>
|
||||
|
||||
{vendor.website && (
|
||||
<>
|
||||
<h2>Website</h2>
|
||||
<a href={vendor.website} target="_blank">
|
||||
{vendor.website}
|
||||
</a>
|
||||
</>
|
||||
)}
|
||||
|
||||
{vendor.categories.length > 0 && (
|
||||
<>
|
||||
<h2>Categories</h2>
|
||||
<ul>
|
||||
{vendor.categories.map((cat) => (
|
||||
<li key={cat.categories_id.slug}>{cat.categories_id.name}</li>
|
||||
))}
|
||||
</ul>
|
||||
</>
|
||||
)}
|
||||
<SimpleGrid columns={[1, 2, 3]} spacing={10}>
|
||||
<Box>
|
||||
<Heading size="md" mt="6" mb="1">
|
||||
Address
|
||||
</Heading>
|
||||
<Text>
|
||||
{vendor.address_line_1 && (
|
||||
<>
|
||||
{vendor.address_line_1}
|
||||
<br />
|
||||
</>
|
||||
)}
|
||||
{vendor.address_line_2 && (
|
||||
<>
|
||||
{vendor.address_line_2}
|
||||
<br />
|
||||
</>
|
||||
)}
|
||||
{vendor.city && (
|
||||
<>
|
||||
{vendor.city}
|
||||
<br />
|
||||
</>
|
||||
)}
|
||||
{vendor.state && (
|
||||
<>
|
||||
{vendor.state}
|
||||
<br />
|
||||
</>
|
||||
)}
|
||||
{vendor.country && (
|
||||
<>
|
||||
{vendor.country}
|
||||
<br />
|
||||
</>
|
||||
)}
|
||||
</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
{(vendor.website || vendor.facebook || vendor.linkedin || vendor.twitter) && (
|
||||
<>
|
||||
<Heading size="md" mt="6" mb="1">
|
||||
Social
|
||||
</Heading>
|
||||
<List>
|
||||
{vendor.website && (
|
||||
<ListItem>
|
||||
<ListIcon as={TbWorldWww} />
|
||||
{vendor.website}
|
||||
</ListItem>
|
||||
)}
|
||||
{vendor.linkedin && (
|
||||
<ListItem>
|
||||
<ListIcon as={FaLinkedin} />
|
||||
{vendor.linkedin}
|
||||
</ListItem>
|
||||
)}
|
||||
{vendor.twitter && (
|
||||
<ListItem>
|
||||
<ListIcon as={FaTwitterSquare} />
|
||||
{vendor.twitter}
|
||||
</ListItem>
|
||||
)}
|
||||
{vendor.facebook && (
|
||||
<ListItem>
|
||||
<ListIcon as={FaFacebookSquare} />
|
||||
{vendor.facebook}
|
||||
</ListItem>
|
||||
)}
|
||||
</List>
|
||||
</>
|
||||
)}
|
||||
</Box>
|
||||
<Box>
|
||||
{vendor.categories.length > 0 && (
|
||||
<>
|
||||
<Heading size="md" mt="6" mb="1">
|
||||
Categories
|
||||
</Heading>
|
||||
<List spacing="3">
|
||||
{vendor.categories.map((cat) => (
|
||||
<ListItem key={cat.categories_id.slug}>
|
||||
<Button
|
||||
as={Link}
|
||||
fontSize="11"
|
||||
href={{
|
||||
pathname: '/vendors',
|
||||
query: {
|
||||
category: cat.categories_id.slug,
|
||||
},
|
||||
}}
|
||||
paddingX="0.5rem"
|
||||
height="1.5rem"
|
||||
>
|
||||
{cat.categories_id.name}
|
||||
</Button>
|
||||
</ListItem>
|
||||
))}
|
||||
</List>
|
||||
</>
|
||||
)}
|
||||
</Box>
|
||||
</SimpleGrid>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
6
frontend/pages/vendors/index.js
vendored
6
frontend/pages/vendors/index.js
vendored
@@ -136,9 +136,7 @@ export default function VendorsPage({ categories }) {
|
||||
return (
|
||||
<>
|
||||
<Flex alignItems="center" justifyContent="space-between" direction={['column', 'row']} mb="5" gap="5">
|
||||
<Heading size="lg" my={8}>
|
||||
Vendors
|
||||
</Heading>
|
||||
<Heading size="lg">Vendors</Heading>
|
||||
<Box>{isValidating && <Spinner />}</Box>
|
||||
<HStack gap="5">
|
||||
<InputGroup>
|
||||
@@ -203,7 +201,7 @@ export default function VendorsPage({ categories }) {
|
||||
<LinkBox as={Card} rounded={4} key={v.id}>
|
||||
<Image
|
||||
roundedTop={4}
|
||||
objectFit="cover"
|
||||
objectFit="contain"
|
||||
src={`${process.env.NEXT_PUBLIC_DIRECTUS_API_URL}/assets/${v.logo}?key=logo-card`}
|
||||
alt={v.name}
|
||||
width="250"
|
||||
|
||||
Reference in New Issue
Block a user