andy/food
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add light/dark mode with toggle, fix all theme-aware text colors

Browse Source
This commit is contained in:
Andy
2026-03-21 12:18:14 +00:00
parent 4741546adf
commit 75e1d0083f
9 changed files with 211 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
app/components/RestaurantCard.tsx
View File

@@ -30,18 +30,19 @@ export default function RestaurantCard({ restaurant, latestVisit, index }: Props
transition={{ duration: 0.4, delay: index * 0.08, ease: [0.25, 0.1, 0.25, 1] }}
>
<Link href={`/restaurant/${restaurant.id}`}>
<div className="group relative rounded-2xl border border-white/[0.06] bg-white/[0.03] hover:bg-white/[0.06] hover:border-white/[0.12] transition-all duration-300 p-5 cursor-pointer overflow-hidden">
<div className="group relative rounded-2xl border border-black/[0.07] dark:border-white/[0.06] bg-white dark:bg-white/[0.03] hover:bg-stone-50 dark:hover:bg-white/[0.06] hover:border-black/[0.12] dark:hover:border-white/[0.12] transition-all duration-300 p-5 cursor-pointer overflow-hidden shadow-sm dark:shadow-none">
{/* Amber glow on hover */}
<div className="absolute inset-0 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none"
<div
className="absolute inset-0 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none"
style={{ background: "radial-gradient(circle at 50% 0%, rgba(245,158,11,0.06) 0%, transparent 70%)" }}
/>
<div className="flex items-start justify-between gap-4">
<div className="flex-1 min-w-0">
<h3 className="text-lg font-bold text-[#f5f5f5] group-hover:text-[#f59e0b] transition-colors truncate">
<h3 className="text-lg font-bold text-[#111] dark:text-[#f5f5f5] group-hover:text-[#f59e0b] transition-colors truncate">
{restaurant.name}
</h3>
<p className="text-sm text-white/40 mt-0.5">
<p className="text-sm text-black/40 dark:text-white/40 mt-0.5">
{restaurant.city}, {restaurant.country}
</p>
</div>
@@ -51,9 +52,9 @@ export default function RestaurantCard({ restaurant, latestVisit, index }: Props
<span className="text-[#f59e0b] font-black text-lg leading-none">
{latestVisit.rating}
</span>
<span className="text-white/30 text-xs">/10</span>
<span className="text-black/25 dark:text-white/30 text-xs">/10</span>
</div>
<span className="text-white/30 text-xs font-medium tracking-wide">
<span className="text-black/30 dark:text-white/30 text-xs font-medium tracking-wide">
{priceLabel(restaurant.price_range)}
</span>
</div>
@@ -61,7 +62,7 @@ export default function RestaurantCard({ restaurant, latestVisit, index }: Props
<div className="mt-4">
{latestVisit.dishes[0] && (
<p className="text-sm text-white/60 italic truncate">
<p className="text-sm text-black/50 dark:text-white/60 italic truncate">
&ldquo;{latestVisit.dishes[0]}&rdquo;
</p>
)}
@@ -72,20 +73,20 @@ export default function RestaurantCard({ restaurant, latestVisit, index }: Props
{restaurant.cuisine.slice(0, 3).map((tag) => (
<span
key={tag}
className="text-[10px] font-semibold uppercase tracking-wider text-[#f59e0b]/70 bg-[#f59e0b]/10 rounded-full px-2.5 py-0.5"
className="text-[10px] font-semibold uppercase tracking-wider text-[#f59e0b] bg-[#f59e0b]/10 rounded-full px-2.5 py-0.5"
>
{tag}
</span>
))}
</div>
<span className="text-xs text-white/25 shrink-0">
<span className="text-xs text-black/25 dark:text-white/25 shrink-0">
{formatDate(latestVisit.date)}
</span>
</div>
{restaurant.visits.length > 1 && (
<div className="mt-3 pt-3 border-t border-white/[0.05]">
<p className="text-xs text-white/30">
<div className="mt-3 pt-3 border-t border-black/[0.05] dark:border-white/[0.05]">
<p className="text-xs text-black/30 dark:text-white/30">
{restaurant.visits.length} visits
</p>
</div>