Marketplace Buyer Userprofile UI

cubeseed_login/package.json

@@ -16,6 +16,7 @@
     "@material-tailwind/html": "^2.0.0",
     "@radix-ui/react-dialog": "^1.0.4",
     "base-64": "^1.0.0",
+    "formidable": "^3.5.1",
     "next": "13.3.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
@@ -35,6 +36,8 @@
     "@storybook/react": "^7.5.1",
     "@storybook/testing-library": "^0.2.2",
     "@storybook/theming": "^7.5.1",
+    "@material/web": "^1.0.0",
+    "@mui/material": "^5.14.11",
     "@types/node": "20.1.4",
     "@types/react": "18.0.37",
     "@types/react-dom": "18.0.11",
@@ -51,6 +54,7 @@
     "prettier-plugin-tailwindcss": "^0.1.13",
     "pretty-quick": "^3.1.3",
     "storybook": "^7.5.1",
+    "react-icons": "^4.11.0",
     "tailwindcss": "^3.3.2",
     "typescript": "5.0.4"
   },

cubeseed_login/src/component/dashboard/MarketPlaceProfile/CategoryInputField.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import Link from "next/link";
+import styles from "@/styles/marketplaceprofile.module.css"
+import SearchBar from './SearchBar';
+import { BsCart3, BsPersonCircle } from "react-icons/bs";
+import { FiMessageSquare } from "react-icons/fi";
+
+const CategoryInputField: React.FC = () => {
+  return (
+    <div className={styles.categoryInput}>
+      <SearchBar />
+      <div className="flex">
+        <ul className={styles.categoryIcons}>
+          <li><Link href=""><BsCart3 /></Link></li>
+          <li><Link href=""><FiMessageSquare /></Link></li>
+          <li><Link href=""><BsPersonCircle /></Link></li>
+        </ul>
+      </div>
+    </div>
+  );
+};
+
+export default CategoryInputField;

cubeseed_login/src/component/dashboard/MarketPlaceProfile/DemoSideBar.tsx

@@ -0,0 +1,27 @@
+import React, { useState } from 'react';
+import { BsArrowLeftShort } from 'react-icons/bs';
+import styles from '@/styles/marketplaceprofile.module.css';
+
+interface DemoSideBarProps {
+  setSidebarOpen: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+const DemoSideBar: React.FC<DemoSideBarProps> = ({ setSidebarOpen }) => {
+  const [open, setOpen] = useState(true);
+
+  const handleSidebarToggle = () => {
+    setOpen(!open);
+    setSidebarOpen(!open);
+  };
+
+  return (
+    <div className={styles.sidebar} style={{ width: open ? '25%' : '10%' }}>
+      <BsArrowLeftShort
+        className="bg-black text-green-500 text-4xl rounded-full absolute top-9 border cursor-pointer justify-end items-end right-4"
+        onClick={handleSidebarToggle}
+      />
+    </div>
+  );
+};
+
+export default DemoSideBar;

cubeseed_login/src/component/dashboard/MarketPlaceProfile/MyAccountForm.tsx

@@ -0,0 +1,151 @@
+import React from "react";
+import Link from "next/link";
+import { TextField } from "@mui/material";
+import styles from "@/styles/marketplaceprofile.module.css";
+import ProfileImg from "./ProfileImg";
+import useProfile from "./hooks/useProfile";
+
+interface PersonalDetailFormProps {
+  uploading: boolean;
+  selectedImage: string | null;
+  handleFileChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+}
+
+const PersonalDetailForm: React.FC<PersonalDetailFormProps> = ({
+  uploading,
+  selectedImage,
+  handleFileChange,
+}) => {
+  const { errors, formData, handleUserInputs, handleSubmit } = useProfile();
+
+  const inputStyles: React.CSSProperties = {
+    height: "40px",
+    fontSize: "12px",
+    borderColor: "#002629",
+    color: "#99A19F",
+    paddingTop: "18px",
+    paddingBottom: "18px",
+    opacity: "0.5",
+  };
+
+  const labelStyles: React.CSSProperties = {
+    color: "#002629",
+    fontWeight: "400",
+    fontSize: "1rem",
+  };
+
+  return (
+    <div className={styles.mainContent}>
+      <div className={styles.profileImg}>
+        <ProfileImg
+          uploading={uploading}
+          selectedImage={selectedImage}
+          handleFileChange={handleFileChange}
+        />
+      </div>
+
+      <div className={styles.profileContent}>
+        <form className={styles.personalDetails}>
+          <p>Personal Detail</p>
+          <div className={styles.inputForm}>
+            <TextField
+              id="name"
+              type="text"
+              label="Name"
+              name="name"
+              variant="outlined"
+              value={formData.name}
+              placeholder="Name of the user"
+              InputProps={{ style: inputStyles, autoComplete: "off" }}
+              InputLabelProps={{ style: labelStyles, shrink: true }}
+              onChange={handleUserInputs}
+
+            />
+            {errors.name && <div className={styles.error}>{errors.name}</div>}
+
+            <TextField
+              type="tel"
+              name="phone_number"
+              label="Phone Number"
+              variant="outlined"
+              value={formData.phone_number}
+              placeholder="Personal Number"
+              InputProps={{ style: inputStyles, autoComplete: "off" }}
+              InputLabelProps={{ style: labelStyles, shrink: true }}
+              onChange={handleUserInputs}
+            />
+            {errors.phone_number && (
+              <div className={styles.error}>{errors.phone_number}</div>
+            )}
+
+            <TextField
+              type="email"
+              label="Email"
+              name="email"
+              variant="outlined"
+              value={formData.email}
+              placeholder="amanda@gmail.com"
+              InputProps={{ style: inputStyles, autoComplete: "off" }}
+              InputLabelProps={{ style: labelStyles, shrink: true }}
+              onChange={handleUserInputs}
+            />
+            {errors.email && <div className={styles.error}>{errors.email}</div>}
+
+            <TextField
+              type="text"
+              label="Location"
+              name="location"
+              value={formData.location}
+              placeholder="Enter your location"
+              InputProps={{ style: inputStyles, autoComplete: "off" }}
+              InputLabelProps={{ style: labelStyles, shrink: true }}
+              onChange={handleUserInputs}
+            />
+            {errors.location && (
+              <div className={styles.error}>{errors.location}</div>
+            )}
+          </div>
+          <hr />
+          <div className={styles.inputForm}>
+            <p>Password</p>
+            <TextField
+              type="password"
+              label="Old password"
+              name="old_password"
+              variant="outlined"
+              value={formData.old_password}
+              placeholder="Enter old password"
+              InputProps={{ style: inputStyles, autoComplete: "off"}}
+              InputLabelProps={{ style: labelStyles, shrink: true }}
+              onChange={handleUserInputs}
+            />
+            {errors.old_password && (
+              <div className={styles.error}>{errors.old_password}</div>
+            )}
+
+            <TextField
+              type="password"
+              label="New Password"
+              name="new_password"
+              value={formData.new_password}
+              placeholder="At least 8 characters"
+              InputProps={{ style: inputStyles, autoComplete: "off" }}
+              InputLabelProps={{ style: labelStyles, shrink: true }}
+              onChange={handleUserInputs}
+            />
+            {errors.new_password && (
+              <div className={styles.error}>{errors.new_password}</div>
+            )}
+          </div>
+          <div className={styles.btnBusiness}>
+            <button className={styles.btnOutlined} onClick={handleSubmit}> Submit </button>
+            <button className={styles.btnFilled}><Link href="/dashboard/marketplace_dashboard/mybusinessform">Next</Link></button>
+          </div>
+
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default PersonalDetailForm;

cubeseed_login/src/component/dashboard/MarketPlaceProfile/MyAccountFormEdit.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import Link from "next/link";
+import styles from "@/styles/marketplaceprofile.module.css";
+import ProfileImg from './ProfileImg';
+
+const MyAccountFormEdit: React.FC = ()  => {
+  return (
+    <>
+      <div className={styles.mainContent}>
+        <div className={styles.profileImg}>
+          <ProfileImg />
+        </div>
+        <div className={styles.profileContent}>
+          <div className={styles.formEditTitle}>
+            <p>Personal Detail</p>
+            <p>Edit</p>
+          </div>
+          <div className={styles.formContent}>
+            <p>Name</p>
+            <p>Phone Number</p>
+            <p>Email</p>
+            <p>Location</p>
+          </div>
+          <hr />
+          <div className={styles.formEditTitle}>
+            <p>Password</p>
+            <p>Change Password</p>
+          </div>
+          <div className={styles.formContent}>
+            <p>Password</p>
+          </div>
+          <hr />
+          <div className={styles.formEditTitle}>
+            <p>Preferred Products</p>
+            <p>Edit</p>
+          </div>
+          <div className={styles.formContent}>
+            <p>Animal feed, Cocoa Products, Coffee and tea, Frui...</p>
+          </div>
+        </div>
+      </div>
+      <div className={styles.btn}>
+        <button className={styles.btnOutlined}>
+          <Link href="">Delete Account</Link>
+        </button>
+        <button className={styles.btnFilled}>
+          <Link href="/dashboard/marketplace_profile/mybusinessformedit">Next</Link>
+        </button>
+      </div>
+    </>
+  );
+};
+
+export default MyAccountFormEdit;

cubeseed_login/src/component/dashboard/MarketPlaceProfile/MyAccountTitle.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import styles from '@/styles/marketplaceprofile.module.css';
+
+interface MyAccountTitleProps {
+  title: string;
+}
+
+const MyAccountTitle: React.FC<MyAccountTitleProps> = ({ title }) => {
+  return (
+    <div className={styles.accountTile}>
+      <p>{title}</p>
+      <hr />
+    </div>
+  );
+};
+
+export default MyAccountTitle;