165 lines
5.2 KiB
JavaScript
165 lines
5.2 KiB
JavaScript
import { Link } from '@chakra-ui/next-js'
|
|
import { Box, Button, Flex, Heading, Image, List, ListIcon, ListItem, SimpleGrid, Text } from '@chakra-ui/react'
|
|
import { iso31661 } from 'iso-3166'
|
|
import Head from 'next/head'
|
|
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')
|
|
url.searchParams.append('limit', -1)
|
|
const res = await fetch(url.toString())
|
|
|
|
const { data: vendors } = await res.json()
|
|
|
|
return {
|
|
paths: vendors.map((v) => ({ params: { slug: v.slug } })),
|
|
fallback: false, // false or "blocking"
|
|
}
|
|
}
|
|
|
|
export const getStaticProps = async ({ params: { slug } }) => {
|
|
const url = new URL(`${process.env.NEXT_PUBLIC_DIRECTUS_API_URL}/items/vendors`)
|
|
url.searchParams.append('fields[]', '*')
|
|
url.searchParams.append('fields[]', 'categories.categories_id.slug')
|
|
url.searchParams.append('fields[]', 'categories.categories_id.name')
|
|
url.searchParams.append('fields[]', 'categories.categories_id.parent_id')
|
|
url.searchParams.append('fields[]', 'categories.categories_id.subcategories.slug')
|
|
url.searchParams.append('fields[]', 'categories.categories_id.subcategories.name')
|
|
url.searchParams.append('limit', 1)
|
|
url.searchParams.append('filter', JSON.stringify({ slug: { _eq: slug } }))
|
|
|
|
const res = await fetch(url.toString())
|
|
|
|
const {
|
|
data: [vendor],
|
|
} = await res.json()
|
|
|
|
return {
|
|
props: { vendor: { ...vendor, country: iso31661.find((iso) => iso.alpha3 === vendor.country)?.name || '' } },
|
|
}
|
|
}
|
|
|
|
export default function VendorPage({ globals, vendor }) {
|
|
return (
|
|
<Box className="vendor">
|
|
<Head>
|
|
<title>{[vendor.name, globals.meta_title].join(' — ')}</title>
|
|
</Head>
|
|
<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 }}></Box>
|
|
|
|
<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}</>}
|
|
</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>
|
|
</Box>
|
|
)
|
|
}
|