committing wiht errors wbut better than before, moved some stuff more moving coming,

src/components/ComponentType/ComponentTypeList.tsx

@@ -0,0 +1,57 @@
+"use client";
+import { FC, useState } from "react";
+import { componentTypeType } from "src/types/componentTypeType";
+import { componentType } from './componentType'
+// import AddBrand from "./addBrand";
+import { getData } from "../../actions/componentTypeActions";
+
+interface Props {
+  componentType: componentType[];
+}
+
+const ComponentTypeList: FC<Props> = ({ componentType }) => {
+  // State to manage the list of brand items
+  const [brandItems, setBrandItems] = useState<brandType[]>(brands);
+  
+  // Function to create a new brand item
+  const createBrand = (name: string) => {
+    const id = (brandItems.at(-1)?.id || 0) + 1;
+    addBrand(name);
+    setBrandItems((prev) => [...prev, { id: id, name: name }]);
+  };
+
+  // Function to change the text of a brand item
+  const changeBrandName = (id: number, name: string) => {
+    setBrandItems((prev) =>
+      prev.map((brand) => (brand.id === id ? { ...brand, name } : brand))
+    );
+    editBrand(id, name);
+  };
+ 
+  // Function to delete a brand item
+  const deleteBrandItem = (id: number) => {
+    setBrandItems((prev) => prev.filter((brand) => brand.id !== id));
+    deleteBrand(id);
+  };
+
+  // Rendering the brand List component
+  return (
+    <main className="flex mx-auto max-w-xl w-full min-h-screen flex-col items-center p-16">
+      <div className="text-5xl text-gray-800 font-medium">Ballistic Builder Brand</div>
+      <div className="w-full flex flex-col mt-8 gap-2">
+        {/* Mapping through brand items and rendering brand component for each */}
+        {brandItems.map((brand) => (
+          <Brand
+            key={brand.id}
+            brand={brand}
+            changeBrandName={changeBrandName}
+            deleteBrand={deleteBrand}
+          />
+        ))}
+      </div>
+      {/* Adding brand component for creating new brand */}
+      <AddBrand createBrand={createBrand} />
+    </main>
+  );
+};
+export default ComponentTypeList;

src/components/ComponentType/componentType.tsx

@@ -0,0 +1,99 @@
+"use client";
+import { ChangeEvent, FC, useState } from "react";
+import { componentTypeType } from "src/types/componentTypeType";
+
+interface Props {
+  componentType: componentTypeType;
+  changeComponentTypeName: (id: number, name: string) => void;
+
+  deleteComponentType: (id: number) => void;
+}
+
+export const componentType: FC<Props> = ({
+  componentType,
+  changeComponentTypeName,
+  deleteComponentType,
+}) => {
+  // State for handling editing mode
+  const [editing, setEditing] = useState(false);
+
+  // State for handling text input
+  const [name, setName] = useState(  componentType.name);
+
+  // Event handler for text input change
+  const handleNameChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setName(e.target.value);
+  };
+
+ // Event handler for initiating the edit mode
+  const handleEdit = () => {
+    setEditing(true);
+  };
+
+  // Event handler for saving the edited text
+  const handleSave = async () => {
+    changeComponentTypeName(componentType.id, name);
+    setEditing(false);
+  };
+
+  // Event handler for canceling the edit mode
+  const handleCancel = () => {
+    setEditing(false);
+    setName(componentType.name);
+  };
+  // Event handler for deleting a componentType item
+  const handleDelete = () => {
+    if (confirm("Are you sure you want to delete this brand?")) {
+      deleteComponentType(componentType.id);
+    }
+  };
+  // Rendering the Brands component
+  return (
+    <div className="flex items-center gap-2 p-4 border-gray-200 border-solid border rounded-lg">
+      {/* Checkbox for marking the componentType as done */}
+    
+      {/* Input field for brand text */}
+      <input
+        type="text"
+        value={name}
+        onChange={handleNameChange}
+        readOnly={!editing}
+        className="outline-none read-only:border-transparent focus:border border-gray-200 rounded px-2 py-1 w-full"
+      />
+      {/* Action buttons for editing, saving, canceling, and deleting */}
+      <div className="flex gap-1 ml-auto">
+        {editing ? (
+          <button
+            onClick={handleSave}
+            className="bg-green-600 text-green-50 rounded px-2 w-14 py-1"
+          >
+            Save
+          </button>
+        ) : (
+          <button
+            onClick={handleEdit}
+            className="bg-blue-400 text-blue-50 rounded w-14 px-2 py-1"
+          >
+            Edit
+          </button>
+        )}
+        {editing ? (
+          <button
+            onClick={handleCancel}
+            className="bg-red-400 w-16 text-red-50 rounded px-2 py-1"
+          >
+            Close
+          </button>
+        ) : (
+          <button
+            onClick={handleDelete}
+            className="bg-red-400 w-16 text-red-50 rounded px-2 py-1"
+          >
+            Delete
+          </button>
+        )}
+      </div>
+    </div>
+  );
+};
+export default componentType;

src/components/DropList/statesDroplist.tsx

@@ -0,0 +1,81 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import InputLabel from '@mui/material/InputLabel';
+import MenuItem from '@mui/material/MenuItem';
+import FormControl from '@mui/material/FormControl';
+import Select, { SelectChangeEvent } from '@mui/material/Select';
+
+export default function BasicSelect() {
+  const [abbrev, setAbbrev] = React.useState('');
+
+  const handleChange = (event: SelectChangeEvent) => {
+    setAbbrev(event.target.value as string);
+  };
+
+  return (
+    <Box sx={{ minWidth: 120 }}>
+      <FormControl fullWidth>
+        <InputLabel id="demo-simple-select-label">State</InputLabel>
+        <Select
+          labelId="demo-simple-select-label"
+          id="demo-simple-select"
+          value={abbrev}
+          label="State"
+          onChange={handleChange}
+        >
+          <MenuItem value={"AL"}>Alabama</MenuItem>
+          <MenuItem value={"AK"}>Alaska</MenuItem>
+          <MenuItem value={"AZ"}>Arizona</MenuItem>
+          <MenuItem value={"AR"}>Arkansas</MenuItem>
+          <MenuItem value={"CA"}>California</MenuItem>
+          <MenuItem value={"CO"}>Colorado</MenuItem>
+          <MenuItem value={"CT"}>Connecticut</MenuItem>
+          <MenuItem value={"DE"}>Delaware</MenuItem>
+          <MenuItem value={"DC"}>District of Columbia</MenuItem>
+          <MenuItem value={"FL"}>Florida</MenuItem>
+          <MenuItem value={"GA"}>Georgia</MenuItem>
+          <MenuItem value={"HI"}>Hawaii</MenuItem>
+          <MenuItem value={"ID"}>Idaho</MenuItem>
+          <MenuItem value={"IL"}>Illinois</MenuItem>
+          <MenuItem value={"IN"}>Indiana</MenuItem>
+          <MenuItem value={"IA"}>Iowa</MenuItem>
+          <MenuItem value={"KS"}>Kansas</MenuItem>
+          <MenuItem value={"KY"}>Kentucky</MenuItem>
+          <MenuItem value={"LA"}>Louisiana</MenuItem>
+          <MenuItem value={"ME"}>Maine</MenuItem>
+          <MenuItem value={"MT"}>Montana</MenuItem>
+          <MenuItem value={"NE"}>Nebraska</MenuItem>
+          <MenuItem value={"NV"}>Nevada</MenuItem>
+          <MenuItem value={"NH"}>New Hampshire</MenuItem>
+          <MenuItem value={"NJ"}>New Jersey</MenuItem>
+          <MenuItem value={"NM"}>New Mexico</MenuItem>
+          <MenuItem value={"NY"}>New York</MenuItem>
+          <MenuItem value={"NC"}>North Carolina</MenuItem>
+          <MenuItem value={"ND"}>North Dakota</MenuItem>
+          <MenuItem value={"OH"}>Ohio</MenuItem>
+          <MenuItem value={"OK"}>Oklahoma</MenuItem>
+          <MenuItem value={"OR"}>Oregon</MenuItem>
+          <MenuItem value={"MD"}>Maryland</MenuItem>
+          <MenuItem value={"MA"}>Massachusetts</MenuItem>
+          <MenuItem value={"MI"}>Michigan</MenuItem>
+          <MenuItem value={"MN"}>Minnesota</MenuItem>
+          <MenuItem value={"MS"}>Mississippi</MenuItem>
+          <MenuItem value={"MO"}>Missouri</MenuItem>
+          <MenuItem value={"PA"}>Pennsylvania</MenuItem>
+          <MenuItem value={"RI"}>Rhode Island</MenuItem>
+          <MenuItem value={"SC"}>South Carolina</MenuItem>
+          <MenuItem value={"SD"}>South Dakota</MenuItem>
+          <MenuItem value={"TN"}>Tennessee</MenuItem>
+          <MenuItem value={"TX"}>Texas</MenuItem>
+          <MenuItem value={"UT"}>Utah</MenuItem>
+          <MenuItem value={"VT"}>Vermont</MenuItem>
+          <MenuItem value={"VA"}>Virginia</MenuItem>
+          <MenuItem value={"WA"}>Washington</MenuItem>
+          <MenuItem value={"WV"}>West Virginia</MenuItem>
+          <MenuItem value={"WI"}>Wisconsin</MenuItem>
+          <MenuItem value={"WY"}>Wyoming</MenuItem>
+        </Select>
+      </FormControl>
+    </Box>
+  );
+}

src/components/HomeContent/index.tsx

@@ -2,9 +2,9 @@ import Link from "next/link";
 import Header from "../Header";
 import Hero from "../Hero";
 import FeaturesSection from "../FeaturesSection";
-import About from "../About";
-import Contact from "../Contact";
-import Footer from "../Footer ";
+import About from "../site/About";
+import Contact from "../site/Contact";
+import Footer from "../site/Footer ";
 
 export default function HomeContent() {