GPT-33: Dropdown option select for categories + units in CreateNewItem

src/custom-dropdown-select/CategoriesDropdownSelect.tsx

@@ -0,0 +1,75 @@
+import Select from "react-dropdown-select";
+
+interface CategoryOption {
+  label: string;
+  value: string;
+}
+
+interface CategoriesDropdownSelectProps {
+    onChange: (value: string) => void;
+    value?: string;
+}
+
+const categoryOptions = [
+  { label: "Meat", value: "Meat" },
+  { label: "Seafood", value: "Seafood" },
+  { label: "Fruits & Vegetables", value: "Fruits & Vegetables" },
+  { label: "Bakery", value: "Bakery" },
+  { label: "Grains", value: "Grains" },
+  { label: "Coffee & Tea", value: "Coffee & Tea" },
+  { label: "Seasoning & Spices", value: "Seasoning & Spices" },
+  { label: "Frozen Items", value: "Frozen Items" },
+  { label: "Snacks", value: "Snacks" },
+  { label: "Packaged Items", value: "Packaged Items" },
+  { label: "Sauces", value: "Sauces" },
+  { label: "To-go Food", value: "To-go Food" },
+  { label: "Household Items", value: "Household Items" },
+  { label: "Toiletries", value: "Toiletries" },
+  { label: "Personal Care", value: "Personal Care" },
+  { label: "OTC Medicines", value: "OTC Medicines" },
+  { label: "Drinks", value: "Drinks" },
+  { label: "Dairy", value: "Dairy" },
+  { label: "Health & Wellness", value: "Health & Wellness" },
+    // amazon categories here
+  { label: "Clothing, Shoes, Jewelry, Watches", value: "Clothing, Shoes, Jewelry, Watches" },
+  { label: "Books", value: "Books" },
+  { label: "Movies, Music, Games", value: "Movies, Music, Games" },
+  { label: "Electronics & Computers", value: "Electronics & Computers" },
+  { label: "Smart Home", value: "Smart Home" },
+  { label: "Home, Garden, Tools", value: "Home, Garden, Tools" },
+  { label: "Pet Supplies", value: "Pet Supplies" },
+  { label: "Toys", value: "Toys" },
+  { label: "Baby & Kids", value: "Baby & Kids" },
+  { label: "Handmade", value: "Handmade" },
+  { label: "Sports & Outdoors", value: "Sports & Outdoors" },
+  { label: "Automobile", value: "Automobile" },
+  { label: "Industrial", value: "Industrial" },
+  {label: "Other", value: "Other"}
+];
+
+const CategoriesDropdownSelect: React.FC<CategoriesDropdownSelectProps> = ({ onChange, value }) => {
+    const handleChange = (values: CategoryOption[]) => {
+        if (values.length > 0) {
+        onChange(values[0].value);
+        }
+    };
+
+    return (
+        <Select
+            clearable
+            searchable
+            create
+            dropdownHandle
+            dropdownPosition="bottom"
+            options={categoryOptions}
+            values={value ? categoryOptions.filter(option => option.value === value) : []}
+            onChange={handleChange}
+            style={{
+                color: "#888"
+            }}
+            placeholder="Select a category"
+        />
+    )
+}
+
+export default CategoriesDropdownSelect;

src/custom-dropdown-select/UnitsDropdownSelect.tsx

@@ -0,0 +1,58 @@
+import Select from "react-dropdown-select";
+
+interface UnitOption {
+  label: string;
+  value: string;
+}
+
+interface UnitsDropdownSelect {
+    onChange: (value: string) => void;
+    value?: string;
+}
+
+const unitOptions = [
+  { label: "count", value: "ct" },
+  { label: "set", value: "set" },
+  { label: "inch", value: "in" },
+  { label: "foot", value: "ft" },
+  { label: "centimeter", value: "cm" },
+  { label: "ounce", value: "oz" },
+  { label: "pound", value: "lb" },
+  { label: "gram", value: "g" },
+  { label: "milligram", value: "mg" },
+  { label: "kilogram", value: "kg" },
+  { label: "milliliter", value: "mL" },
+  { label: "liter", value: "L" },
+  { label: "fluid ounce", value: "fl oz" },
+  { label: "cup", value: "cup" },
+  { label: "pint", value: "pt" },
+  { label: "quart", value: "qt" },
+  { label: "gallon", value: "gal" }
+];
+
+const UnitsDropdownSelect: React.FC<UnitsDropdownSelect> = ({ onChange, value }) => {
+    const handleChange = (values: UnitOption[]) => {
+        if (values.length > 0) {
+        onChange(values[0].value);
+        }
+    };
+
+    return (
+        <Select
+            clearable
+            searchable
+            create
+            dropdownHandle
+            dropdownPosition="bottom"
+            options={unitOptions}
+            values={value ? unitOptions.filter(option => option.value === value) : []}
+            onChange={handleChange}
+            style={{
+                color: "#888"
+            }}
+            placeholder="Select a unit"
+        />
+    )
+}
+
+export default UnitsDropdownSelect;

src/pages/CreateNewItem.tsx

@@ -4,6 +4,8 @@ import Swal from 'sweetalert2'
 import { generateClient } from "aws-amplify/data";
 import type { Schema } from "../../amplify/data/resource";
 import { isSafeUrl } from "../utils/isSafeUrl";
+import CategoriesDropdownSelect from "../custom-dropdown-select/CategoriesDropdownSelect";
+import UnitsDropdownSelect from "../custom-dropdown-select/UnitsDropdownSelect";
 
 const client = generateClient<Schema>();
 
@@ -220,29 +222,19 @@ const CreateNewItem: React.FC = () => {
             />
 
             <label htmlFor="units">Units<span className="required-form-item">*</span></label>
-            <input
-              type="text"
-              id="units"
-              name="units"
-              placeholder="Units IMPLEMENT REACT-DROPDOWN-SELECT HERE WITH PRE-DEFINED LIST & LET USER ADD THEIR OWN UNITS"
+            <UnitsDropdownSelect
               value={DOMPurify.sanitize(inputs.units)}
-              onChange={handleChange}
-              autoComplete="off"
-              maxLength={50}
-              required
+              onChange={(value: string) =>
+                setInputs((prev) => ({ ...prev, unit: value }))
+              }
             />
 
             <label htmlFor="category">Category<span className="required-form-item">*</span></label>
-            <input
-              type="text"
-              id="category"
-              name="category"
-              placeholder="Category IMPLEMENT REACT-DROPDOWN-SELECT HERE WITH PRE-DEFINED LIST & LET USER ADD THEIR OWN CATEGORIES"
+            <CategoriesDropdownSelect
               value={DOMPurify.sanitize(inputs.category)}
-              onChange={handleChange}
-              autoComplete="off"
-              maxLength={50}
-              required
+              onChange={(value: string) =>
+                setInputs((prev) => ({ ...prev, category: value }))
+              }
             />
 
             <label htmlFor="description">