119 lines
3.8 KiB
TypeScript
119 lines
3.8 KiB
TypeScript
"use client";
|
|
import { useLocale, useTranslations } from "next-intl";
|
|
import { useState } from "react";
|
|
import InfiniteScroll from "react-infinite-scroll-component";
|
|
import HeroCarousel from "./Carousel";
|
|
import CategoryGrid from "./CategoryGrid";
|
|
import CollectionSection from "./ProductGrid";
|
|
import {
|
|
useCategories,
|
|
useCarousels,
|
|
useCollections,
|
|
useFavorites,
|
|
} from "@/lib/hooks";
|
|
|
|
export default function HomePage() {
|
|
const locale = useLocale();
|
|
const t = useTranslations("common");
|
|
const [visibleCount, setVisibleCount] = useState(10);
|
|
|
|
const {
|
|
data: categories,
|
|
isLoading: categoriesLoading,
|
|
isError: categoriesError,
|
|
} = useCategories();
|
|
const { data: carousels, isLoading: carouselsLoading } = useCarousels();
|
|
const {
|
|
data: collections,
|
|
isLoading: collectionsLoading,
|
|
isError: collectionsError,
|
|
} = useCollections();
|
|
|
|
useFavorites();
|
|
|
|
const loadMore = () => {
|
|
if (collections && visibleCount < collections.length) {
|
|
setVisibleCount((prev) => Math.min(prev + 10, collections.length));
|
|
}
|
|
};
|
|
|
|
const carouselItems =
|
|
carousels?.map((c) => ({
|
|
title: c.title || "",
|
|
image: c.image || c.thumbnail,
|
|
url: c.link || null,
|
|
})) || [];
|
|
|
|
const visibleCollections = collections?.slice(0, visibleCount) || [];
|
|
const hasMore = collections ? visibleCount < collections.length : false;
|
|
|
|
return (
|
|
<div className="px-2 md:px-4 lg:px-6 pt-4 pb-12 space-y-8 max-w-[1504px] mx-auto">
|
|
{!carouselsLoading && carouselItems.length > 0 && (
|
|
<HeroCarousel items={carouselItems} />
|
|
)}
|
|
|
|
<CategoryGrid
|
|
categories={categories}
|
|
isLoading={categoriesLoading}
|
|
isError={categoriesError}
|
|
locale={locale}
|
|
title={t("categories")}
|
|
/>
|
|
|
|
{collectionsError ? (
|
|
<section className="bg-white rounded-2xl shadow-sm p-6">
|
|
<p className="text-red-600">
|
|
Failed to load collections. Please try again.
|
|
</p>
|
|
</section>
|
|
) : collectionsLoading ? (
|
|
<div className="space-y-8">
|
|
{Array.from({ length: 3 }).map((_, i) => (
|
|
<section key={i} className="bg-white rounded-2xl shadow-sm p-6">
|
|
<div className="h-8 bg-gray-200 rounded w-48 mb-4 animate-pulse" />
|
|
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
|
|
{Array.from({ length: 5 }).map((_, j) => (
|
|
<div key={j} className="space-y-2">
|
|
<div className="w-full h-[260px] bg-gray-200 rounded-xl animate-pulse" />
|
|
<div className="h-4 bg-gray-200 rounded w-3/4 animate-pulse" />
|
|
<div className="h-6 bg-gray-200 rounded w-1/2 animate-pulse" />
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<InfiniteScroll
|
|
dataLength={visibleCollections.length}
|
|
next={loadMore}
|
|
hasMore={hasMore}
|
|
loader={
|
|
<div className="text-center py-8">
|
|
<div className="inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-blue-600 border-r-transparent" />
|
|
<p className="text-gray-500 mt-2">{t("loading")}</p>
|
|
</div>
|
|
}
|
|
endMessage={
|
|
<div className="text-center py-8">
|
|
<p className="text-gray-600">✓ {t("all_collections_loaded")}</p>
|
|
</div>
|
|
}
|
|
scrollThreshold={0.8}
|
|
>
|
|
<div className="space-y-8">
|
|
{visibleCollections.map((collection) => (
|
|
<CollectionSection
|
|
key={collection.id}
|
|
collection={collection}
|
|
locale={locale}
|
|
/>
|
|
))}
|
|
</div>
|
|
</InfiniteScroll>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|