GPT-1: Button redirect to create new store on empty store listings

src/index.css

@@ -328,6 +328,27 @@ h1 {
   display: contents;
 }
 
+.new-store-redirect {
+  grid-column-start: 2; 
+  padding: 0;
+  margin-top: -0.85em;
+  border: none;
+  background: none;
+  justify-self: start;
+  cursor: pointer;
+  font-size: 14px;
+}
+
+.new-store-redirect svg {
+  margin-right: 0.25rem;
+  vertical-align: middle; 
+}
+
+.new-store-redirect:hover {
+  background-color: rgba(255, 255, 255, 0.1);
+  border-radius: 4px;
+}
+
 .discount-group label {
   grid-column: 1;
   align-self: center;
@@ -641,6 +662,11 @@ h1 {
   .add-form .big-chain-group [type="checkbox"] {
     transform: scale(1.4);
   }
+
+  .new-store-redirect {
+    grid-column-start: auto;
+    font-size: 16px;
+  }
 }
 
 @media (max-width: 650px) { /* small screens */

src/pages/CreateNewItem.tsx

@@ -1,4 +1,5 @@
 import React, { useState } from "react";
+import { useNavigate } from "react-router-dom";
 import DOMPurify from "dompurify";
 import Swal from 'sweetalert2'
 import { isSafeUrl } from "../utils/isSafeUrl";
@@ -9,6 +10,8 @@ import StoresDropdownSelect from "../custom-dropdown-select/StoresDropdownSelect
 import { generateClient } from "aws-amplify/data";
 import type { Schema } from "../../amplify/data/resource";
 import Scanner from "../components/Scanner";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faCircleInfo } from '@fortawesome/free-solid-svg-icons';
 
 const client = generateClient<Schema>();
 
@@ -30,6 +33,8 @@ const CreateNewItem: React.FC = () => {
   const [inputs, setInputs] = useState<ItemInputs>(initialItemInputs);
   const [selectedStore, setSelectedStore] = useState<Store>();
 
+  const navigate = useNavigate();
+
   // Generic change handler for text, number, and checkbox fields
   const handleChange = (
     e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement> 
@@ -170,6 +175,20 @@ const CreateNewItem: React.FC = () => {
             onSubmit={handleSubmit}
             method="POST"
           >
+
+          <label htmlFor="storeName">Store Name<span className="required-form-item">*</span></label>
+          <StoresDropdownSelect 
+            value={selectedStore}
+            onChange={(store: Store) => handleStoreSelect(store)}
+          />
+          <button
+            type="button"
+            className="new-store-redirect"
+            onClick={() => navigate("/create-new-store")}
+          >
+          <FontAwesomeIcon icon={faCircleInfo} />
+          Store not listed? Add here.
+          </button>
 
           <label htmlFor="barcode">Barcode (recommended)</label>
           <Scanner
@@ -251,12 +270,6 @@ const CreateNewItem: React.FC = () => {
               maxLength={2000}
             />
 
-            <label htmlFor="storeName">Store Name<span className="required-form-item">*</span></label>
-            <StoresDropdownSelect 
-              value={selectedStore}
-              onChange={(store: Store) => handleStoreSelect(store)}
-            />
-
             <div className="discount-group">
               <label htmlFor="isDiscount">Discount?</label>
               <input