Add link to categories page when no categories are present

components/admin/listing-form/ListingForm.tsx

@@ -4,6 +4,7 @@ import { Formik, Form, Field, FieldProps, useFormikContext } from 'formik'
 import ReactSelect from 'react-select'
 import type { Options } from 'react-select'
 import { Category } from '@prisma/client'
+import NextLink from 'next/link'
 import {
   chakra,
   Box,
@@ -249,7 +250,18 @@ const ListingForm = ({ categories, listing, handleSubmit }: Props) => {
                         ))}
                       </Select>
                       <FormHelperText>
-                        Categories can be easily changed later
+                        {categories.length === 0 ? (
+                          <Text>
+                            Looks like you haven't created categories yet. You
+                            can add some{' '}
+                            <NextLink href="/admin/categories">
+                              on this page
+                            </NextLink>
+                            .
+                          </Text>
+                        ) : (
+                          'Categories can be easily changed later'
+                        )}
                       </FormHelperText>
                       <FormErrorMessage>
                         Please select a category

components/layout/Layout.module.scss

@@ -8,6 +8,10 @@
     color: rgb(0 0 0 / 70%);
   }
 
+  h2, h3 {
+    margin-top: 1rem;
+  }
+
   h2 {
     font-size: 1.75rem;
     font-weight: 600;

pages/api/categories/index.ts

@@ -20,7 +20,7 @@ const handler = async (
           where: {
             web: {
               slug: {
-                contains: web || 'cambridge-city',
+                contains: web,
               },
             },
           },

store/StoreProvider.tsx

@@ -4,14 +4,12 @@ import { useMediaQuerySSR } from '@hooks/application'
 import { AppContext } from '@store/AppContext'
 import { useWebs } from '@hooks/webs'
 
-const DEFAULT_SELECTED_WEB = 'cambridge-city'
-
 const StoreProvider = ({ children }) => {
   const isMobile = useMediaQuerySSR('(max-width: 760px)')
   const [isAdminMode, setIsAdminMode] = useState(false)
   const [selectedWebSlug, setSelectedWebSlug] = useLocalStorage(
     'selected-web',
-    DEFAULT_SELECTED_WEB,
+    null,
   )
   const [subdomain, setSubdomain] = useState<string>()
 

styles/styles.global.scss

@@ -14,7 +14,7 @@ body {
 
 * {
   margin: 0;
-	font-family: Poppins, sans-serif;
+  font-family: Poppins, sans-serif;
   font-display: swap;
 }
 
@@ -45,3 +45,12 @@ a {
     text-decoration: none !important;
   }
 }
+
+/* stylelint-disable-next-line no-descending-specificity */
+p > a {
+  color: #3A8159 !important;
+
+  &:hover {
+    color: #09622f !important;
+  }
+}