joungmin/tasteby
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Redesign restaurant list with card UI

Browse Source 
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>
This commit is contained in:
joungmin
2026-03-09 11:12:24 +09:00
parent f54da90b5f
commit a5b3598f8a
2 changed files with 40 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
frontend/src/components/Skeleton.tsx
View File

@@ -5,18 +5,21 @@ function Block({ className = "" }: { className?: string }) {
return <div className={`animate-pulse bg-gray-200 rounded ${className}`} />;
}
/** Skeleton for a single restaurant list item */
/** Skeleton for a single restaurant card */
export function RestaurantCardSkeleton() {
return (
<div className="px-4 py-3 space-y-2">
<Block className="h-4 w-3/5" />
<div className="flex gap-2">
<Block className="h-3 w-16" />
<Block className="h-3 w-20" />
<Block className="h-3 w-14" />
<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-sm" />
<Block className="h-4 w-14 rounded-full" />
</div>
</div>
);
@@ -25,7 +28,7 @@ export function RestaurantCardSkeleton() {
/** Skeleton for the restaurant list (multiple cards) */
export function RestaurantListSkeleton({ count = 8 }: { count?: number }) {
return (
<div className="divide-y divide-gray-100">
<div className="p-3 space-y-2">
{Array.from({ length: count }, (_, i) => (
<RestaurantCardSkeleton key={i} />
))}