robin/Dramlog-Prod
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: Use native img tags for admin pages

Browse Source 
- Replace next/image with native img tags in admin bottles, splits, tastings
- Remove hardcoded Supabase hostname from next.config.mjs
- Native img works with any hostname without config changes on deploy
This commit is contained in:
robin
2026-01-19 11:46:26 +01:00
parent 3c02d33531
commit 948c70c7f2
4 changed files with 11 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
next.config.mjs
View File

@@ -10,15 +10,6 @@ const nextConfig = {
bodySizeLimit: '10mb', bodySizeLimit: '10mb',
}, },
}, },
images: {
remotePatterns: [
{
protocol: 'https',
hostname: 'supaapi.cloud.fluffigewolke.de',
pathname: '/storage/v1/object/public/**',
},
],
},
}; };
// Wrap with Sentry only if DSN is configured // Wrap with Sentry only if DSN is configured

9
src/app/admin/bottles/AdminBottlesList.tsx
View File

@@ -1,8 +1,7 @@
'use client'; 'use client';
import { useState, useMemo } from 'react'; import { useState, useMemo } from 'react';
import { Search, Filter, User, Wine, Calendar, Star, X, ChevronDown } from 'lucide-react'; import { Search, User, Wine, Star, X } from 'lucide-react';
import Image from 'next/image';
interface Bottle { interface Bottle {
id: string; id: string;
@@ -205,12 +204,10 @@ export default function AdminBottlesList({ bottles }: AdminBottlesListProps) {
{/* Image */} {/* Image */}
<div className="aspect-[4/3] relative bg-zinc-800"> <div className="aspect-[4/3] relative bg-zinc-800">
{bottle.image_url ? ( {bottle.image_url ? (
<Image <img
src={bottle.image_url} src={bottle.image_url}
alt={bottle.name || 'Bottle'} alt={bottle.name || 'Bottle'}
fill className="absolute inset-0 w-full h-full object-cover"
className="object-cover"
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
/> />
) : ( ) : (
<div className="absolute inset-0 flex items-center justify-center"> <div className="absolute inset-0 flex items-center justify-center">

17
src/app/admin/splits/AdminSplitsList.tsx
View File

@@ -1,8 +1,7 @@
'use client'; 'use client';
import { useState, useMemo } from 'react'; import { useState, useMemo } from 'react';
import { Search, User, Calendar, Share2, Users, Check, X, ExternalLink } from 'lucide-react'; import { Search, User, Share2, Users, Check, X, ExternalLink } from 'lucide-react';
import Image from 'next/image';
import Link from 'next/link'; import Link from 'next/link';
interface Split { interface Split {
@@ -120,19 +119,17 @@ export default function AdminSplitsList({ splits }: AdminSplitsListProps) {
<div <div
key={split.id} key={split.id}
className={`bg-zinc-900 rounded-2xl border overflow-hidden transition-colors ${split.is_active className={`bg-zinc-900 rounded-2xl border overflow-hidden transition-colors ${split.is_active
? 'border-zinc-800 hover:border-zinc-700' ? 'border-zinc-800 hover:border-zinc-700'
: 'border-zinc-800/50 opacity-60' : 'border-zinc-800/50 opacity-60'
}`} }`}
> >
{/* Image */} {/* Image */}
<div className="aspect-[16/9] relative bg-zinc-800"> <div className="aspect-[16/9] relative bg-zinc-800">
{split.bottle?.image_url ? ( {split.bottle?.image_url ? (
<Image <img
src={split.bottle.image_url} src={split.bottle.image_url}
alt={split.bottle.name || 'Bottle'} alt={split.bottle.name || 'Bottle'}
fill className="absolute inset-0 w-full h-full object-cover"
className="object-cover"
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
/> />
) : ( ) : (
<div className="absolute inset-0 flex items-center justify-center"> <div className="absolute inset-0 flex items-center justify-center">
@@ -142,8 +139,8 @@ export default function AdminSplitsList({ splits }: AdminSplitsListProps) {
{/* Status Badge */} {/* Status Badge */}
<span className={`absolute top-2 left-2 px-2 py-1 text-[10px] font-bold rounded-lg flex items-center gap-1 ${split.is_active <span className={`absolute top-2 left-2 px-2 py-1 text-[10px] font-bold rounded-lg flex items-center gap-1 ${split.is_active
? 'bg-green-600/90 text-white' ? 'bg-green-600/90 text-white'
: 'bg-zinc-700/90 text-zinc-300' : 'bg-zinc-700/90 text-zinc-300'
}`}> }`}>
{split.is_active ? <Check size={10} /> : <X size={10} />} {split.is_active ? <Check size={10} /> : <X size={10} />}
{split.is_active ? 'Active' : 'Closed'} {split.is_active ? 'Active' : 'Closed'}

5
src/app/admin/tastings/AdminTastingsList.tsx
View File

@@ -2,7 +2,6 @@
import { useState, useMemo } from 'react'; import { useState, useMemo } from 'react';
import { Search, User, Star, Wine, MessageSquare } from 'lucide-react'; import { Search, User, Star, Wine, MessageSquare } from 'lucide-react';
import Image from 'next/image';
interface Tasting { interface Tasting {
id: string; id: string;
@@ -139,11 +138,9 @@ export default function AdminTastingsList({ tastings }: AdminTastingsListProps)
{/* Bottle Image */} {/* Bottle Image */}
<div className="w-16 h-16 rounded-xl overflow-hidden bg-zinc-800 flex-shrink-0"> <div className="w-16 h-16 rounded-xl overflow-hidden bg-zinc-800 flex-shrink-0">
{tasting.bottle?.image_url ? ( {tasting.bottle?.image_url ? (
<Image <img
src={tasting.bottle.image_url} src={tasting.bottle.image_url}
alt={tasting.bottle.name || 'Bottle'} alt={tasting.bottle.name || 'Bottle'}
width={64}
height={64}
className="w-full h-full object-cover" className="w-full h-full object-cover"
/> />
) : ( ) : (