nurmuhammet/postshop-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixed some bugs

Browse Source
This commit is contained in:
Jelaletdin12
2025-12-23 13:32:57 +05:00
parent cdc9fa686f
commit 2b46d525f2
30 changed files with 857 additions and 260 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
features/home/components/CategoryGrid.tsx
View File

@@ -3,6 +3,7 @@ import Image from "next/image";
import Link from "next/link";
import { Card, CardContent } from "@/components/ui/card";
import type { Category } from "@/lib/types/api";
import { Skeleton } from "@/components/ui/skeleton";
type Props = {
categories: Category[] | undefined;
@@ -34,11 +35,11 @@ export default function CategoryGrid({
return (
<section className="bg-white rounded-2xl shadow-sm p-6">
<h2 className="text-xl font-semibold mb-4">{title}</h2>
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
{Array.from({ length: 6 }).map((_, i) => (
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
{Array.from({ length: 10 }).map((_, i) => (
<div key={i} className="space-y-2">
<div className="w-full h-36 bg-gray-200 rounded-lg animate-pulse" />
<div className="h-4 bg-gray-200 rounded w-full animate-pulse" />
<Skeleton className="w-full h-36 rounded-lg" />
<Skeleton className="h-4 w-full" />
</div>
))}
</div>

24
features/home/components/HomePage.tsx
View File

@@ -5,6 +5,7 @@ import InfiniteScroll from "react-infinite-scroll-component";
import HeroCarousel from "./Carousel";
import CategoryGrid from "./CategoryGrid";
import CollectionSection from "./ProductGrid";
import { Skeleton } from "@/components/ui/skeleton";
import {
useCategories,
useCarousels,
@@ -49,8 +50,12 @@ export default function HomePage() {
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} />
{carouselsLoading ? (
<section className=" bg-white rounded-2xl overflow-hidden">
<Skeleton className="w-full h-[200px] sm:h-[300px] md:h-[496px]" />
</section>
) : (
carouselItems.length > 0 && <HeroCarousel items={carouselItems} />
)}
<CategoryGrid
@@ -71,13 +76,16 @@ export default function HomePage() {
<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 className="flex items-center justify-between mb-4">
<Skeleton className="h-8 w-48" />
<Skeleton className="h-6 w-6 rounded-full" />
</div>
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-4">
{Array.from({ length: 10 }).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" />
<Skeleton className="w-full h-[260px] rounded-xl" />
<Skeleton className="h-4 w-3/4 mx-2" />
<Skeleton className="h-6 w-1/2 mx-2" />
</div>
))}
</div>

9
features/home/components/ProductCard.tsx
View File

@@ -2,7 +2,7 @@
import { useState, useEffect, useRef, useCallback, MouseEvent } from "react";
import { useRouter } from "next/navigation";
import { Heart, ShoppingCart, Loader2, Plus, Minus, AlertTriangle } from "lucide-react";
import { Heart, ShoppingCart, Plus, Minus, AlertTriangle } from "lucide-react";
import { toast } from "sonner";
import {
Carousel,
@@ -377,8 +377,8 @@ export default function ProductCard({
>
{isSyncing ? (
<>
<Loader2 className="h-4 w-4 animate-spin" />
Adding...
{t("adding")}
</>
) : (
<>
@@ -400,9 +400,6 @@ export default function ProductCard({
</Button>
<div className="flex-1 text-center font-semibold text-sm border rounded-lg h-9 flex items-center justify-center bg-white relative">
{localQuantity}
{isSyncing && (
<Loader2 className="h-3 w-3 animate-spin absolute -top-1 -right-1 text-blue-500" />
)}
</div>
<Button
variant="outline"

27
features/home/components/ProductGrid.tsx
View File

@@ -4,6 +4,7 @@ import { ChevronRight } from "lucide-react";
import ProductCard from "@/features/home/components/ProductCard";
import { useCollectionProducts } from "@/features/collections/hooks/useCollections";
import type { Collection } from "@/lib/types/api";
import { Skeleton } from "@/components/ui/skeleton";
type Props = {
collection: Collection;
@@ -22,24 +23,19 @@ export default function CollectionSection({ collection, locale }: Props) {
router.push(`/collections/${collection.slug}`);
};
// Hide section if no products
if (!isLoading && (!productsData?.data || productsData.data.length === 0)) {
return null;
}
if (isLoading) {
return (
<section className="bg-white rounded-2xl shadow-sm p-6">
<div className="flex items-center justify-between mb-4">
<div className="h-8 w-48 bg-gray-200 rounded animate-pulse" />
<div className="h-6 w-6 bg-gray-200 rounded-full animate-pulse" />
<Skeleton className="h-8 w-48" />
<Skeleton className="h-6 w-6 rounded-full" />
</div>
<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((_, i) => (
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-4">
{Array.from({ length: 10 }).map((_, i) => (
<div key={i} 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 mx-2" />
<div className="h-6 bg-gray-200 rounded w-1/2 animate-pulse mx-2" />
<Skeleton className="w-full h-[260px] rounded-xl" />
<Skeleton className="h-4 w-3/4 mx-2" />
<Skeleton className="h-6 w-1/2 mx-2" />
</div>
))}
</div>
@@ -49,6 +45,11 @@ export default function CollectionSection({ collection, locale }: Props) {
if (isError) return null;
// Hide section if no products
if (!productsData?.data || productsData.data.length === 0) {
return null;
}
const displayProducts = productsData?.data.slice(0, 10) || [];
return (
@@ -99,4 +100,4 @@ export default function CollectionSection({ collection, locale }: Props) {
</div>
</section>
);
}
}