hamid zarghami
79 lines
3.1 KiB
TypeScript
79 lines
3.1 KiB
TypeScript
"use client";
|
|
|
|
import type { MenuItemViewMode } from "@/components/listview/MenuItem";
|
|
import MenuItemRenderer from "@/components/listview/MenuItemRenderer";
|
|
import VerticalScrollView from "@/components/listview/VerticalScrollView";
|
|
import { Skeleton } from "@/components/ui/skeleton";
|
|
|
|
interface MenuSkeletonProps {
|
|
viewMode?: MenuItemViewMode;
|
|
}
|
|
|
|
const MenuSkeleton = ({ viewMode = "list" }: MenuSkeletonProps) => {
|
|
return (
|
|
<div className="flex flex-col gap-4 items-center pt-8 mb-8">
|
|
<div className="w-full">
|
|
<Skeleton className="h-12 w-full rounded-xl mb-4" />
|
|
<div className="flex gap-3 overflow-x-hidden py-4">
|
|
{[...Array(5)].map((_, index) => (
|
|
<Skeleton key={index} className="h-24 w-24 rounded-xl shrink-0" />
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<section className="w-full">
|
|
<div className="flex justify-between items-center mb-5">
|
|
<Skeleton className="h-5 w-20 rounded-md" />
|
|
<div className="flex gap-2">
|
|
<Skeleton className="h-8 w-24 rounded-xl" />
|
|
<Skeleton className="h-8 w-28 rounded-xl" />
|
|
</div>
|
|
</div>
|
|
|
|
<VerticalScrollView className="mt-5! overflow-y-auto h-full">
|
|
{viewMode === "grid" ? (
|
|
<div className="grid grid-cols-2 gap-3">
|
|
{[...Array(6)].map((_, index) => (
|
|
<MenuItemRenderer key={index} variant="grid">
|
|
<div className="flex flex-col w-full h-full">
|
|
<Skeleton className="rounded-xl aspect-square max-h-[100px] w-full" />
|
|
<div className="mt-4">
|
|
<Skeleton className="h-5 w-full rounded-md mb-1" />
|
|
<Skeleton className="h-4 w-3/4 rounded-md" />
|
|
</div>
|
|
<div className="flex flex-col gap-2 mt-1">
|
|
<Skeleton className="h-4 w-16 rounded-md" />
|
|
<Skeleton className="w-full h-8 rounded-md mt-1" />
|
|
</div>
|
|
</div>
|
|
</MenuItemRenderer>
|
|
))}
|
|
</div>
|
|
) : (
|
|
[...Array(6)].map((_, index) => (
|
|
<MenuItemRenderer key={index} variant="list">
|
|
<div className="flex gap-4 w-full min-h-28 items-stretch">
|
|
<Skeleton className="min-w-28 w-28 h-28 rounded-xl shrink-0 self-center" />
|
|
<div className="flex-1 flex flex-col justify-between min-w-0">
|
|
<div>
|
|
<Skeleton className="h-5 w-32 rounded-md mb-2" />
|
|
<Skeleton className="h-4 w-full rounded-md mb-1" />
|
|
<Skeleton className="h-4 w-3/4 rounded-md" />
|
|
</div>
|
|
<Skeleton className="h-4 w-16 rounded-md mt-2" />
|
|
</div>
|
|
<div className="flex flex-col justify-end shrink-0">
|
|
<Skeleton className="h-8 w-20 rounded-full" />
|
|
</div>
|
|
</div>
|
|
</MenuItemRenderer>
|
|
))
|
|
)}
|
|
</VerticalScrollView>
|
|
</section>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default MenuSkeleton;
|