24 profile

src/components/delete-warning/index.jsx

@@ -0,0 +1,46 @@
+import { useState } from "react";
+
+import { deleteDocData } from "@/lib/firebase/firestoreFunctions";
+
+import Button from "../button/Button";
+
+export default function DeleteWarning({
+    setDeleteWarningItem,
+    deleteWarningItem,
+    setItems,
+    items,
+}) {
+    const [isLoading, setIsLoading] = useState(false);
+    const handleDelete = async () => {
+        setIsLoading(true);
+        await deleteDocData("items", deleteWarningItem);
+        setItems(items.filter((item) => item.id !== deleteWarningItem));
+        setDeleteWarningItem(false);
+        setIsLoading(false);
+    };
+    return (
+        <div className='fixed w-full h-full inset-0 z-40 flex justify-center items-center overflow-hidden  transition-opacity'>
+            <div className='absolute  w-full h-full bg-[black] opacity-80 right-0 top-0'></div>
+            <div className='relative text-white  py-12 px-16 bg-[#00000059]  rounded-lg z-60 shadow-xl border border-slate-200 '>
+                <p> Do you want to delete this item?</p>
+                <div className='flex gap-9 mt-10 w-full justify-center'>
+                    <Button
+                        className={`${isLoading ? "bg-slate-300 " : "bg-red"}`}
+                        onClick={handleDelete}
+                        disabled={isLoading}
+                    >
+                        Delete
+                    </Button>
+                    <Button
+                        onClick={() => setDeleteWarningItem(false)}
+                        variant='outlinePrimary'
+                        className={`${isLoading ? "bg-slate-300 " : ""}`}
+                        disabled={isLoading}
+                    >
+                        Cancel
+                    </Button>
+                </div>
+            </div>
+        </div>
+    );
+}

src/components/file-input/FileInput.jsx

@@ -13,7 +13,6 @@ const FileInput = ({ files, setFiles, register, errors, clearErrors }) => {
         setFiles(Array.from(e.target.files));
         setInput(true);
     };
-
     return (
         <div
             className={clsx(
@@ -23,21 +22,30 @@ const FileInput = ({ files, setFiles, register, errors, clearErrors }) => {
         >
             <input
                 {...register("image", {
-                    required: "Add at least one image to continue",
+                    required: files
+                        ? false
+                        : "Add at least one image to continue",
                 })}
                 type='file'
                 className='w-full h-full absolute top-0 left-0 brd opacity-0 cursor-pointer'
                 onChange={handleChange}
                 accept='image/*'
                 multiple
             />
-            {input ? (
+            {input || files ? (
                 <div className='flex flex-wrap w-full h-full  gap-4 p-8'>
                     {files &&
                         files.map((file) => (
                             <InputImage
-                                key={file.name}
-                                imgSrc={URL.createObjectURL(file)}
+                                key={
+                                    typeof file === "string" ? file : file.name
+                                }
+                                imgSrc={
+                                    typeof file === "string" && !input
+                                        ? file
+                                        : URL.createObjectURL(file)
+                                }
+                                showImage={true}
                             />
                         ))}
                 </div>

src/components/herosection/HeroSection.jsx

@@ -1,6 +1,6 @@
 import Image from "next/image";
 
-const HeroSection = () => {
+const HeroSection = ({ description }) => {
     return (
         <section>
             <div className='lg:grid grid-cols-2'>
@@ -11,15 +11,8 @@ const HeroSection = () => {
                     height={500}
                     alt='hero image'
                 />
-                <div className='lg:my-28'>
-                    <p className='m-20 text-xl'>
-                        Lorem ipsum dolor sit amet consectetur, adipisicing
-                        elit. Ullam, quia ad alias non saepe aliquid, totam,
-                        aliqu perspiciatis optio doloribus debitis vero
-                        voluptates esse. Voluptatum nihil nam fuga minima! quis
-                        nostr exercitation ullamco laboris nisi ut aliquip ex ea
-                        commodo consequat.
-                    </p>
+                <div className='lg:my-28 '>
+                    <p className='m-20 text-xl lg:w-fit'>{description}</p>
                     <div className='flex justify-center'>
                         <button className='bg-green text-white border rounded-2xl w-40 py-2.5 font-semibold'>
                             Donate Now

src/components/input/index.jsx

@@ -0,0 +1,42 @@
+import clsx from "clsx";
+const Input = ({
+    name,
+    type,
+    labelText,
+    placeholder,
+    register,
+    requiredMessage,
+    validation,
+    errors,
+}) => {
+    return (
+        <>
+            <label
+                htmlFor={name}
+                className='block text-base font-light text-slate-700 -mb-4'
+            >
+                {labelText}
+            </label>
+            <input
+                {...register(name, {
+                    required: requiredMessage,
+                    ...validation,
+                })}
+                placeholder={placeholder}
+                type={type}
+                className={clsx(
+                    "p-2 block w-full border rounded-md focus:outline-none focus:ring-2 focus:ring-green",
+                    {
+                        "border-red": errors[name],
+                        "border-slate-300": !errors[name],
+                    },
+                )}
+            />
+            {errors[name] && (
+                <span className='text-red'>{errors[name].message}</span>
+            )}
+        </>
+    );
+};
+
+export default Input;

src/components/profile/AvatarUploadImage.jsx

@@ -0,0 +1,32 @@
+/* eslint-disable @next/next/no-img-element */
+import { AiFillCamera } from "react-icons/ai";
+
+function AvatarUploadImage({ image, setFile, file }) {
+    return (
+        <>
+            <div className='group w-24 h-24 rounded-full relative '>
+                <input
+                    onChange={(e) => {
+                        setFile(e.target.files[0]);
+                    }}
+                    type='file'
+                    className='absolute top-0 left-0 right-0 bottom-0 rounded-full opacity-0 z-30 cursor-pointer'
+                />
+                <div className='hidden group-hover:flex justify-center items-center absolute top-0 left-0 right-0 bottom-0 '>
+                    <div className='absolute top-0 left-0 right-0 bottom-0 bg-black opacity-60 rounded-full'></div>
+                    <AiFillCamera className='text-5xl text-white z-10' />
+                </div>
+                <img
+                    src={file ? URL.createObjectURL(file) : image}
+                    alt='avatar'
+                    className='rounded-full object-cover w-full h-full'
+                />
+            </div>
+            <p className='text-sm text-black -mt-4'>
+                Change your profile picture
+            </p>
+        </>
+    );
+}
+
+export default AvatarUploadImage;