init
This commit is contained in:
16
src/app/auth/callback/route.ts
Normal file
16
src/app/auth/callback/route.ts
Normal file
@@ -0,0 +1,16 @@
|
||||
import { createRouteHandlerClient } from '@supabase/auth-helpers-nextjs';
|
||||
import { cookies } from 'next/headers';
|
||||
import { NextResponse } from 'next/server';
|
||||
|
||||
export async function GET(request: Request) {
|
||||
const requestUrl = new URL(request.url);
|
||||
const code = requestUrl.searchParams.get('code');
|
||||
|
||||
if (code) {
|
||||
const supabase = createRouteHandlerClient({ cookies });
|
||||
await supabase.auth.exchangeCodeForSession(code);
|
||||
}
|
||||
|
||||
// URL to redirect to after sign in process completes
|
||||
return NextResponse.redirect(requestUrl.origin);
|
||||
}
|
||||
190
src/app/bottles/[id]/page.tsx
Normal file
190
src/app/bottles/[id]/page.tsx
Normal file
@@ -0,0 +1,190 @@
|
||||
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 TastingNoteForm from '@/components/TastingNoteForm';
|
||||
import StatusSwitcher from '@/components/StatusSwitcher';
|
||||
|
||||
export default async function BottlePage({ params }: { params: { id: string } }) {
|
||||
const supabase = createServerComponentClient({ cookies });
|
||||
|
||||
const { data: bottle } = await supabase
|
||||
.from('bottles')
|
||||
.select('*')
|
||||
.eq('id', params.id)
|
||||
.single();
|
||||
|
||||
if (!bottle) {
|
||||
notFound();
|
||||
}
|
||||
|
||||
const { data: tastings } = await supabase
|
||||
.from('tastings')
|
||||
.select('*')
|
||||
.eq('bottle_id', params.id)
|
||||
.order('created_at', { ascending: false });
|
||||
|
||||
return (
|
||||
<main className="min-h-screen bg-zinc-50 dark:bg-black p-6 md:p-12 lg:p-24">
|
||||
<div className="max-w-4xl mx-auto space-y-12">
|
||||
{/* Back Button */}
|
||||
<Link
|
||||
href="/"
|
||||
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>
|
||||
|
||||
{/* 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">
|
||||
<img
|
||||
src={bottle.image_url}
|
||||
alt={bottle.name}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<h1 className="text-4xl font-black text-zinc-900 dark:text-white tracking-tight leading-tight">
|
||||
{bottle.name}
|
||||
</h1>
|
||||
<p className="text-xl text-amber-600 font-bold mt-1 uppercase tracking-widest">{bottle.distillery}</p>
|
||||
|
||||
{bottle.whiskybase_id && (
|
||||
<div className="mt-4">
|
||||
<a
|
||||
href={`https://www.whiskybase.com/whiskies/whisky/${bottle.whiskybase_id}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center gap-2 px-4 py-2 bg-[#db0000] text-white rounded-xl text-sm font-bold shadow-lg shadow-red-600/20 hover:scale-[1.05] transition-transform"
|
||||
>
|
||||
<ExternalLink size={16} />
|
||||
Whiskybase ID: {bottle.whiskybase_id}
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="p-4 bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-100 dark:border-zinc-800 shadow-sm flex flex-col justify-between">
|
||||
<div>
|
||||
<div className="flex items-center gap-2 text-zinc-400 text-xs font-bold uppercase mb-1">
|
||||
<Tag size={14} /> Kategorie
|
||||
</div>
|
||||
<div className="font-semibold dark:text-zinc-200">{bottle.category || '-'}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-4 bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-100 dark:border-zinc-800 shadow-sm">
|
||||
<div className="flex items-center gap-2 text-zinc-400 text-xs font-bold uppercase mb-1">
|
||||
<Droplets size={14} /> Alkoholgehalt
|
||||
</div>
|
||||
<div className="font-semibold dark:text-zinc-200">{bottle.abv}% Vol.</div>
|
||||
</div>
|
||||
<div className="p-4 bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-100 dark:border-zinc-800 shadow-sm">
|
||||
<div className="flex items-center gap-2 text-zinc-400 text-xs font-bold uppercase mb-1">
|
||||
<Award size={14} /> Alter
|
||||
</div>
|
||||
<div className="font-semibold dark:text-zinc-200">{bottle.age ? `${bottle.age} Jahre` : '-'}</div>
|
||||
</div>
|
||||
<div className="p-4 bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-100 dark:border-zinc-800 shadow-sm">
|
||||
<div className="flex items-center gap-2 text-zinc-400 text-xs font-bold uppercase mb-1">
|
||||
<Calendar size={14} /> Zuletzt verkostet
|
||||
</div>
|
||||
<div className="font-semibold dark:text-zinc-200">
|
||||
{tastings && tastings.length > 0
|
||||
? new Date(tastings[0].created_at).toLocaleDateString('de-DE')
|
||||
: 'Noch nie'}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="pt-2">
|
||||
<StatusSwitcher bottleId={bottle.id} currentStatus={bottle.status} />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr className="border-zinc-200 dark:border-zinc-800" />
|
||||
|
||||
{/* Tasting Notes Section */}
|
||||
<section className="space-y-8">
|
||||
<div className="flex flex-col md:flex-row justify-between items-start md:items-end gap-4">
|
||||
<div>
|
||||
<h2 className="text-3xl font-black text-zinc-900 dark:text-white tracking-tight">Tasting Notes</h2>
|
||||
<p className="text-zinc-500 mt-1">Hier findest du deine bisherigen Eindrücke.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8 items-start">
|
||||
{/* Form */}
|
||||
<div className="lg:col-span-1 border border-zinc-200 dark:border-zinc-800 rounded-3xl p-6 bg-white dark:bg-zinc-900/50 sticky top-24">
|
||||
<h3 className="text-lg font-bold mb-6 flex items-center gap-2 text-amber-600">
|
||||
<Droplets size={20} /> Neu Verkosten
|
||||
</h3>
|
||||
<TastingNoteForm bottleId={bottle.id} />
|
||||
</div>
|
||||
|
||||
{/* List */}
|
||||
<div className="lg:col-span-2 space-y-6">
|
||||
{!tastings || tastings.length === 0 ? (
|
||||
<div className="text-center py-12 bg-zinc-100 dark:bg-zinc-900/30 rounded-3xl border-2 border-dashed border-zinc-200 dark:border-zinc-800">
|
||||
<p className="text-zinc-400 italic">Noch keine Tasting Notes vorhanden. Zeit für ein Glas? 🥃</p>
|
||||
</div>
|
||||
) : (
|
||||
tastings.map((note) => (
|
||||
<div key={note.id} className="bg-white dark:bg-zinc-900 p-6 rounded-3xl border border-zinc-200 dark:border-zinc-800 shadow-sm space-y-4 hover:border-amber-500/30 transition-colors">
|
||||
<div className="flex justify-between items-center">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-400 px-3 py-1 rounded-full text-sm font-black ring-1 ring-amber-500/20">
|
||||
{note.rating}/100
|
||||
</div>
|
||||
<span className={`text-[10px] font-black px-2 py-0.5 rounded uppercase tracking-tighter ${note.is_sample
|
||||
? 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400'
|
||||
: 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400'
|
||||
}`}>
|
||||
{note.is_sample ? 'Sample' : 'Bottle'}
|
||||
</span>
|
||||
<div className="text-xs text-zinc-500 font-bold bg-zinc-100 dark:bg-zinc-800 px-2 py-1 rounded">
|
||||
{new Date(note.created_at).toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' })}
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-xs text-zinc-400 font-black tracking-widest uppercase flex items-center gap-1">
|
||||
<Calendar size={12} />
|
||||
{new Date(note.created_at).toLocaleDateString('de-DE')}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
{note.nose_notes && (
|
||||
<div>
|
||||
<div className="text-xs font-bold text-zinc-400 uppercase tracking-tighter mb-1">Nose</div>
|
||||
<p className="text-sm text-zinc-700 dark:text-zinc-300 leading-relaxed italic">"{note.nose_notes}"</p>
|
||||
</div>
|
||||
)}
|
||||
{note.palate_notes && (
|
||||
<div>
|
||||
<div className="text-xs font-bold text-zinc-400 uppercase tracking-tighter mb-1">Palate</div>
|
||||
<p className="text-sm text-zinc-700 dark:text-zinc-300 leading-relaxed italic">"{note.palate_notes}"</p>
|
||||
</div>
|
||||
)}
|
||||
{note.finish_notes && (
|
||||
<div>
|
||||
<div className="text-xs font-bold text-zinc-400 uppercase tracking-tighter mb-1">Finish</div>
|
||||
<p className="text-sm text-zinc-700 dark:text-zinc-300 leading-relaxed italic">"{note.finish_notes}"</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
27
src/app/globals.css
Normal file
27
src/app/globals.css
Normal file
@@ -0,0 +1,27 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
:root {
|
||||
--foreground-rgb: 0, 0, 0;
|
||||
--background-start-rgb: 214, 219, 220;
|
||||
--background-end-rgb: 255, 255, 255;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--foreground-rgb: 255, 255, 255;
|
||||
--background-start-rgb: 0, 0, 0;
|
||||
--background-end-rgb: 0, 0, 0;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
color: rgb(var(--foreground-rgb));
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
transparent,
|
||||
rgb(var(--background-end-rgb))
|
||||
)
|
||||
rgb(var(--background-start-rgb));
|
||||
}
|
||||
23
src/app/layout.tsx
Normal file
23
src/app/layout.tsx
Normal file
@@ -0,0 +1,23 @@
|
||||
import type { Metadata } from "next";
|
||||
import { Inter } from "next/font/google";
|
||||
import "./globals.css";
|
||||
|
||||
const inter = Inter({ subsets: ["latin"] });
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Whisky Vault",
|
||||
description: "Your digital whisky collection",
|
||||
manifest: "/manifest.json",
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: Readonly<{
|
||||
children: React.ReactNode;
|
||||
}>) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<body className={inter.className}>{children}</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
135
src/app/page.tsx
Normal file
135
src/app/page.tsx
Normal file
@@ -0,0 +1,135 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import { createClientComponentClient } from '@supabase/auth-helpers-nextjs';
|
||||
import CameraCapture from "@/components/CameraCapture";
|
||||
import BottleGrid from "@/components/BottleGrid";
|
||||
import AuthForm from "@/components/AuthForm";
|
||||
|
||||
export default function Home() {
|
||||
const supabase = createClientComponentClient();
|
||||
const [bottles, setBottles] = useState<any[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [user, setUser] = useState<any>(null); // Added user state
|
||||
|
||||
useEffect(() => {
|
||||
// Check session
|
||||
const checkUser = async () => {
|
||||
const { data: { session } } = await supabase.auth.getSession();
|
||||
setUser(session?.user ?? null);
|
||||
if (session?.user) {
|
||||
fetchCollection();
|
||||
} else {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
checkUser();
|
||||
|
||||
// Listen for auth changes
|
||||
const { data: { subscription } } = supabase.auth.onAuthStateChange((_event, session) => {
|
||||
setUser(session?.user ?? null);
|
||||
if (session?.user) {
|
||||
fetchCollection();
|
||||
} else {
|
||||
setBottles([]);
|
||||
}
|
||||
});
|
||||
|
||||
return () => subscription.unsubscribe();
|
||||
}, []);
|
||||
|
||||
const fetchCollection = async () => {
|
||||
setIsLoading(true);
|
||||
try {
|
||||
// Fetch bottles with their latest tasting date
|
||||
const { data, error } = await supabase
|
||||
.from('bottles')
|
||||
.select(`
|
||||
*,
|
||||
tastings (
|
||||
created_at
|
||||
)
|
||||
`)
|
||||
.order('created_at', { ascending: false });
|
||||
|
||||
if (error) throw error;
|
||||
|
||||
// Process data to get the absolute latest tasting date for each bottle
|
||||
const processedBottles = (data || []).map(bottle => {
|
||||
const lastTasted = bottle.tastings && bottle.tastings.length > 0
|
||||
? bottle.tastings.reduce((latest: string, current: any) =>
|
||||
new Date(current.created_at) > new Date(latest) ? current.created_at : latest,
|
||||
bottle.tastings[0].created_at
|
||||
)
|
||||
: null;
|
||||
|
||||
return {
|
||||
...bottle,
|
||||
last_tasted: lastTasted
|
||||
};
|
||||
});
|
||||
|
||||
setBottles(processedBottles);
|
||||
} catch (err) {
|
||||
console.error('Error fetching collection:', err);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleLogout = async () => {
|
||||
await supabase.auth.signOut();
|
||||
};
|
||||
|
||||
if (!user) {
|
||||
return (
|
||||
<main className="flex min-h-screen flex-col items-center justify-center p-6 bg-zinc-50 dark:bg-black">
|
||||
<div className="mb-12 text-center">
|
||||
<h1 className="text-5xl font-black text-zinc-900 dark:text-white tracking-tighter mb-4">
|
||||
WHISKY<span className="text-amber-600">VAULT</span>
|
||||
</h1>
|
||||
<p className="text-zinc-500 max-w-sm mx-auto">Scanne deine Flaschen, tracke deine Tastings und verwalte deinen Keller.</p>
|
||||
</div>
|
||||
<AuthForm />
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<main className="flex min-h-screen flex-col items-center gap-12 p-6 md:p-24 bg-zinc-50 dark:bg-black">
|
||||
<div className="z-10 max-w-5xl w-full flex flex-col items-center gap-8">
|
||||
<header className="w-full flex justify-between items-center">
|
||||
<h1 className="text-4xl font-black text-zinc-900 dark:text-white tracking-tighter">
|
||||
WHISKY<span className="text-amber-600">VAULT</span>
|
||||
</h1>
|
||||
<button
|
||||
onClick={handleLogout}
|
||||
className="text-sm font-medium text-zinc-500 hover:text-zinc-800 dark:hover:text-zinc-300 transition-colors"
|
||||
>
|
||||
Abmelden
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<CameraCapture onSaveComplete={fetchCollection} />
|
||||
|
||||
<div className="w-full mt-12">
|
||||
<h2 className="text-2xl font-bold mb-6 text-zinc-800 dark:text-zinc-100 flex items-center gap-3">
|
||||
Deine Sammlung
|
||||
<span className="text-sm font-normal text-zinc-500 bg-zinc-100 dark:bg-zinc-800 px-3 py-1 rounded-full">
|
||||
{bottles.length}
|
||||
</span>
|
||||
</h2>
|
||||
|
||||
{isLoading ? (
|
||||
<div className="flex justify-center py-12">
|
||||
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-amber-600"></div>
|
||||
</div>
|
||||
) : (
|
||||
<BottleGrid bottles={bottles} />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user