diff --git a/app/home/Home.tsx b/app/home/Home.tsx index c190dd2..cf7ae84 100644 --- a/app/home/Home.tsx +++ b/app/home/Home.tsx @@ -1,4 +1,5 @@ import BannerSection from "./components/BannerSection"; +import BestSellerCategories from "./components/BestSellerCategories"; import CategorySection from "./components/CategorySection"; import OrderByApplication from "./components/OrderByApplication"; import ProductSection from "./components/ProductSection"; @@ -12,6 +13,7 @@ const Home = () => { + ); }; diff --git a/app/home/components/BestSellerCategories.tsx b/app/home/components/BestSellerCategories.tsx new file mode 100644 index 0000000..e40f844 --- /dev/null +++ b/app/home/components/BestSellerCategories.tsx @@ -0,0 +1,70 @@ +import { cn } from "@/app/lib/cn"; +import bannersImage from "@/assets/images/best-sellers/banners.jpg"; +import boxesImage from "@/assets/images/best-sellers/boxes.jpg"; +import businessCardsImage from "@/assets/images/best-sellers/business-cards.jpg"; +import calendarsImage from "@/assets/images/best-sellers/calendars.jpg"; +import catalogsImage from "@/assets/images/best-sellers/catalogs.png"; +import { ArrowLeft } from "iconsax-reactjs"; +import Image, { type StaticImageData } from "next/image"; +import { type FC } from "react"; + +type CategoryItem = { + title: string; + image: StaticImageData; + featured?: boolean; +}; + +const categories: CategoryItem[] = [ + { title: "جعبه ها", image: boxesImage, featured: true }, + { title: "کاتالوگ ها", image: catalogsImage }, + { title: "کارت ویزیت", image: businessCardsImage }, + { title: "تقویم ها", image: calendarsImage }, + { title: "بنرها", image: bannersImage }, +]; + +type CategoryTileProps = { + title: string; + image: StaticImageData; + featured?: boolean; +}; + +const CategoryTile: FC = ({ title, image, featured }) => { + return ( +
+ {title} +
+
{title}
+
+ مشاهده + +
+
+
+ ); +}; + +const BestSellerCategories: FC = () => { + return ( +
+
دسته بندی های پرفروش
+ +
+ {categories.map((category) => ( + + ))} +
+
+ ); +}; + +export default BestSellerCategories; diff --git a/assets/images/best-sellers/banners.jpg b/assets/images/best-sellers/banners.jpg new file mode 100644 index 0000000..8b19db3 Binary files /dev/null and b/assets/images/best-sellers/banners.jpg differ diff --git a/assets/images/best-sellers/boxes.jpg b/assets/images/best-sellers/boxes.jpg new file mode 100644 index 0000000..1905f50 Binary files /dev/null and b/assets/images/best-sellers/boxes.jpg differ diff --git a/assets/images/best-sellers/business-cards.jpg b/assets/images/best-sellers/business-cards.jpg new file mode 100644 index 0000000..ac8e9bc Binary files /dev/null and b/assets/images/best-sellers/business-cards.jpg differ diff --git a/assets/images/best-sellers/calendars.jpg b/assets/images/best-sellers/calendars.jpg new file mode 100644 index 0000000..655aded Binary files /dev/null and b/assets/images/best-sellers/calendars.jpg differ diff --git a/assets/images/best-sellers/catalogs.png b/assets/images/best-sellers/catalogs.png new file mode 100644 index 0000000..d5b4aea Binary files /dev/null and b/assets/images/best-sellers/catalogs.png differ