30 listed items page

.eslintrc.js

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

src/components/categorycard/CategoryCard.jsx

@@ -1,17 +1,21 @@
-import Image from "next/image";
+import Link from "next/link";
 
-const CategoryCard = ({ title, image, category }) => {
+const CategoryCard = ({ imgSrc, title, href }) => {
     return (
-        <div className='max-w-sm mx-auto bg-white rounded-xl shadow-md overflow-hidden h-36 w-36 '>
-            {/* <Image
-                className='h-36 w-36 object-cover'
-                src={image}
-                alt={title}
-            /> */}
-            <div className='px-6 py-4 text-center'>
-                <div className='text-lg mb-2 mt-20'>{category}</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/input/index.jsx

@@ -1,4 +1,7 @@
 import clsx from "clsx";
+
+import { cn } from "@/lib/utils";
+
 const Input = ({
     name,
     type,
@@ -8,6 +11,7 @@ const Input = ({
     requiredMessage,
     validation,
     errors,
+    className = "",
 }) => {
     return (
         <>
@@ -24,12 +28,13 @@ const Input = ({
                 })}
                 placeholder={placeholder}
                 type={type}
-                className={clsx(
+                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] && (

src/constants/index.js

@@ -4,7 +4,7 @@ export const marketingCardData1 = [
     {
         icon: (
             <Image
-                src={"/marketing-icons/sec1.png"}
+                src='/marketing-icons/sec1.png'
                 alt='Icon 1'
                 width={80}
                 height={100}
@@ -17,7 +17,7 @@ export const marketingCardData1 = [
     {
         icon: (
             <Image
-                src={"/marketing-icons/sec2.png"}
+                src='/marketing-icons/sec2.png'
                 alt='Icon 1'
                 width={80}
                 height={100}
@@ -30,7 +30,7 @@ export const marketingCardData1 = [
     {
         icon: (
             <Image
-                src={"/marketing-icons/sec3.png"}
+                src='/marketing-icons/sec3.png'
                 alt='Icon 1'
                 width={80}
                 height={100}
@@ -45,7 +45,7 @@ export const marketingCardData2 = [
     {
         icon: (
             <Image
-                src={"/secondherosec-icons/sec4.png"}
+                src='/secondherosec-icons/sec4.png'
                 alt='Icon 1'
                 width={80}
                 height={80}
@@ -58,7 +58,7 @@ export const marketingCardData2 = [
     {
         icon: (
             <Image
-                src={"/secondherosec-icons/sec5.png"}
+                src='/secondherosec-icons/sec5.png'
                 alt='Icon 1'
                 width={80}
                 height={80}
@@ -71,7 +71,7 @@ export const marketingCardData2 = [
     {
         icon: (
             <Image
-                src={"/secondherosec-icons/sec6.png"}
+                src='/secondherosec-icons/sec6.png'
                 alt='Icon 1'
                 width={80}
                 height={80}
@@ -84,7 +84,7 @@ export const marketingCardData2 = [
     {
         icon: (
             <Image
-                src={"/secondherosec-icons/sec7.png"}
+                src='/secondherosec-icons/sec7.png'
                 alt='Icon 1'
                 width={80}
                 height={80}
@@ -95,3 +95,48 @@ export const marketingCardData2 = [
             "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
     },
 ];
+
+export const categories = [
+    {
+        id: 1,
+        title: "Electronics",
+        imgSrc: "/images/category_img/category_electronics.webp",
+        href: "products/?category=electronics",
+    },
+    {
+        id: 2,
+        title: "Academic",
+        imgSrc: "/images/category_img/category_academic.webp",
+        href: "products/?category=academic",
+    },
+    {
+        id: 3,
+        title: "Clothes",
+        imgSrc: "/images/category_img/category_clothes.webp",
+        href: "products/?category=clothes",
+    },
+    {
+        id: 4,
+        title: "Dorm",
+        imgSrc: "/images/category_img/category_dorm.webp",
+        href: "products/?category=dorm",
+    },
+    {
+        id: 5,
+        title: "Entertainment",
+        imgSrc: "/images/category_img/category_entertainment.webp",
+        href: "products/?category=entertainment",
+    },
+    {
+        id: 6,
+        title: "Beauty",
+        imgSrc: "/images/category_img/category_beauty.webp",
+        href: "products/?category=beauty",
+    },
+    {
+        id: 7,
+        title: "Other",
+        imgSrc: "/images/category_img/category_other.webp",
+        href: "products/?category=other",
+    },
+];

src/layout/Layout.jsx

@@ -4,7 +4,7 @@ import Navbar from "@/components/navbar/Navbar";
 export default function Layout({ children }) {
     return (
         <div className='w-screen h-screen overflow-x-hidden '>
-            <div className='container mx-auto px-4 lg:px-0 '>
+            <div className='container mx-auto px-4 lg:px-8 '>
                 <Navbar />
                 {children}
             </div>

src/lib/firebase/firestoreFunctions.js

@@ -5,6 +5,8 @@ import {
     doc,
     getDoc,
     getDocs,
+    limit,
+    orderBy,
     query,
     updateDoc,
     where,
@@ -95,3 +97,16 @@ export const getItemByCategory = async (category) => {
 export const deleteDocData = async (collection, docId) => {
     return await deleteDoc(doc(db, collection, docId));
 };
+
+// GET ALL
+export const getAllItems = async () => {
+    const q = query(collection(db, "items"), orderBy("createdAt"), limit(15));
+    const querySnapshot = await getDocs(q);
+    const items = [];
+    querySnapshot.forEach((doc) => {
+        let data = doc.data();
+        data.id = doc.id;
+        items.push(data);
+    });
+    return items;
+};

src/pages/products/index.jsx

@@ -0,0 +1,83 @@
+import { useForm } from "react-hook-form";
+
+import { getAllItems } from "@/lib/firebase/firestoreFunctions";
+
+import Button from "@/components/button/Button";
+import CategoryCard from "@/components/categorycard/CategoryCard";
+import Input from "@/components/input";
+import ItemCard from "@/components/itemcard/ItemCard";
+
+import { categories } from "@/constants";
+
+export default function ProductsPage({ items }) {
+    const {
+        register,
+        handleSubmit,
+        formState: { errors, isSubmitting },
+    } = useForm();
+    return (
+        <div className='my-32'>
+            <div className='my-28'>
+                <h2 className='text-3xl font-semibold mb-10'>
+                    Browse by category:{" "}
+                </h2>
+                <div className='flex justify-between'>
+                    {categories.map((category) => {
+                        return <CategoryCard key={category.id} {...category} />;
+                    })}
+                </div>
+            </div>
+            <div className='flex flex-row justify-start gap-5 items-center'>
+                <Input
+                    className='w-1/3 -ml-5'
+                    name='keyword'
+                    type='text'
+                    labelText=''
+                    placeholder='ex: keyboard'
+                    requiredMessage={false}
+                    register={register}
+                    errors={errors}
+                    validation={{
+                        maxLength: {
+                            value: 30,
+                            message: "30 character max",
+                        },
+                    }}
+                />
+                <Input
+                    className='w-1/5'
+                    name='location'
+                    type='text'
+                    labelText=''
+                    placeholder='ex: Oran'
+                    requiredMessage={false}
+                    register={register}
+                    errors={errors}
+                    validation={{
+                        maxLength: {
+                            value: 30,
+                            message: "30 character max",
+                        },
+                    }}
+                />
+                <Button size='lg'> Search</Button>
+                <Button variant='outlineSecondary'> Add item</Button>
+            </div>
+            <div className='flex flex-wrap justify-between w-full mt-5'>
+                {items.map((item) => (
+                    <ItemCard key={item.id} item={item} />
+                ))}
+            </div>
+        </div>
+    );
+}
+
+export async function getServerSideProps() {
+    let items = await getAllItems();
+    items = JSON.parse(JSON.stringify(items));
+    return {
+        props: {
+            items,
+        },
+    };
+}