Skip to content

Commit

Permalink
feat(items page): add item categories to items page
Browse files Browse the repository at this point in the history
  • Loading branch information
ismail-benlaredj committed Nov 10, 2023
1 parent 6c461a3 commit 6766ca4
Show file tree
Hide file tree
Showing 12 changed files with 81 additions and 83 deletions.
1 change: 1 addition & 0 deletions .eslintrc.js
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,7 @@ module.exports = {
],
},
],
"@next/next/no-img-element": "off",
//#endregion //*======== Import Sort ===========
},
globals: {
Expand Down
Binary file not shown.
Binary file added public/images/category_img/category_beauty.webp
Binary file not shown.
Binary file added public/images/category_img/category_clothes.webp
Binary file not shown.
Binary file added public/images/category_img/category_dorm.webp
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file added public/images/category_img/category_other.webp
Binary file not shown.
26 changes: 15 additions & 11 deletions src/components/categorycard/CategoryCard.jsx
Original file line number Diff line number Diff line change
@@ -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>
);
};

Expand Down
59 changes: 52 additions & 7 deletions src/constants/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand All @@ -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}
Expand All @@ -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}
Expand All @@ -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}
Expand All @@ -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}
Expand All @@ -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}
Expand All @@ -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}
Expand All @@ -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: "/?category=electronics",
},
{
id: 2,
title: "Academic",
imgSrc: "/images/category_img/category_academic.webp",
href: "/?category=academic",
},
{
id: 3,
title: "Clothes",
imgSrc: "/images/category_img/category_clothes.webp",
href: "/?category=clothes",
},
{
id: 4,
title: "Dorm",
imgSrc: "/images/category_img/category_dorm.webp",
href: "/?category=dorm",
},
{
id: 5,
title: "Entertainment",
imgSrc: "/images/category_img/category_entertainment.webp",
href: "/?category=entertainment",
},
{
id: 6,
title: "Beauty",
imgSrc: "/images/category_img/category_beauty.webp",
href: "/?category=beauty",
},
{
id: 7,
title: "Other",
imgSrc: "/images/category_img/category_other.webp",
href: "/?category=other",
},
];
65 changes: 0 additions & 65 deletions src/pages/listed-items/index.jsx

This file was deleted.

13 changes: 13 additions & 0 deletions src/pages/products/index.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import CategoryCard from "@/components/categorycard/CategoryCard";

import { categories } from "@/constants";

export default function ProductsPage() {
return (
<div className='my-32 flex justify-between'>
{categories.map((category) => {
return <CategoryCard key={category.id} {...category} />;
})}
</div>
);
}

0 comments on commit 6766ca4

Please sign in to comment.