Country name, 404

frontend/pages/404.js

@@ -1,3 +1,14 @@
+import { Alert, AlertDescription, AlertTitle } from '@chakra-ui/react'
+import { TbMoodSad } from 'react-icons/tb'
+
 export default function Custom404() {
-  return <h1>404 - Page Not Found</h1>
+  return (
+    <Alert status="info" flexDirection="column" justifyContent="center" rounded="md" paddingY="10">
+      <TbMoodSad style={{ width: '2rem', height: '2rem' }} />
+      <AlertTitle mt={4} mb={1} fontSize="lg">
+        404: Page Not Found
+      </AlertTitle>
+      <AlertDescription maxWidth="sm">Try going back or something&hellip;</AlertDescription>
+    </Alert>
+  )
 }

frontend/pages/[slug]/index.js

@@ -1,4 +1,4 @@
-import { Box, Button, Heading, Image, List, ListIcon, ListItem, SimpleGrid, Text } from '@chakra-ui/react'
+import { Box, Heading } from '@chakra-ui/react'
 
 export const getStaticPaths = async () => {
   const url = new URL(`${process.env.NEXT_PUBLIC_DIRECTUS_API_URL}/items/pages`)

frontend/pages/vendors/[slug]/index.js

@@ -2,6 +2,7 @@ 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'
+import { iso31661 } from 'iso-3166'
 
 export const getStaticPaths = async () => {
   const url = new URL(`${process.env.NEXT_PUBLIC_DIRECTUS_API_URL}/items/vendors`)
@@ -34,7 +35,7 @@ export const getStaticProps = async ({ params: { slug } }) => {
     data: [vendor],
   } = await res.json()
 
-  return { props: vendor }
+  return { props: { ...vendor, country: iso31661.find((iso) => iso.alpha3 === vendor.country)?.name || '' } }
 }
 
 export default function VendorPage(vendor) {
@@ -84,12 +85,7 @@ export default function VendorPage(vendor) {
                 <br />
               </>
             )}
-            {vendor.country && (
-              <>
-                {vendor.country}
-                <br />
-              </>
-            )}
+            {vendor.country && <>{vendor.country}</>}
           </Text>
         </Box>
         <Box>