danak/dkala-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

menu Item

Browse Source
This commit is contained in:
hamid zarghami
2026-06-28 10:06:30 +03:30
parent 4f3b97792d
commit d2418da54a
3 changed files with 69 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/[name]/(Main)/components/MenuSkeleton.tsx
+13 -15
View File
@@ -1,15 +1,15 @@
'use client';
"use client";
import { Skeleton } from "@/components/ui/skeleton";
import VerticalScrollView from "@/components/listview/VerticalScrollView";
import MenuItemRenderer from "@/components/listview/MenuItemRenderer";
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) => {
const MenuSkeleton = ({ viewMode = "list" }: MenuSkeletonProps) => {
return (
<div className="flex flex-col gap-4 items-center pt-8 mb-8">
<div className="w-full">
@@ -31,7 +31,7 @@ const MenuSkeleton = ({ viewMode = 'list' }: MenuSkeletonProps) => {
</div>
<VerticalScrollView className="mt-5! overflow-y-auto h-full">
{viewMode === 'grid' ? (
{viewMode === "grid" ? (
<div className="grid grid-cols-2 gap-3">
{[...Array(6)].map((_, index) => (
<MenuItemRenderer key={index} variant="grid">
@@ -52,20 +52,18 @@ const MenuSkeleton = ({ viewMode = 'list' }: MenuSkeletonProps) => {
) : (
[...Array(6)].map((_, index) => (
<MenuItemRenderer key={index} variant="list">
<div className="flex gap-4 w-full h-full items-center">
<Skeleton className="min-w-28 w-28 h-28 rounded-xl" />
<div className="w-full inline-flex flex-col justify-between">
<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>
<div className="inline-flex mt-2 gap-2 justify-between w-full items-center">
<div className="w-full flex flex-col gap-1">
<Skeleton className="h-4 w-16 rounded-md" />
</div>
<Skeleton className="max-w-[115px] w-full h-8 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>