- {positions.map(({ offset, scale, opacity, z }) => {
- const isCenter = offset === 0;
- const slide = sliderSlides[getIndex(offset)];
+ {sliderSlides.map((slide, i) => {
+ const diff = getDiff(i);
+ const isCenter = diff === 0;
+ const isVisible = Math.abs(diff) <= 1;
return (
-
diff --git a/src/components/home/SamsungCarousel.tsx b/src/components/home/SamsungCarousel.tsx
deleted file mode 100644
index 28efdc1..0000000
--- a/src/components/home/SamsungCarousel.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { Carousel } from "@/components/ui/Carousel";
-import { ProductCard } from "@/components/ui/ProductCard";
-import { SectionTitle } from "@/components/ui/SectionTitle";
-import { samsungProducts } from "@/data/sample";
-
-export function SamsungCarousel() {
- return (
-
-
-
-
- {samsungProducts.map((product) => (
-
- ))}
-
-
- );
-}
diff --git a/src/components/home/SpecialSaleCarousel.tsx b/src/components/home/SpecialSaleCarousel.tsx
index 3e75764..5608c3a 100644
--- a/src/components/home/SpecialSaleCarousel.tsx
+++ b/src/components/home/SpecialSaleCarousel.tsx
@@ -2,7 +2,8 @@ import { Carousel } from "@/components/ui/Carousel";
import { Placeholder } from "@/components/ui/Placeholder";
import { ProductCard } from "@/components/ui/ProductCard";
import { SectionTitle } from "@/components/ui/SectionTitle";
-import { specialSaleProducts } from "@/data/sample";
+import { EmptyState } from "@/components/ui/EmptyState";
+import type { Product } from "@/lib/meshkee";
function SpecialSaleBanner() {
return (
@@ -14,14 +15,13 @@ function SpecialSaleBanner() {
src="/images/sale-banner.svg"
alt="فروش ویژه"
width="100%"
- label="240×380"
className="h-full min-h-[380px] w-full rounded-none border-0"
/>
);
}
-export function SpecialSaleCarousel() {
+export function SpecialSaleCarousel({ products }: { products: Product[] }) {
return (
@@ -30,21 +30,25 @@ export function SpecialSaleCarousel() {
enTitle="Special Sale"
action="مشاهده همه"
/>
-
-
- {specialSaleProducts.map((product) => (
-
- ))}
-
+ {products.length === 0 ? (
+
+ ) : (
+
+
+ {products.map((product) => (
+
+ ))}
+
+ )}
);
diff --git a/src/components/home/ThreeBanners.tsx b/src/components/home/ThreeBanners.tsx
index 8a1081f..974cbe8 100644
--- a/src/components/home/ThreeBanners.tsx
+++ b/src/components/home/ThreeBanners.tsx
@@ -1,9 +1,7 @@
-import { Placeholder } from "@/components/ui/Placeholder";
-
const banners = [
- { title: "ماشین لباسشویی", subtitle: "از ۲۸ میلیون", label: "420×160", image: "/images/promo-1.svg" },
- { title: "جاروبرقی", subtitle: "ارسال فوری", label: "420×160", image: "/images/promo-2.svg" },
- { title: "لوازم آشپزخانه", subtitle: "تا ۲۰٪ تخفیف", label: "420×160", image: "/images/promo-3.svg" },
+ { alt: "خانهای تمیزتر، نفسهایی آسودهتر", image: "/images/banner3/6.jpg" },
+ { alt: "خنکای دلنشین، در تمام لحظهها", image: "/images/banner3/7.jpg" },
+ { alt: "هر تصویر، یک تجربه تازه", image: "/images/banner3/8.jpg" },
];
export function ThreeBanners() {
@@ -13,22 +11,12 @@ export function ThreeBanners() {
diff --git a/src/components/home/TopSellingCarousel.tsx b/src/components/home/TopSellingCarousel.tsx
index c32e1cd..4728f2b 100644
--- a/src/components/home/TopSellingCarousel.tsx
+++ b/src/components/home/TopSellingCarousel.tsx
@@ -1,9 +1,10 @@
import { Carousel } from "@/components/ui/Carousel";
import { ProductCard } from "@/components/ui/ProductCard";
import { SectionTitle } from "@/components/ui/SectionTitle";
-import { topSellingProducts } from "@/data/sample";
+import { EmptyState } from "@/components/ui/EmptyState";
+import type { Product } from "@/lib/meshkee";
-export function TopSellingCarousel() {
+export function TopSellingCarousel({ products }: { products: Product[] }) {
return (
@@ -12,17 +13,21 @@ export function TopSellingCarousel() {
enTitle="Top Selling"
action="مشاهده همه"
/>
-
- {topSellingProducts.map((product) => (
-
- ))}
-
+ {products.length === 0 ? (
+
+ ) : (
+
+ {products.map((product) => (
+
+ ))}
+
+ )}
);
diff --git a/src/components/home/TwoBanners.tsx b/src/components/home/TwoBanners.tsx
index fbe7c29..d61eb2f 100644
--- a/src/components/home/TwoBanners.tsx
+++ b/src/components/home/TwoBanners.tsx
@@ -1,5 +1,3 @@
-import { Placeholder } from "@/components/ui/Placeholder";
-
export function TwoBanners() {
return (
@@ -7,43 +5,21 @@ export function TwoBanners() {
diff --git a/src/components/ui/Carousel.tsx b/src/components/ui/Carousel.tsx
index 317f351..fb13506 100644
--- a/src/components/ui/Carousel.tsx
+++ b/src/components/ui/Carousel.tsx
@@ -1,6 +1,11 @@
"use client";
-import { useRef } from "react";
+import { Children, useRef } from "react";
+import { Swiper, SwiperSlide } from "swiper/react";
+import { FreeMode } from "swiper/modules";
+import type { Swiper as SwiperClass } from "swiper";
+import "swiper/css";
+import "swiper/css/free-mode";
type CarouselProps = {
children: React.ReactNode;
@@ -36,14 +41,7 @@ function ChevronRightIcon() {
}
export function Carousel({ children, ariaLabel }: CarouselProps) {
- const trackRef = useRef