add stocking page

src/components/ItemType.js

@@ -1,8 +1,14 @@
-import React, { useRef, useEffect, useState } from 'react';
-import styles from './ItemType.module.css';
-import { getImageUrl } from '../helpers/itemHelper';
+import React, { useRef, useEffect, useState } from "react";
+import styles from "./ItemType.module.css";
+import { getImageUrl } from "../helpers/itemHelper";
 
-export default function ItemType({ onClick, onCreate, blank, name: initialName = '', imageUrl }) {
+export default function ItemType({
+  onClick,
+  onCreate,
+  blank,
+  name: initialName = "",
+  imageUrl,
+}) {
   const inputRef = useRef(null);
   const [name, setName] = useState(initialName);
   const [selectedImage, setSelectedImage] = useState(null);
@@ -36,17 +42,21 @@ export default function ItemType({ onClick, onCreate, blank, name: initialName =
 
   const handleCreate = async () => {
     if (!selectedImage) {
-      console.error('No image selected');
+      console.error("No image selected");
       return;
     }
-    
+
     onCreate(name, selectedImage);
   };
 
   return (
     <div className={styles["item-type"]}>
       <div onClick={onClick} className={styles["item-type-rect"]}>
-        <img src={previewUrl} alt={name} className={styles["item-type-image"]} />
+        <img
+          src={previewUrl}
+          alt={name}
+          className={styles["item-type-image"]}
+        />
         {blank && (
           <input
             type="file"
@@ -58,7 +68,9 @@ export default function ItemType({ onClick, onCreate, blank, name: initialName =
       </div>
       <input
         ref={inputRef}
-        className={`${styles["item-type-name"]} ${blank ? styles.border : styles.noborder}`}
+        className={`${styles["item-type-name"]} ${
+          blank ? styles.border : styles.noborder
+        }`}
         value={name}
         onChange={handleNameChange}
         disabled={!blank}