-
-
- {post.date}
- •
- {post.readTime} مطالعه
-
- - {post.title} -
-- {post.excerpt} -
- -
+
{post.categoryName && {post.categoryName}}
diff --git a/src/app/globals.css b/src/app/globals.css
index 323febe..2cfcfe1 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -83,3 +83,9 @@ body {
.carousel-track::-webkit-scrollbar {
display: none;
}
+
+.prose img {
+ width: 100%;
+ height: auto;
+ border-radius: 1rem;
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 9c4ac2a..2f69b9b 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -9,6 +9,7 @@ import { BrandGroupCarousels } from "@/components/home/BrandGroupCarousels";
import { AboutSanihome } from "@/components/home/AboutSanihome";
import { BlogCarousel } from "@/components/home/BlogCarousel";
import {
+ getBlogs,
getBusinessInfo,
getCategories,
getProducts,
@@ -20,15 +21,23 @@ import {
} from "@/lib/meshkee";
export default async function Home() {
- const [categories, storeSpecials, productsResult, brandGroups, staticImageSlots, businessInfo] =
- await Promise.all([
- getCategories(),
- getStoreSpecials(),
- getProducts({ pageSize: 12 }),
- getBrandGroups(),
- getStaticImageSlots(),
- getBusinessInfo(),
- ]);
+ const [
+ categories,
+ storeSpecials,
+ productsResult,
+ brandGroups,
+ staticImageSlots,
+ businessInfo,
+ blogsResult,
+ ] = await Promise.all([
+ getCategories(),
+ getStoreSpecials(),
+ getProducts({ pageSize: 12 }),
+ getBrandGroups(),
+ getStaticImageSlots(),
+ getBusinessInfo(),
+ getBlogs({ pageSize: 8 }),
+ ]);
const contactPhone = businessInfo?.phoneNumbers[0];
const specialSaleProducts = storeSpecials[0]?.items ?? [];
@@ -55,7 +64,7 @@ export default async function Home() {
/>
-
-
-
- {images.slice(1, 5).map((img) => (
-
- )}
+
+
);
diff --git a/src/components/product/ProductGallery.tsx b/src/components/product/ProductGallery.tsx
new file mode 100644
index 0000000..d410e75
--- /dev/null
+++ b/src/components/product/ProductGallery.tsx
@@ -0,0 +1,94 @@
+"use client";
+
+import { useState } from "react";
+
+function ChevronIcon({ direction, className }: { direction: "prev" | "next"; className?: string }) {
+ const d = direction === "prev" ? "M14.5 6.5 9 12l5.5 5.5" : "M9.5 6.5 15 12l-5.5 5.5";
+ return (
+
+ );
+}
+
+export function ProductGallery({ images, alt }: { images: string[]; alt: string }) {
+ const [index, setIndex] = useState(0);
+ const [zoomed, setZoomed] = useState(false);
+ const [origin, setOrigin] = useState({ x: 50, y: 50 });
+
+ const list = images.length > 0 ? images : ["/images/placeholder.svg"];
+ const hasMultiple = list.length > 1;
+
+ const go = (delta: number) => {
+ setIndex((prev) => (prev + delta + list.length) % list.length);
+ };
+
+ return (
+ ("specs");
+ const activeLabel = TABS.find((t) => t.id === active)?.label ?? "";
+
+ return (
+
+
-
+
);
}
diff --git a/src/components/home/BlogCarousel.tsx b/src/components/home/BlogCarousel.tsx
index 4ba16e4..76bb23c 100644
--- a/src/components/home/BlogCarousel.tsx
+++ b/src/components/home/BlogCarousel.tsx
@@ -1,9 +1,15 @@
import { Placeholder } from "@/components/ui/Placeholder";
import { SectionTitle } from "@/components/ui/SectionTitle";
import { Carousel } from "@/components/ui/Carousel";
-import { blogPosts } from "@/data/sample";
+import { EmptyState } from "@/components/ui/EmptyState";
+import type { BlogSummary } from "@/lib/meshkee";
-export function BlogCarousel() {
+function formatDate(iso?: string) {
+ if (!iso) return "";
+ return new Intl.DateTimeFormat("fa-IR", { dateStyle: "long" }).format(new Date(iso));
+}
+
+export function BlogCarousel({ posts }: { posts: BlogSummary[] }) {
return (
{product.brand && (
- {technicalInfo.length > 0 && (
- {product.brand} @@ -61,37 +50,65 @@ export default async function ProductDetailPage({ )} -
- {product.minPrice != null ? (
+
+ {product.minPrice != null && (
{product.minPrice === product.maxPrice
? formatPrice(product.minPrice)
: `${formatPrice(product.minPrice)} - ${formatPrice(product.maxPrice ?? product.minPrice)}`}
تومان
- ) : (
- تماس با فروشگاه
)}
-
- {product.inStock ? "موجود" : "ناموجود"}
+
+ موجودی:
+
+ {product.inStock ? "موجود" : "ناموجود"}
+
+ {variations.length > 0 && (
+
+ {variations.map((variation) => (
+
+ )}
+
{product.minPrice != null ? (
) : contactPhone ? (
📞
تماس با فروشگاه
@@ -100,36 +117,15 @@ export default async function ProductDetailPage({
)}
-
- {product.descriptionHtml && (
-
- )}
+
+ ))}
+ {variation.name}
+
+ {variation.options.map((option) => (
+
+ {option.colorHex && (
+
+ )}
+ {option.label}
+
+ ))}
+
+
-
-
- {technicalInfo.map((field) => (
-
-
- )}
+ مشخصات فنی
-| {field.label} | -{field.value} | -
|---|
@@ -12,42 +18,46 @@ export function BlogCarousel() {
enTitle="Latest Blog"
action="وبلاگ"
/>
-
- {blogPosts.map((post) => (
-
-
- ))}
-
+ {posts.length === 0 ? (
+
+ {posts.map((post) => (
+
+
+
+ ))}
+
+ )}
+
+
+ {post.publishedAt && (
+
+
+ {formatDate(post.publishedAt)}
+ )}
+ + {post.title} +
+ {post.abstract && ( ++ {post.abstract} +
+ )} + + ادامه مطلب ← + +
+
+ );
+}
diff --git a/src/components/product/ProductTabs.tsx b/src/components/product/ProductTabs.tsx
new file mode 100644
index 0000000..b15cab3
--- /dev/null
+++ b/src/components/product/ProductTabs.tsx
@@ -0,0 +1,81 @@
+"use client";
+
+import { useState } from "react";
+import { EmptyState } from "@/components/ui/EmptyState";
+import type { TechnicalInfoField } from "@/lib/meshkee";
+
+type Tab = "specs" | "review" | "comments";
+
+const TABS: { id: Tab; label: string }[] = [
+ { id: "specs", label: "مشخصات فنی" },
+ { id: "review", label: "نقد و بررسی" },
+ { id: "comments", label: "نظرات کاربران" },
+];
+
+export function ProductTabs({
+ technicalInfo,
+ descriptionHtml,
+}: {
+ technicalInfo: TechnicalInfoField[];
+ descriptionHtml?: string;
+}) {
+ const [active, setActive] = useState {
+ const rect = event.currentTarget.getBoundingClientRect();
+ setOrigin({
+ x: ((event.clientX - rect.left) / rect.width) * 100,
+ y: ((event.clientY - rect.top) / rect.height) * 100,
+ });
+ }}
+ onMouseEnter={() => setZoomed(true)}
+ onMouseLeave={() => setZoomed(false)}
+ >
+ {/* eslint-disable-next-line @next/next/no-img-element */}
+ 
+
+ {hasMultiple && (
+ <>
+
+
+
+ )}
+
+
+ {hasMultiple && (
+
+ {list.map((img, i) => (
+
+ ))}
+
+ )}
+
+
+ );
+}
diff --git a/src/components/ui/ProductCard.tsx b/src/components/ui/ProductCard.tsx
index 465e1ee..6485bca 100644
--- a/src/components/ui/ProductCard.tsx
+++ b/src/components/ui/ProductCard.tsx
@@ -28,13 +28,13 @@ export function ProductCard({
}: ProductCardProps) {
const info = (
<>
-
+ {TABS.map((tab) => (
+
+ ))}
+
+
+
+
+ + + {activeLabel} +
+ + {active === "specs" && + (technicalInfo.length === 0 ? ( +
+ {technicalInfo.map((field) => (
+
+ ))}
+
+ {active === "review" &&
+ (descriptionHtml ? (
+
+ ) : (
+
+
+ ))}
+ {field.label} :
+{field.value}
+
+
): Product {
// product slug, so leave it empty rather than fabricating a broken URL from
// the id — callers should fall back to a name search when this is empty.
slug: String(raw.slug ?? ""),
+ // Prefer the Persian name — sanihome.ir is a Persian storefront.
name: String(
- raw.title ?? raw.nameFa ?? raw.name ?? raw.productTitle ?? raw.productNameFa ?? "",
+ raw.nameFa || raw.productNameFa || raw.name || raw.title || raw.productTitle || "",
),
brand:
typeof brand === "string"
@@ -194,10 +195,16 @@ export type ProductDetail = Product & {
function normalizeProductDetail(raw: Record): ProductDetail {
const store = raw.store as Record | undefined;
const images = raw.images as unknown[] | undefined;
+ // Each entry is either a plain url string or a { url } media object.
+ const imageUrls = (images ?? [])
+ .map((i) =>
+ typeof i === "string" ? i : ((i as Record | undefined)?.url as string | undefined),
+ )
+ .filter((url): url is string => Boolean(url));
return {
...normalizeProduct(raw),
descriptionHtml: raw.descriptionHtml as string | undefined,
- images: (images ?? []).filter((i): i is string => typeof i === "string"),
+ images: imageUrls,
categoryId: raw.categoryId as string | undefined,
categoryName:
(raw.categoryNameFa as string | undefined) ?? (raw.categoryName as string | undefined),
@@ -214,11 +221,35 @@ export async function getProduct(slug: string): Promise {
return res?.product ? normalizeProductDetail(res.product) : null;
}
-export async function getProductVariations(slug: string): Promise {
- const res = await apiGet<{ variations: unknown[] }>(
+export type VariationOption = {
+ id: string;
+ label: string;
+ value: string;
+ colorHex?: string | null;
+};
+
+export type ProductVariation = {
+ id: string;
+ name: string;
+ type: string;
+ options: VariationOption[];
+};
+
+export async function getProductVariations(slug: string): Promise {
+ const res = await apiGet<{ variations: Record[] }>(
`/tenants/${DOMAIN}/products/${slug}/variations`,
);
- return res?.variations ?? [];
+ return (res?.variations ?? []).map((v) => ({
+ id: String(v.id ?? ""),
+ name: String(v.name ?? ""),
+ type: String(v.type ?? ""),
+ options: ((v.options as Record[] | undefined) ?? []).map((o) => ({
+ id: String(o.id ?? ""),
+ label: String(o.label ?? o.value ?? ""),
+ value: String(o.value ?? ""),
+ colorHex: (o.colorHex as string | null | undefined) ?? null,
+ })),
+ }));
}
export type TechnicalInfoField = { label: string; value: string };