feat: add backend coffeeabo
This commit is contained in:
DeathKaioken
parent
6a96b27d2e
commit
bd737e48b8
88
src/app/coffee-abonnements/hooks/getActiveCoffees.ts
Normal file
88
src/app/coffee-abonnements/hooks/getActiveCoffees.ts
Normal file
@ -0,0 +1,88 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { authFetch } from '../../utils/authFetch';
|
||||
|
||||
export type ActiveCoffee = {
|
||||
id: string | number;
|
||||
title: string;
|
||||
description: string;
|
||||
price: string | number; // price can be a string or number
|
||||
pictureUrl?: string;
|
||||
state: number; // 1 for active, 0 for inactive
|
||||
};
|
||||
|
||||
export type CoffeeItem = {
|
||||
id: string;
|
||||
name: string;
|
||||
description: string;
|
||||
pricePer10: number; // price for 10 pieces
|
||||
image: string;
|
||||
};
|
||||
|
||||
export function useActiveCoffees() {
|
||||
const [coffees, setCoffees] = useState<CoffeeItem[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const base = (process.env.NEXT_PUBLIC_API_BASE_URL || '').replace(/\/+$/, '');
|
||||
const url = `${base}/api/admin/coffee/active`;
|
||||
|
||||
console.log('[useActiveCoffees] Fetching active coffees from:', url);
|
||||
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
|
||||
authFetch(url, {
|
||||
method: 'GET',
|
||||
headers: { Accept: 'application/json' },
|
||||
credentials: 'include',
|
||||
})
|
||||
.then(async (response) => {
|
||||
const contentType = response.headers.get('content-type') || '';
|
||||
console.log('[useActiveCoffees] Response status:', response.status);
|
||||
console.log('[useActiveCoffees] Response content-type:', contentType);
|
||||
|
||||
if (!response.ok || !contentType.includes('application/json')) {
|
||||
const text = await response.text().catch(() => '');
|
||||
console.warn('[useActiveCoffees] Non-JSON response or error body:', text.slice(0, 200));
|
||||
throw new Error(`Request failed: ${response.status} ${text.slice(0, 160)}`);
|
||||
}
|
||||
|
||||
const json = await response.json();
|
||||
console.log('[useActiveCoffees] Raw JSON response:', json);
|
||||
|
||||
const data: ActiveCoffee[] =
|
||||
Array.isArray(json?.data) ? json.data :
|
||||
Array.isArray(json) ? json :
|
||||
[]
|
||||
console.log('[useActiveCoffees] Parsed coffee data:', data);
|
||||
|
||||
const mapped: CoffeeItem[] = data
|
||||
.filter((coffee) => (coffee as any).state === 1 || (coffee as any).state === true || (coffee as any).state === '1')
|
||||
.map((coffee) => {
|
||||
const price = typeof coffee.price === 'string' ? parseFloat(coffee.price) : coffee.price
|
||||
return {
|
||||
id: String(coffee.id),
|
||||
name: coffee.title || `Coffee ${coffee.id}`,
|
||||
description: coffee.description || '',
|
||||
pricePer10: !isNaN(price as number) ? (price as number) * 10 : 0,
|
||||
image: coffee.pictureUrl || '',
|
||||
}
|
||||
})
|
||||
|
||||
console.log('[useActiveCoffees] Mapped coffee items:', mapped)
|
||||
setCoffees(mapped)
|
||||
})
|
||||
.catch((error: any) => {
|
||||
console.error('[useActiveCoffees] Error fetching coffees:', error);
|
||||
setError(error?.message || 'Failed to load active coffees');
|
||||
setCoffees([]);
|
||||
})
|
||||
.finally(() => {
|
||||
setLoading(false);
|
||||
console.log('[useActiveCoffees] Fetch complete. Loading state:', false);
|
||||
});
|
||||
}, []);
|
||||
|
||||
return { coffees, loading, error };
|
||||
}
|
||||
@ -2,45 +2,24 @@
|
||||
import React, { useState, useMemo } from 'react';
|
||||
import PageLayout from '../components/PageLayout';
|
||||
import { useRouter } from 'next/navigation';
|
||||
|
||||
interface Coffee {
|
||||
id: string;
|
||||
name: string;
|
||||
description: string;
|
||||
pricePer10: number; // price for 10 units
|
||||
image: string; // added
|
||||
}
|
||||
|
||||
const coffees: Coffee[] = [
|
||||
{ id: 'espresso', name: 'Espresso Roast', description: 'Kräftig und intensiv – dunkle Schokolade, geröstete Gewürze und ein langer, satt-cremiger Nachhall. Ideal für morgens oder den energiereichen Nachmittagsschub.', pricePer10: 12, image: 'https://images.unsplash.com/photo-1509042239860-f550ce710b93?auto=format&fit=crop&w=400&q=60' },
|
||||
{ id: 'crema', name: 'Caffè Crema', description: 'Ausgewogen & mild – samtiger Körper mit hellen Honig- und Mandelnoten. Ein sanfter, alltagstauglicher Kaffee für jede Uhrzeit und jeden Geschmack.', pricePer10: 11, image: 'https://images.unsplash.com/photo-1524079429932-1e9f39f1f268?auto=format&fit=crop&w=400&q=60' },
|
||||
{ id: 'colombia', name: 'Colombia Single Origin', description: 'Fruchtige Noten – rote Beeren, leichte Zitrus-Säure und ein sauberer, heller Abgang. Gewaschen auf Höhenlagen, perfekt für Filter und French Press.', pricePer10: 13, image: 'https://images.unsplash.com/photo-1511920170033-f8396924c348?auto=format&fit=crop&w=400&q=60' },
|
||||
{ id: 'ethiopia', name: 'Ethiopia Sidamo', description: 'Florale Eleganz – Jasmin, Bergamotte und eine feine Tee-ähnliche Struktur. Komplex und duftend, ideal für Genießer, die Nuancen entdecken möchten.', pricePer10: 14, image: 'https://images.unsplash.com/photo-1510626176961-4b57d4b273c4?auto=format&fit=crop&w=400&q=60' },
|
||||
{ id: 'sumatra', name: 'Sumatra Mandheling', description: 'Würzig & erdig – tiefer Körper, Kakao, Kräuter und dezente Tabaknoten. Vollmundig und schwer, hervorragend für Espresso-Mischungen.', pricePer10: 13, image: 'https://images.unsplash.com/photo-1495474472287-4d71bcdd2085?auto=format&fit=crop&w=400&q=60' },
|
||||
{ id: 'kenya', name: 'Kenya AA', description: 'Lebendige Säure – schwarze Johannisbeere, saftige Traube und spritzige Frische. Klar konturiert und kraftvoll, toll als Pour Over.', pricePer10: 15, image: 'https://images.unsplash.com/photo-1495474472287-4d71bcdd2085?auto=format&fit=crop&w=400&q=60' },
|
||||
{ id: 'brazil', name: 'Brazil Santos', description: 'Nussig & schokoladig – weiche Textur, geröstete Haselnuss und Milchschokolade. Sehr balanciert und vielseitig für Espresso & Milchgetränke.', pricePer10: 11, image: 'https://images.unsplash.com/photo-1509042239860-f550ce710b93?auto=format&fit=crop&w=400&q=60' },
|
||||
{ id: 'italian', name: 'Italian Roast', description: 'Dunkel & ölig – karamellisierte Bitterstoffe, Rauch und intensive Tiefe. Klassisches Profil für kräftigen Cappuccino oder Latte.', pricePer10: 12, image: 'https://images.unsplash.com/photo-1512568400610-62da28bc8a13?auto=format&fit=crop&w=400&q=60' },
|
||||
{ id: 'house', name: 'House Blend', description: 'Harmonisch & rund – milde Süße, ausgewogene Säure und sanfter Körper. Entwickelt als universeller Alltagskaffee für jeden Zubereitungsstil.', pricePer10: 10, image: 'https://images.unsplash.com/photo-1461988091159-110d53f20702?auto=format&fit=crop&w=400&q=60' },
|
||||
{ id: 'decaf', name: 'Decaf Blend', description: 'Voller Geschmack – ohne Koffein. Kakao, leichte Karamell-Noten und sanfter Abgang. Entkoffeiniert im schonenden CO₂-Verfahren.', pricePer10: 12, image: 'https://images.unsplash.com/photo-1497935586351-b67a49e012bf?auto=format&fit=crop&w=400&q=60' },
|
||||
{ id: 'guatemala', name: 'Guatemala Huehuetenango', description: 'Karamell & Kakao – balanciert mit einer feinen Pflaumenfrucht. Angenehme Süße und klare Struktur – großartig als Filter und Chemex.', pricePer10: 14, image: 'https://images.unsplash.com/photo-1509978778153-491c9a09a1ab?auto=format&fit=crop&w=400&q=60' },
|
||||
{ id: 'limited', name: 'Limited Reserve', description: 'Exklusiv & komplex – limitierte Mikrolots mit seltenen floralen und tropischen Noten. Für besondere Momente und anspruchsvolle Tassenprofile.', pricePer10: 18, image: 'https://images.unsplash.com/photo-1541167767034-41d7a96c58f1?auto=format&fit=crop&w=400&q=60' }
|
||||
];
|
||||
import { useActiveCoffees } from './hooks/getActiveCoffees';
|
||||
|
||||
export default function CoffeeAbonnementPage() {
|
||||
const [selections, setSelections] = useState<Record<string, number>>({});
|
||||
const [bump, setBump] = useState<Record<string, boolean>>({});
|
||||
// removed: form state and handlers (moved to summary page)
|
||||
// removed: canSubmit depending on form
|
||||
const router = useRouter();
|
||||
|
||||
const router = useRouter(); // added
|
||||
// Fetch active coffees from the backend
|
||||
const { coffees, loading, error } = useActiveCoffees();
|
||||
|
||||
const selectedEntries = useMemo(
|
||||
() =>
|
||||
Object.entries(selections).map(([id, qty]) => ({
|
||||
coffee: coffees.find(c => c.id === id)!,
|
||||
quantity: qty
|
||||
})),
|
||||
[selections]
|
||||
Object.entries(selections).map(([id, qty]) => {
|
||||
const coffee = coffees.find((c) => c.id === id);
|
||||
if (!coffee) return null;
|
||||
return { coffee, quantity: qty };
|
||||
}).filter(Boolean) as { coffee: ReturnType<typeof useActiveCoffees>['coffees'][number]; quantity: number }[],
|
||||
[selections, coffees]
|
||||
);
|
||||
|
||||
const totalPrice = useMemo(
|
||||
@ -51,11 +30,11 @@ export default function CoffeeAbonnementPage() {
|
||||
),
|
||||
[selectedEntries]
|
||||
);
|
||||
const TAX_RATE = 0.07; // 7% Steuer
|
||||
const TAX_RATE = 0.07;
|
||||
const taxAmount = useMemo(() => totalPrice * TAX_RATE, [totalPrice]);
|
||||
const totalWithTax = useMemo(() => totalPrice + taxAmount, [totalPrice, taxAmount]);
|
||||
|
||||
const canProceed = selectedEntries.length > 0; // added
|
||||
const canProceed = selectedEntries.length > 0;
|
||||
|
||||
const proceedToSummary = () => {
|
||||
if (!canProceed) return;
|
||||
@ -66,25 +45,25 @@ export default function CoffeeAbonnementPage() {
|
||||
};
|
||||
|
||||
const toggleCoffee = (id: string) => {
|
||||
setSelections(prev => {
|
||||
setSelections((prev) => {
|
||||
const copy = { ...prev };
|
||||
if (id in copy) {
|
||||
delete copy[id];
|
||||
} else {
|
||||
copy[id] = 10; // default start quantity
|
||||
copy[id] = 10;
|
||||
}
|
||||
return copy;
|
||||
});
|
||||
};
|
||||
|
||||
const changeQuantity = (id: string, delta: number) => {
|
||||
setSelections(prev => {
|
||||
setSelections((prev) => {
|
||||
if (!(id in prev)) return prev;
|
||||
const next = prev[id] + delta;
|
||||
if (next < 10 || next > 120) return prev;
|
||||
const updated = { ...prev, [id]: next };
|
||||
setBump(b => ({ ...b, [id]: true })); // trigger bump animation
|
||||
setTimeout(() => setBump(b => ({ ...b, [id]: false })), 250);
|
||||
setBump((b) => ({ ...b, [id]: true }));
|
||||
setTimeout(() => setBump((b) => ({ ...b, [id]: false })), 250);
|
||||
return updated;
|
||||
});
|
||||
};
|
||||
@ -93,9 +72,7 @@ export default function CoffeeAbonnementPage() {
|
||||
<PageLayout>
|
||||
<div className="mx-auto max-w-7xl px-4 py-10 space-y-10 bg-gradient-to-b from-white to-[#1C2B4A0D]">
|
||||
<h1 className="text-3xl font-bold tracking-tight">
|
||||
<span className="text-[#1C2B4A]">
|
||||
Kaffee Abonnement konfigurieren
|
||||
</span>
|
||||
<span className="text-[#1C2B4A]">Kaffee Abonnement konfigurieren</span>
|
||||
</h1>
|
||||
|
||||
{/* Stepper */}
|
||||
@ -114,8 +91,22 @@ export default function CoffeeAbonnementPage() {
|
||||
{/* Section 1: Multi coffee selection + per-coffee quantity */}
|
||||
<section>
|
||||
<h2 className="text-xl font-semibold mb-4">1. Kaffeesorten & Mengen wählen</h2>
|
||||
|
||||
{error && (
|
||||
<div className="mb-4 rounded-md border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{loading ? (
|
||||
<div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{coffees.map(coffee => {
|
||||
<div className="h-44 rounded-xl bg-gray-100 animate-pulse" />
|
||||
<div className="h-44 rounded-xl bg-gray-100 animate-pulse" />
|
||||
<div className="h-44 rounded-xl bg-gray-100 animate-pulse" />
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{coffees.map((coffee) => {
|
||||
const active = coffee.id in selections;
|
||||
const qty = selections[coffee.id] || 0;
|
||||
return (
|
||||
@ -126,13 +117,17 @@ export default function CoffeeAbonnementPage() {
|
||||
}`}
|
||||
>
|
||||
<div className="relative overflow-hidden rounded-md mb-3">
|
||||
{coffee.image ? (
|
||||
<img
|
||||
src={coffee.image}
|
||||
alt={coffee.name}
|
||||
className="h-36 w-full object-cover transition-transform duration-300 group-hover:scale-105"
|
||||
loading="lazy"
|
||||
/>
|
||||
{/* price badge */}
|
||||
) : (
|
||||
<div className="h-36 w-full bg-gray-100 rounded-md" />
|
||||
)}
|
||||
{/* price badge (per 10) */}
|
||||
<div className="absolute top-2 right-2 flex flex-col items-end gap-1">
|
||||
<span
|
||||
aria-label={`Preis €${coffee.pricePer10} pro 10 Stück`}
|
||||
@ -142,7 +137,6 @@ export default function CoffeeAbonnementPage() {
|
||||
>
|
||||
€{coffee.pricePer10}
|
||||
</span>
|
||||
{/* CHANGED: solid, readable over images */}
|
||||
<span className="text-[10px] font-medium px-2 py-0.5 rounded-full bg-[#1C2B4A]/90 text-white border border-white/20 shadow-sm backdrop-blur-sm">
|
||||
pro 10 Stk
|
||||
</span>
|
||||
@ -189,11 +183,8 @@ export default function CoffeeAbonnementPage() {
|
||||
max={120}
|
||||
step={10}
|
||||
value={qty}
|
||||
onChange={e =>
|
||||
changeQuantity(
|
||||
coffee.id,
|
||||
parseInt(e.target.value, 10) - qty
|
||||
)
|
||||
onChange={(e) =>
|
||||
changeQuantity(coffee.id, parseInt(e.target.value, 10) - qty)
|
||||
}
|
||||
className="w-full appearance-none cursor-pointer bg-transparent"
|
||||
style={{
|
||||
@ -204,7 +195,7 @@ export default function CoffeeAbonnementPage() {
|
||||
((qty - 10) / (120 - 10)) * 100 +
|
||||
'%,#e5e7eb 100%)',
|
||||
height: '6px',
|
||||
borderRadius: '999px'
|
||||
borderRadius: '999px',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
@ -227,6 +218,7 @@ export default function CoffeeAbonnementPage() {
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
|
||||
{/* Section 2: Compact preview + next steps */}
|
||||
@ -236,12 +228,15 @@ export default function CoffeeAbonnementPage() {
|
||||
{selectedEntries.length === 0 && (
|
||||
<p className="text-sm text-gray-600">Noch keine Kaffees ausgewählt.</p>
|
||||
)}
|
||||
{selectedEntries.map(entry => (
|
||||
{selectedEntries.map((entry) => (
|
||||
<div key={entry.coffee.id} className="flex justify-between text-sm border-b last:border-b-0 pb-2 last:pb-0">
|
||||
<div className="flex flex-col">
|
||||
<span className="font-medium">{entry.coffee.name}</span>
|
||||
<span className="text-xs text-gray-500">
|
||||
{entry.quantity} Stk • <span className="inline-flex items-center font-semibold text-[#1C2B4A]">€{entry.coffee.pricePer10}/10</span>
|
||||
{entry.quantity} Stk •{' '}
|
||||
<span className="inline-flex items-center font-semibold text-[#1C2B4A]">
|
||||
€{entry.coffee.pricePer10}/10
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div className="text-right font-semibold">
|
||||
@ -251,7 +246,9 @@ export default function CoffeeAbonnementPage() {
|
||||
))}
|
||||
<div className="flex justify-between pt-2 border-t">
|
||||
<span className="text-sm font-semibold">Gesamt (Netto)</span>
|
||||
<span className="text-lg font-extrabold tracking-tight text-[#1C2B4A]">€{totalPrice.toFixed(2)}</span>
|
||||
<span className="text-lg font-extrabold tracking-tight text-[#1C2B4A]">
|
||||
€{totalPrice.toFixed(2)}
|
||||
</span>
|
||||
</div>
|
||||
<button
|
||||
onClick={proceedToSummary}
|
||||
@ -263,11 +260,24 @@ export default function CoffeeAbonnementPage() {
|
||||
}`}
|
||||
>
|
||||
Nächste Schritte
|
||||
<svg className={`ml-2 h-5 w-5 transition-transform ${canProceed ? 'group-hover:translate-x-0.5' : ''}`} viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
|
||||
<path fillRule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l5.999 6a1 1 0 010 1.414l-6 6a1 1 0 11-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clipRule="evenodd" />
|
||||
<svg
|
||||
className={`ml-2 h-5 w-5 transition-transform ${
|
||||
canProceed ? 'group-hover:translate-x-0.5' : ''
|
||||
}`}
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M10.293 3.293a1 1 0 011.414 0l5.999 6a1 1 0 010 1.414l-6 6a1 1 0 11-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
{!canProceed && <p className="text-xs text-gray-500">Bitte mindestens eine Kaffeesorte wählen.</p>}
|
||||
{!canProceed && (
|
||||
<p className="text-xs text-gray-500">Bitte mindestens eine Kaffeesorte wählen.</p>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
@ -2,33 +2,11 @@
|
||||
import React, { useEffect, useMemo, useState } from 'react';
|
||||
import PageLayout from '../../components/PageLayout';
|
||||
import { useRouter } from 'next/navigation';
|
||||
|
||||
interface Coffee {
|
||||
id: string;
|
||||
name: string;
|
||||
description: string;
|
||||
pricePer10: number;
|
||||
image: string;
|
||||
}
|
||||
|
||||
// duplicated from selection page to resolve details by id
|
||||
const coffees: Coffee[] = [
|
||||
{ id: 'espresso', name: 'Espresso Roast', description: '', pricePer10: 12, image: '' },
|
||||
{ id: 'crema', name: 'Caffè Crema', description: '', pricePer10: 11, image: '' },
|
||||
{ id: 'colombia', name: 'Colombia Single Origin', description: '', pricePer10: 13, image: '' },
|
||||
{ id: 'ethiopia', name: 'Ethiopia Sidamo', description: '', pricePer10: 14, image: '' },
|
||||
{ id: 'sumatra', name: 'Sumatra Mandheling', description: '', pricePer10: 13, image: '' },
|
||||
{ id: 'kenya', name: 'Kenya AA', description: '', pricePer10: 15, image: '' },
|
||||
{ id: 'brazil', name: 'Brazil Santos', description: '', pricePer10: 11, image: '' },
|
||||
{ id: 'italian', name: 'Italian Roast', description: '', pricePer10: 12, image: '' },
|
||||
{ id: 'house', name: 'House Blend', description: '', pricePer10: 10, image: '' },
|
||||
{ id: 'decaf', name: 'Decaf Blend', description: '', pricePer10: 12, image: '' },
|
||||
{ id: 'guatemala', name: 'Guatemala Huehuetenango', description: '', pricePer10: 14, image: '' },
|
||||
{ id: 'limited', name: 'Limited Reserve', description: '', pricePer10: 18, image: '' }
|
||||
];
|
||||
import { useActiveCoffees } from '../hooks/getActiveCoffees';
|
||||
|
||||
export default function SummaryPage() {
|
||||
const router = useRouter();
|
||||
const { coffees, loading, error } = useActiveCoffees();
|
||||
const [selections, setSelections] = useState<Record<string, number>>({});
|
||||
const [form, setForm] = useState({
|
||||
firstName: '',
|
||||
@ -63,11 +41,13 @@ export default function SummaryPage() {
|
||||
|
||||
const selectedEntries = useMemo(
|
||||
() =>
|
||||
Object.entries(selections).map(([id, qty]) => {
|
||||
Object.entries(selections)
|
||||
.map(([id, qty]) => {
|
||||
const coffee = coffees.find(c => c.id === id);
|
||||
return coffee ? { coffee, quantity: qty } : null;
|
||||
}).filter(Boolean) as { coffee: Coffee; quantity: number }[],
|
||||
[selections]
|
||||
})
|
||||
.filter(Boolean) as { coffee: ReturnType<typeof useActiveCoffees>['coffees'][number]; quantity: number }[],
|
||||
[selections, coffees]
|
||||
);
|
||||
|
||||
const TAX_RATE = 0.07;
|
||||
@ -124,7 +104,23 @@ export default function SummaryPage() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{selectedEntries.length === 0 ? (
|
||||
{error && (
|
||||
<div className="rounded-xl border p-6 bg-white shadow-sm">
|
||||
<p className="text-sm text-red-700 mb-4">{error}</p>
|
||||
<button
|
||||
onClick={backToSelection}
|
||||
className="rounded-md bg-[#1C2B4A] text-white px-4 py-2 font-semibold hover:bg-[#1C2B4A]/90"
|
||||
>
|
||||
Zur Auswahl
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{loading ? (
|
||||
<div className="rounded-xl border p-6 bg-white shadow-sm">
|
||||
<div className="h-20 rounded-md bg-gray-100 animate-pulse" />
|
||||
</div>
|
||||
) : selectedEntries.length === 0 ? (
|
||||
<div className="rounded-xl border p-6 bg-white shadow-sm">
|
||||
<p className="text-sm text-gray-600 mb-4">Keine Auswahl gefunden.</p>
|
||||
<button
|
||||
|
||||
Loading…
Reference in New Issue
Block a user