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

Menus, globals, vendor page

Browse Source
This commit is contained in:
Marko Marković
2023-07-09 20:37:50 +04:00
parent c28dc2146c
commit 9382da5750
12 changed files with 298 additions and 291 deletions
Download Patch File Download Diff File Expand all files Collapse all files

188
frontend/pages/vendors/[slug]/index.js vendored
View File

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