feat: complete bottle-to-session integration flow
This commit is contained in:
@@ -2,7 +2,7 @@ import { createServerComponentClient } from '@supabase/auth-helpers-nextjs';
|
||||
import { cookies } from 'next/headers';
|
||||
import { notFound } from 'next/navigation';
|
||||
import Link from 'next/link';
|
||||
import { ChevronLeft, Calendar, Award, Droplets, MapPin, Tag, ExternalLink, Package } from 'lucide-react';
|
||||
import { ChevronLeft, Calendar, Award, Droplets, MapPin, Tag, ExternalLink, Package, PlusCircle } from 'lucide-react';
|
||||
import { getStorageUrl } from '@/lib/supabase';
|
||||
import TastingNoteForm from '@/components/TastingNoteForm';
|
||||
import StatusSwitcher from '@/components/StatusSwitcher';
|
||||
@@ -48,13 +48,25 @@ export default async function BottlePage({
|
||||
<div className="max-w-4xl mx-auto space-y-6 md:space-y-12">
|
||||
{/* Back Button */}
|
||||
<Link
|
||||
href="/"
|
||||
href={`/${sessionId ? `?session_id=${sessionId}` : ''}`}
|
||||
className="inline-flex items-center gap-2 text-zinc-500 hover:text-amber-600 transition-colors font-medium mb-4"
|
||||
>
|
||||
<ChevronLeft size={20} />
|
||||
Zurück zur Sammlung
|
||||
</Link>
|
||||
|
||||
{sessionId && (
|
||||
<div className="bg-amber-600/10 border border-amber-600/20 p-4 rounded-2xl flex items-center gap-4 text-amber-700 dark:text-amber-400 animate-in slide-in-from-top-4 duration-500">
|
||||
<div className="bg-amber-600 text-white p-2 rounded-xl">
|
||||
<PlusCircle size={20} />
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-bold">Session Aktiv!</p>
|
||||
<p className="text-sm opacity-80">Jede Tasting Note, die du jetzt speicherst, wird automatisch deiner Session zugeordnet. 🥃</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Hero Section */}
|
||||
<section className="grid grid-cols-1 md:grid-cols-2 gap-8 items-start">
|
||||
<div className="aspect-[4/5] rounded-3xl overflow-hidden shadow-2xl border border-zinc-200 dark:border-zinc-800">
|
||||
|
||||
@@ -2,8 +2,9 @@
|
||||
|
||||
import React, { useState, useMemo } from 'react';
|
||||
import Link from 'next/link';
|
||||
import { Search, Filter, X, Calendar, Clock, Package, Lock, Unlock, Ghost, FlaskConical, AlertCircle, Trash2, AlertTriangle } from 'lucide-react';
|
||||
import { Search, Filter, X, Calendar, Clock, Package, Lock, Unlock, Ghost, FlaskConical, AlertCircle, Trash2, AlertTriangle, PlusCircle } from 'lucide-react';
|
||||
import { getStorageUrl } from '@/lib/supabase';
|
||||
import { useSearchParams } from 'next/navigation';
|
||||
|
||||
interface Bottle {
|
||||
id: string;
|
||||
@@ -22,9 +23,10 @@ interface Bottle {
|
||||
|
||||
interface BottleCardProps {
|
||||
bottle: Bottle;
|
||||
sessionId?: string | null;
|
||||
}
|
||||
|
||||
function BottleCard({ bottle }: BottleCardProps) {
|
||||
function BottleCard({ bottle, sessionId }: BottleCardProps) {
|
||||
const statusConfig = {
|
||||
open: { icon: Unlock, color: 'bg-amber-500/80 border-amber-400/50', label: 'Offen' },
|
||||
sampled: { icon: FlaskConical, color: 'bg-purple-500/80 border-purple-400/50', label: 'Sample' },
|
||||
@@ -36,7 +38,10 @@ function BottleCard({ bottle }: BottleCardProps) {
|
||||
const statusStyle = statusConfig[bottle.status as keyof typeof statusConfig] || statusConfig.sealed;
|
||||
|
||||
return (
|
||||
<Link href={`/bottles/${bottle.id}`} className="block h-full group">
|
||||
<Link
|
||||
href={`/bottles/${bottle.id}${sessionId ? `?session_id=${sessionId}` : ''}`}
|
||||
className="block h-full group"
|
||||
>
|
||||
<div className="h-full bg-white dark:bg-zinc-900 rounded-[2rem] overflow-hidden border border-zinc-200 dark:border-zinc-800 shadow-sm transition-all duration-300 hover:shadow-2xl hover:shadow-amber-900/10 hover:-translate-y-1 group-hover:border-amber-500/30">
|
||||
<div className="aspect-[4/3] overflow-hidden bg-zinc-100 dark:bg-zinc-800 relative">
|
||||
<img
|
||||
@@ -46,6 +51,13 @@ function BottleCard({ bottle }: BottleCardProps) {
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/40 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity" />
|
||||
|
||||
{sessionId && (
|
||||
<div className="absolute top-3 left-3 bg-amber-600 text-white text-[9px] font-black px-2 py-1.5 rounded-xl flex items-center gap-1.5 border border-amber-400 shadow-xl animate-in slide-in-from-left-4 duration-500">
|
||||
<PlusCircle size={12} strokeWidth={3} />
|
||||
ZU SESSION HINZUFÜGEN
|
||||
</div>
|
||||
)}
|
||||
|
||||
{bottle.last_tasted && (
|
||||
<div className="absolute top-3 right-3 bg-zinc-900/80 backdrop-blur-md text-white text-[9px] font-black px-2 py-1 rounded-lg flex items-center gap-1 border border-white/10 ring-1 ring-black/5">
|
||||
<Clock size={10} />
|
||||
@@ -101,6 +113,9 @@ interface BottleGridProps {
|
||||
}
|
||||
|
||||
export default function BottleGrid({ bottles }: BottleGridProps) {
|
||||
const searchParams = useSearchParams();
|
||||
const sessionId = searchParams.get('session_id');
|
||||
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
|
||||
const [selectedDistillery, setSelectedDistillery] = useState<string | null>(null);
|
||||
@@ -269,7 +284,7 @@ export default function BottleGrid({ bottles }: BottleGridProps) {
|
||||
{filteredBottles.length > 0 ? (
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 w-full max-w-6xl mx-auto px-4">
|
||||
{filteredBottles.map((bottle) => (
|
||||
<BottleCard key={bottle.id} bottle={bottle} />
|
||||
<BottleCard key={bottle.id} bottle={bottle} sessionId={sessionId} />
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
|
||||
Reference in New Issue
Block a user