102 lines
2.7 KiB
TypeScript
102 lines
2.7 KiB
TypeScript
import { Link } from "@remix-run/react";
|
||
import { ChevronLeft, Store } from "lucide-react";
|
||
import { Skeleton } from "./ui/skeleton";
|
||
import { ErrorState } from "./UiProvider";
|
||
|
||
interface SellerTile {
|
||
id?: string;
|
||
sellerId?: string;
|
||
sellerUsername?: string;
|
||
sellerName?: string;
|
||
imageUrl?: string;
|
||
order?: number;
|
||
}
|
||
|
||
interface SellerTilesGridProps {
|
||
sellers: SellerTile[];
|
||
isLoading: boolean;
|
||
isError: boolean;
|
||
refetch: () => void;
|
||
showViewAllButton?: boolean;
|
||
}
|
||
|
||
const SellerTilesGrid = ({
|
||
sellers,
|
||
isLoading,
|
||
isError,
|
||
refetch,
|
||
showViewAllButton = true,
|
||
}: SellerTilesGridProps) => {
|
||
if (isLoading) {
|
||
return <SellerTilesSkeleton />;
|
||
}
|
||
|
||
if (isError) {
|
||
return (
|
||
<div className="px-4">
|
||
<ErrorState onRetry={refetch} />
|
||
</div>
|
||
);
|
||
}
|
||
|
||
if (sellers.length === 0) {
|
||
return null;
|
||
}
|
||
|
||
return (
|
||
<div className="w-full flex flex-col gap-4 px-4">
|
||
{/* Grid Container - 2x2 layout */}
|
||
<div className="grid grid-cols-2 gap-2">
|
||
{sellers.slice(0, 4).map((seller, index) => (
|
||
<Link
|
||
key={seller.id || index}
|
||
to={`/seller/${seller.sellerUsername}`}
|
||
className="relative aspect-square overflow-hidden rounded-lg group"
|
||
>
|
||
{/* Background Image */}
|
||
{seller.imageUrl ? (
|
||
<img
|
||
src={seller.imageUrl}
|
||
alt={seller.sellerName || "فروشگاه"}
|
||
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
|
||
/>
|
||
) : (
|
||
<div className="w-full h-full bg-gradient-to-br from-gray-200 to-gray-300 flex items-center justify-center">
|
||
<Store size={48} className="text-gray-400" />
|
||
</div>
|
||
)}
|
||
</Link>
|
||
))}
|
||
</div>
|
||
|
||
{/* View All Button */}
|
||
{showViewAllButton && (
|
||
<Link
|
||
to="/sellers"
|
||
className="flex items-center justify-center gap-2 w-full py-3 border border-black rounded-none hover:bg-black hover:text-white transition-colors duration-300"
|
||
>
|
||
<span className="text-B14 font-bold">مشاهده همه فروشگاهها</span>
|
||
<ChevronLeft size={18} />
|
||
</Link>
|
||
)}
|
||
</div>
|
||
);
|
||
};
|
||
|
||
const SellerTilesSkeleton = () => {
|
||
return (
|
||
<div className="w-full flex flex-col gap-4 px-4">
|
||
<div className="grid grid-cols-2 gap-2">
|
||
{Array(4)
|
||
.fill(1)
|
||
.map((_, index) => (
|
||
<Skeleton key={index} className="aspect-square rounded-lg" />
|
||
))}
|
||
</div>
|
||
<Skeleton className="w-full h-12 rounded-none" />
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default SellerTilesGrid;
|