Country name, 404

frontend/package.json

@@ -16,6 +16,7 @@
     "@emotion/styled": "11.11.0",
     "@react-hookz/web": "23.1.0",
     "clsx": "1.2.1",
+    "iso-3166": "4.2.0",
     "next": "13.4.9",
     "react": "18.2.0",
     "react-dom": "18.2.0",

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>

frontend/pnpm-lock.yaml

@@ -26,6 +26,9 @@ dependencies:
   clsx:
     specifier: 1.2.1
     version: 1.2.1
+  iso-3166:
+    specifier: 4.2.0
+    version: 4.2.0
   next:
     specifier: 13.4.9
     version: 13.4.9(react-dom@18.2.0)(react@18.2.0)(sass@1.63.6)
@@ -1767,6 +1770,10 @@ packages:
     resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
     engines: {node: '>=0.12.0'}
 
+  /iso-3166@4.2.0:
+    resolution: {integrity: sha512-5G+RqnIYIbgQwNmL3bslEbG0apSPJqu4g3wTaQOOYx2VANv1m6I4PM1KtlvcG5OubW1QmDNpk6icwkS7B+lT1g==}
+    dev: false
+
   /js-tokens@4.0.0:
     resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
     dev: false