a5b3598f8a
Rounded corners, shadows, hover lift effect, rating display, and color-coded cuisine/price tags for better visual hierarchy. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
84 lines
2.5 KiB
TypeScript
84 lines
2.5 KiB
TypeScript
"use client";
|
|
|
|
/** Pulsing skeleton block */
|
|
function Block({ className = "" }: { className?: string }) {
|
|
return <div className={`animate-pulse bg-gray-200 rounded ${className}`} />;
|
|
}
|
|
|
|
/** Skeleton for a single restaurant card */
|
|
export function RestaurantCardSkeleton() {
|
|
return (
|
|
<div className="p-3 rounded-xl border border-gray-100 shadow-sm space-y-2">
|
|
<div className="flex items-start justify-between">
|
|
<Block className="h-4 w-3/5" />
|
|
<Block className="h-3 w-10" />
|
|
</div>
|
|
<div className="flex gap-2">
|
|
<Block className="h-5 w-16 rounded" />
|
|
<Block className="h-5 w-14 rounded" />
|
|
</div>
|
|
<Block className="h-3 w-2/3" />
|
|
<div className="flex gap-1">
|
|
<Block className="h-4 w-14 rounded-full" />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/** Skeleton for the restaurant list (multiple cards) */
|
|
export function RestaurantListSkeleton({ count = 8 }: { count?: number }) {
|
|
return (
|
|
<div className="p-3 space-y-2">
|
|
{Array.from({ length: count }, (_, i) => (
|
|
<RestaurantCardSkeleton key={i} />
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/** Skeleton for restaurant detail view */
|
|
export function RestaurantDetailSkeleton() {
|
|
return (
|
|
<div className="p-4 space-y-4 animate-pulse">
|
|
{/* Title + close */}
|
|
<div className="flex justify-between items-start">
|
|
<Block className="h-6 w-40" />
|
|
<Block className="h-6 w-6 rounded" />
|
|
</div>
|
|
|
|
{/* Rating */}
|
|
<div className="flex items-center gap-2">
|
|
<Block className="h-4 w-24" />
|
|
<Block className="h-4 w-8" />
|
|
</div>
|
|
|
|
{/* Info lines */}
|
|
<div className="space-y-2">
|
|
<Block className="h-4 w-48" />
|
|
<Block className="h-4 w-64" />
|
|
<Block className="h-4 w-36" />
|
|
<Block className="h-4 w-28" />
|
|
</div>
|
|
|
|
{/* Videos section */}
|
|
<div className="space-y-3">
|
|
<Block className="h-4 w-20" />
|
|
{[1, 2].map((i) => (
|
|
<div key={i} className="border rounded-lg p-3 space-y-2">
|
|
<div className="flex items-center gap-2">
|
|
<Block className="h-4 w-16 rounded-sm" />
|
|
<Block className="h-3 w-20" />
|
|
</div>
|
|
<Block className="h-4 w-full" />
|
|
<div className="flex gap-1">
|
|
<Block className="h-5 w-14 rounded" />
|
|
<Block className="h-5 w-16 rounded" />
|
|
</div>
|
|
<Block className="h-3 w-3/4" />
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|