260 lines
9.8 KiB
TypeScript
260 lines
9.8 KiB
TypeScript
import { useEffect } from "react";
|
||
import { MetaFunction } from "@remix-run/node";
|
||
import { Link, useNavigate } from "@remix-run/react";
|
||
import { safeGoBack } from "~/utils/helpers";
|
||
import { useCollectionsInfiniteQuery } from "~/requestHandler/use-collection-hooks";
|
||
import { Skeleton } from "~/components/ui/skeleton";
|
||
import {
|
||
Package,
|
||
RefreshCw,
|
||
ArrowRight,
|
||
ShoppingBag,
|
||
Calendar,
|
||
} from "lucide-react";
|
||
|
||
export default function Collections() {
|
||
const navigate = useNavigate();
|
||
const {
|
||
data,
|
||
fetchNextPage,
|
||
hasNextPage,
|
||
isFetchingNextPage,
|
||
status,
|
||
refetch,
|
||
} = useCollectionsInfiniteQuery({
|
||
pageSize: 20,
|
||
});
|
||
|
||
// Flatten all collections from all pages
|
||
const allCollections = data?.pages.flatMap((page) => page.results) || [];
|
||
|
||
// Format date helper
|
||
const formatDate = (dateString?: string) => {
|
||
if (!dateString) return "";
|
||
const date = new Date(dateString);
|
||
return new Intl.DateTimeFormat("fa-IR", {
|
||
year: "numeric",
|
||
month: "long",
|
||
day: "numeric",
|
||
}).format(date);
|
||
};
|
||
|
||
// Loading skeleton
|
||
const CollectionSkeleton = () => (
|
||
<div className="flex flex-col gap-4 px-4">
|
||
{Array.from({ length: 6 }).map((_, index) => (
|
||
<div
|
||
key={index}
|
||
className="flex flex-col gap-3 p-4 bg-WHITE2 rounded-2xl border border-inner-border"
|
||
>
|
||
<Skeleton className="w-full h-48 rounded-xl" />
|
||
<Skeleton className="w-3/4 h-5" />
|
||
<Skeleton className="w-full h-3" />
|
||
<div className="flex gap-2">
|
||
<Skeleton className="w-20 h-6" />
|
||
<Skeleton className="w-20 h-6" />
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
);
|
||
|
||
// Empty state
|
||
const EmptyState = () => (
|
||
<div className="flex flex-col items-center justify-center py-20 px-4">
|
||
<div className="w-20 h-20 rounded-full bg-WHITE2 flex items-center justify-center mb-4">
|
||
<Package size={40} className="text-GRAY" />
|
||
</div>
|
||
<h3 className="text-B18 font-bold text-black mb-2">کالکشنی یافت نشد</h3>
|
||
<p className="text-R14 text-GRAY text-center max-w-md">
|
||
در حال حاضر کالکشنی موجود نیست.
|
||
</p>
|
||
</div>
|
||
);
|
||
|
||
// Error state
|
||
const ErrorState = () => (
|
||
<div className="flex flex-col items-center justify-center py-20 px-4">
|
||
<div className="w-20 h-20 rounded-full bg-red-50 flex items-center justify-center mb-4">
|
||
<Package size={40} className="text-red-500" />
|
||
</div>
|
||
<h3 className="text-B18 font-bold text-black mb-2">
|
||
خطا در بارگذاری کالکشنها
|
||
</h3>
|
||
<p className="text-R14 text-GRAY text-center max-w-md mb-6">
|
||
متاسفانه در بارگذاری کالکشنها مشکلی پیش آمد.
|
||
</p>
|
||
<button
|
||
onClick={() => refetch()}
|
||
className="flex items-center gap-2 bg-black text-white px-6 py-3 rounded-full hover:bg-gray-800 transition-all"
|
||
>
|
||
<RefreshCw size={16} />
|
||
<span className="text-R14 font-bold">تلاش مجدد</span>
|
||
</button>
|
||
</div>
|
||
);
|
||
|
||
// Handle scroll for infinite loading
|
||
useEffect(() => {
|
||
const handleScroll = () => {
|
||
if (
|
||
window.innerHeight + window.scrollY >=
|
||
document.documentElement.scrollHeight - 500 &&
|
||
hasNextPage &&
|
||
!isFetchingNextPage
|
||
) {
|
||
fetchNextPage();
|
||
}
|
||
};
|
||
|
||
window.addEventListener("scroll", handleScroll);
|
||
return () => window.removeEventListener("scroll", handleScroll);
|
||
}, [hasNextPage, isFetchingNextPage, fetchNextPage]);
|
||
|
||
const handleBack = () => {
|
||
safeGoBack(navigate);
|
||
};
|
||
|
||
return (
|
||
<div className="flex flex-col bg-WHITE pb-20">
|
||
{/* Header - مطابق با ProfilePagesHeader */}
|
||
<div className="flex flex-row h-[65px] sticky top-0 z-30 bg-WHITE w-full items-center justify-center border-b border-inner-border">
|
||
<ArrowRight
|
||
onClick={handleBack}
|
||
className="absolute top-5 right-5 cursor-pointer"
|
||
/>
|
||
<p className="text-B16 font-bold">کالکشنها</p>
|
||
</div>
|
||
|
||
{/* Content */}
|
||
<div className="flex flex-col py-6">
|
||
{status === "pending" ? (
|
||
<CollectionSkeleton />
|
||
) : status === "error" ? (
|
||
<ErrorState />
|
||
) : allCollections.length === 0 ? (
|
||
<EmptyState />
|
||
) : (
|
||
<>
|
||
<div className="flex flex-col gap-4 px-4">
|
||
{allCollections.map((collection) => (
|
||
<Link
|
||
key={collection.id}
|
||
to={`/collection/${collection.id}`}
|
||
className="group cursor-pointer"
|
||
>
|
||
<div className="flex flex-col gap-3 p-4 bg-WHITE2 rounded-2xl border border-inner-border hover:border-gray-300 transition-all duration-300 hover:shadow-lg">
|
||
{/* Collection Image - بزرگ */}
|
||
<div className="relative overflow-hidden rounded-xl w-full h-48 bg-gray-100">
|
||
{collection.coverImageUrl ? (
|
||
<img
|
||
src={collection.coverImageUrl}
|
||
alt={collection.title || "Collection"}
|
||
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
|
||
/>
|
||
) : (
|
||
<div className="w-full h-full flex items-center justify-center bg-WHITE2">
|
||
<Package size={64} className="text-GRAY" />
|
||
</div>
|
||
)}
|
||
|
||
{/* Product Count Badge */}
|
||
{collection.productCount !== undefined && (
|
||
<div className="absolute bottom-3 left-3">
|
||
<div className="flex items-center gap-1.5 bg-white/95 backdrop-blur-sm px-3 py-1.5 rounded-full shadow-md">
|
||
<ShoppingBag size={14} className="text-black" />
|
||
<span className="text-R12 text-black font-bold">
|
||
{collection.productCount} محصول
|
||
</span>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* Collection Info */}
|
||
<div className="flex flex-col gap-2">
|
||
<div className="flex items-start justify-between gap-2">
|
||
<h3 className="text-B16 font-bold text-black line-clamp-2 flex-1">
|
||
{collection.title || "بدون عنوان"}
|
||
</h3>
|
||
<ArrowRight
|
||
size={20}
|
||
className="text-GRAY transform rotate-180 group-hover:translate-x-1 transition-transform flex-shrink-0 mt-0.5"
|
||
/>
|
||
</div>
|
||
|
||
{collection.description && (
|
||
<p className="text-R13 text-GRAY line-clamp-2">
|
||
{collection.description}
|
||
</p>
|
||
)}
|
||
|
||
{/* Bottom Info Row */}
|
||
<div className="flex items-center justify-between gap-2 pt-2 border-t border-inner-border">
|
||
<div className="flex items-center gap-4 flex-wrap">
|
||
{/* Created Date */}
|
||
{collection.createdAt && (
|
||
<div className="flex items-center gap-1.5">
|
||
<Calendar size={14} className="text-GRAY" />
|
||
<span className="text-R12 text-GRAY">
|
||
{formatDate(collection.createdAt)}
|
||
</span>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</Link>
|
||
))}
|
||
</div>
|
||
|
||
{/* Loading More Indicator */}
|
||
{isFetchingNextPage && (
|
||
<div className="flex justify-center items-center py-8">
|
||
<div className="flex gap-2">
|
||
<div className="w-3 h-3 bg-black rounded-full animate-bounce [animation-delay:-0.3s]" />
|
||
<div className="w-3 h-3 bg-black rounded-full animate-bounce [animation-delay:-0.15s]" />
|
||
<div className="w-3 h-3 bg-black rounded-full animate-bounce" />
|
||
</div>
|
||
</div>
|
||
)}
|
||
</>
|
||
)}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export const meta: MetaFunction = () => {
|
||
const title = "کالکشنهای ویترون | مجموعه محصولات منتخب";
|
||
const description =
|
||
"مشاهده مجموعههای منتخب از بهترین محصولات ویترون. کالکشنهای منحصر به فرد و با کیفیت.";
|
||
const imageUrl =
|
||
"https://vitrownstatics.s3.ir-thr-at1.arvanstorage.ir/SVG-06.svg?versionId=";
|
||
|
||
return [
|
||
{ title },
|
||
{ name: "description", content: description },
|
||
{
|
||
name: "keywords",
|
||
content: "کالکشن، مجموعه محصولات، محصولات منتخب، ویترون، خرید آنلاین",
|
||
},
|
||
{ name: "robots", content: "index, follow" },
|
||
|
||
// Open Graph
|
||
{ property: "og:type", content: "website" },
|
||
{ property: "og:title", content: title },
|
||
{ property: "og:description", content: description },
|
||
{ property: "og:image", content: imageUrl },
|
||
{ property: "og:site_name", content: "ویترون" },
|
||
{ property: "og:locale", content: "fa_IR" },
|
||
|
||
// Twitter Card
|
||
{ name: "twitter:card", content: "summary_large_image" },
|
||
{ name: "twitter:title", content: title },
|
||
{ name: "twitter:description", content: description },
|
||
{ name: "twitter:image", content: imageUrl },
|
||
];
|
||
};
|