Merge pull request #93 from 202306-NEA-DZ-FEW/dev

ReadMe

.eslintrc.js

@@ -66,6 +66,7 @@ module.exports = {
                 ],
             },
         ],
+        "@next/next/no-img-element": "off",
         //#endregion  //*======== Import Sort ===========
     },
     globals: {

README.md

@@ -1,27 +1,55 @@
-# Capstone project information
+# Welcome to Let's Share
 
-## Project information
+## Project Description
 
--   Project name: [Project name]
--   Project description: [Project description]
--   Technology used: Nextjs, TailwindCSS, i18next, Husky, Prettier, Eslint, Commitlinter (Conventional Commits)
--   Team members: Member1, Member2, etc,
--   Bootcamp: GIZ YE 2022
+Join Let's Share, where sharing is caring! Experience the magic of seamless connections as surplus food, stylish clothes, and cozy furniture find new homes through our user-friendly interface. Let's Share isn't just a platform; it's a front-end showcase, weaving together technology and warmth. Transform your daily exchanges into shared moments. Join us – where front-end innovation meets community connection!
 
-## Installation
+## Key Features
 
-```shell
-npm install -g commitizen // Installs commitizen
-npx husky install         // Installs Husky
-chmod ug+x .husky/*       // Gives husky executable extension
-npm install               // Installs the node modules
-```
+Homepage
+Sign in page
+Sign up page
+List of products page
+Profile page
+About us page
+Blog page
+Single blog page
+Filter Products: Easily filter products by name, category, and price.
+User Authentication: Create accounts, log in, and log out.
+Product Details: View detailed descriptions of products.
+Responsive Design: Ensure accessibility on various devices.
 
-## Development process
+## Technology Stack
 
--   When commiting you will have to use `git cz` and then go through the process. Look at the first commit I made to know what that means.
--   The translation process is done using the i18next library. There's an example in the index.js file of how this is done. Check this github project for more info on how to use the i18next library: [i18next](https://github.com/i18next/next-i18next)
--   When writing commits, commitlinter library is used to make sure that your commits are consistent with the conventional commits. To learn more about it refer to the guidelines in Canvas or the [conventional commits](https://www.conventionalcommits.org/en/v1.0.0/#summary) site.
--   The `layout` folder contains the components that will be used in the layout of pages, so components like the header and footer will be placed there.
+Frontend: Next.js
+Database: Firestore
+Authentication: Firebase
+Styling: CSS, Tailwind CSS
 
-Good luck and happy coding :D
+## Project Goals
+
+Share and reuse products like clothes and furniture amongst the community
+
+## Team Members
+
+Ismail Benlaredj : https://github.com/ismail-benlaredj
+Darine Tag : https://github.com/darinetag
+Hadj Said Bouras : https://github.com/Hadj-Said-Bouras
+Mohamed Cheraitia : https://github.com/mohamed-cheraitia
+Laid Benglia : https://github.com/LaidBengli
+Sara Bagache : https://github.com/SaraBegache
+
+## Getting Started
+
+To run this project locally, follow these steps:
+
+creat a next.js file
+Clone the repository: git clone https://github.com/202306-NEA-DZ-FEW/team-f
+Navigate to the project directory: cd recoded-capstone
+Install dependencies: npm install
+Start the development server: npm run dev
+Open your browser and visit http://localhost:3000
+
+## Bootcamp
+
+Bootcamp: 202306-NEA-DZ-FEW

src/components/blogcard/BlogCard.jsx

@@ -1,3 +1,4 @@
+import Image from "next/image";
 const BlogCard = ({ blog }) => {
     return (
         <div className='bg-white shadow-md rounded-xl ml-2 mr-2 mb-2 mt-2 px-2 py-2 verflow-hidden'>
@@ -7,7 +8,7 @@ const BlogCard = ({ blog }) => {
                         {blog.date}
                     </p>
                 </div>
-                <img
+                <Image
                     src={blog.image}
                     alt={blog.title}
                     className='w-full h-48 object-cover rounded-xl'

src/components/categorycard/CategoryCard.jsx

@@ -1,15 +1,21 @@
-const CategoryCard = ({ category }) => {
+import Link from "next/link";
+
+const CategoryCard = ({ imgSrc, title, href }) => {
     return (
-        <div className='max-w-sm mx-auto bg-white rounded-xl shadow-md overflow-hidden'>
-            <img
-                className='h-48 w-full object-cover'
-                src={category.image}
-                alt={category.name}
-            />
-            <div className='px-6 py-4'>
-                <div className='font-bold text-xl mb-2'>{category.name}</div>
+        <Link href={href}>
+            <div className='h-fit w-36 group'>
+                <div className='w-36 h-36 border border-slate-300 rounded-lg bg-slate-100 shadow-lg '>
+                    <img
+                        className='rounded-lg object-cover w-full h-full'
+                        src={imgSrc}
+                        alt={title}
+                    />
+                </div>
+                <p className='text-black text-lg text-center mt-4 font-medium group-hover:text-green'>
+                    {title}
+                </p>
             </div>
-        </div>
+        </Link>
     );
 };
 

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,47 @@
+import clsx from "clsx";
+
+import { cn } from "@/lib/utils";
+
+const Input = ({
+    name,
+    type,
+    labelText,
+    placeholder,
+    register,
+    requiredMessage,
+    validation,
+    errors,
+    className = "",
+}) => {
+    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={cn(
+                    "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],
+                    },
+                    className,
+                )}
+            />
+            {errors[name] && (
+                <span className='text-red'>{errors[name].message}</span>
+            )}
+        </>
+    );
+};
+
+export default Input;

src/components/loginform/index.jsx

@@ -1,6 +1,6 @@
 import { useRouter } from "next/router";
 import { useState } from "react";
-
+import Link from "next/link";
 import Button from "@/components/button/Button";
 
 import { useAuth } from "@/context/AuthContext";
@@ -79,12 +79,12 @@ export default function LoginForm() {
                     <a className='underline' href='/sign-up'>
                         Sign up
                     </a>
-                    <a
+                    <Link
                         className='block text-centertext-sm mt-2 underline'
                         href='/reset-password'
                     >
                         Forgot Password?
-                    </a>
+                    </Link>
                 </div>
                 {/* <div className='my-4 text-center'>
                     <p className='font-bold'>Log in with:</p>