Initial commit: Maria Malejka memorial website
Next.js 14 + node:sqlite memorial site with: - Hero section, photo slideshow & gallery - Memory/thoughts editor (admin) - Music player with upload - Video gallery - Docker Compose deployment - Responsive warm earth tone design
This commit is contained in:
denshooter
@@ -0,0 +1,620 @@
|
||||
'use client'
|
||||
|
||||
import { useState, useEffect, useRef, useCallback } from 'react'
|
||||
import { motion, AnimatePresence } from 'framer-motion'
|
||||
import {
|
||||
Upload,
|
||||
Plus,
|
||||
Edit2,
|
||||
Trash2,
|
||||
Save,
|
||||
X,
|
||||
LogOut,
|
||||
Image as ImageIcon,
|
||||
Film,
|
||||
Music,
|
||||
FileText,
|
||||
Eye,
|
||||
Loader2,
|
||||
} from 'lucide-react'
|
||||
|
||||
type Memory = {
|
||||
id: number
|
||||
title: string
|
||||
content: string
|
||||
created_at: string
|
||||
updated_at: string
|
||||
}
|
||||
|
||||
type MediaItem = {
|
||||
id: number
|
||||
filename: string
|
||||
original_name: string | null
|
||||
type: 'photo' | 'video' | 'music'
|
||||
caption: string | null
|
||||
sort_order: number
|
||||
created_at: string
|
||||
}
|
||||
|
||||
export default function AdminPage() {
|
||||
const [authed, setAuthed] = useState<boolean | null>(null)
|
||||
const [password, setPassword] = useState('')
|
||||
const [loginError, setLoginError] = useState('')
|
||||
const [loginLoading, setLoginLoading] = useState(false)
|
||||
|
||||
const [memories, setMemories] = useState<Memory[]>([])
|
||||
const [photos, setPhotos] = useState<MediaItem[]>([])
|
||||
const [videos, setVideos] = useState<MediaItem[]>([])
|
||||
const [music, setMusic] = useState<MediaItem[]>([])
|
||||
|
||||
const [uploading, setUploading] = useState(false)
|
||||
const [uploadCaption, setUploadCaption] = useState('')
|
||||
const [uploadStatus, setUploadStatus] = useState('')
|
||||
const [dragOver, setDragOver] = useState(false)
|
||||
|
||||
const [editingMemory, setEditingMemory] = useState<Memory | null>(null)
|
||||
const [newMemory, setNewMemory] = useState({ title: '', content: '' })
|
||||
const [showNewMemory, setShowNewMemory] = useState(false)
|
||||
const [savingMemory, setSavingMemory] = useState(false)
|
||||
|
||||
const fileInputRef = useRef<HTMLInputElement>(null)
|
||||
|
||||
const loadData = useCallback(async () => {
|
||||
const [memoriesRes, mediaRes] = await Promise.all([
|
||||
fetch('/api/memories'),
|
||||
fetch('/api/media'),
|
||||
])
|
||||
const [memoriesData, mediaData] = await Promise.all([
|
||||
memoriesRes.json(),
|
||||
mediaRes.json(),
|
||||
])
|
||||
setMemories(Array.isArray(memoriesData) ? memoriesData : [])
|
||||
const items: MediaItem[] = Array.isArray(mediaData) ? mediaData : []
|
||||
setPhotos(items.filter((m) => m.type === 'photo'))
|
||||
setVideos(items.filter((m) => m.type === 'video'))
|
||||
setMusic(items.filter((m) => m.type === 'music'))
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
fetch('/api/auth')
|
||||
.then((r) => r.json())
|
||||
.then((d) => {
|
||||
setAuthed(d.authed)
|
||||
if (d.authed) loadData()
|
||||
})
|
||||
.catch(() => setAuthed(false))
|
||||
}, [loadData])
|
||||
|
||||
const login = async (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
setLoginLoading(true)
|
||||
setLoginError('')
|
||||
try {
|
||||
const res = await fetch('/api/auth', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ password }),
|
||||
})
|
||||
if (res.ok) {
|
||||
setAuthed(true)
|
||||
loadData()
|
||||
} else {
|
||||
setLoginError('Falsches Passwort')
|
||||
}
|
||||
} finally {
|
||||
setLoginLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const logout = async () => {
|
||||
await fetch('/api/auth', { method: 'DELETE' })
|
||||
setAuthed(false)
|
||||
setPassword('')
|
||||
}
|
||||
|
||||
const uploadFile = async (file: File) => {
|
||||
const formData = new FormData()
|
||||
formData.append('file', file)
|
||||
if (uploadCaption) formData.append('caption', uploadCaption)
|
||||
|
||||
const res = await fetch('/api/upload', { method: 'POST', body: formData })
|
||||
if (!res.ok) {
|
||||
const err = await res.json().catch(() => ({}))
|
||||
setUploadStatus(`Fehler: ${err.error || 'Unbekannter Fehler'}`)
|
||||
return false
|
||||
}
|
||||
return true
|
||||
}
|
||||
|
||||
const handleFiles = async (files: File[]) => {
|
||||
if (files.length === 0) return
|
||||
setUploading(true)
|
||||
setUploadStatus(`Lade ${files.length} Datei(en) hoch...`)
|
||||
|
||||
let success = 0
|
||||
for (const file of files) {
|
||||
const ok = await uploadFile(file)
|
||||
if (ok) success++
|
||||
}
|
||||
|
||||
setUploadStatus(`${success} von ${files.length} hochgeladen.`)
|
||||
setUploadCaption('')
|
||||
await loadData()
|
||||
setUploading(false)
|
||||
if (fileInputRef.current) fileInputRef.current.value = ''
|
||||
setTimeout(() => setUploadStatus(''), 3000)
|
||||
}
|
||||
|
||||
const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
handleFiles(Array.from(e.target.files || []))
|
||||
}
|
||||
|
||||
const handleDrop = (e: React.DragEvent) => {
|
||||
e.preventDefault()
|
||||
setDragOver(false)
|
||||
handleFiles(Array.from(e.dataTransfer.files))
|
||||
}
|
||||
|
||||
const deleteMedia = async (id: number) => {
|
||||
if (!confirm('Datei wirklich löschen?')) return
|
||||
await fetch(`/api/media/${id}`, { method: 'DELETE' })
|
||||
loadData()
|
||||
}
|
||||
|
||||
const saveMemory = async (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
setSavingMemory(true)
|
||||
try {
|
||||
if (editingMemory) {
|
||||
await fetch(`/api/memories/${editingMemory.id}`, {
|
||||
method: 'PUT',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
title: editingMemory.title,
|
||||
content: editingMemory.content,
|
||||
}),
|
||||
})
|
||||
setEditingMemory(null)
|
||||
} else {
|
||||
await fetch('/api/memories', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(newMemory),
|
||||
})
|
||||
setNewMemory({ title: '', content: '' })
|
||||
setShowNewMemory(false)
|
||||
}
|
||||
loadData()
|
||||
} finally {
|
||||
setSavingMemory(false)
|
||||
}
|
||||
}
|
||||
|
||||
const deleteMemory = async (id: number) => {
|
||||
if (!confirm('Erinnerung wirklich löschen?')) return
|
||||
await fetch(`/api/memories/${id}`, { method: 'DELETE' })
|
||||
loadData()
|
||||
}
|
||||
|
||||
// ── Loading state ──────────────────────────────────────────────────────────
|
||||
if (authed === null) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-cream">
|
||||
<Loader2 className="animate-spin text-warm-gold" size={28} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// ── Login ─────────────────────────────────────────────────────────────────
|
||||
if (!authed) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-cream px-4">
|
||||
<div className="w-full max-w-sm">
|
||||
<h1 className="font-cormorant italic text-4xl text-center text-warm-brown mb-1">
|
||||
Verwaltung
|
||||
</h1>
|
||||
<p className="text-center text-warm-brown-light text-sm mb-8 font-lora">
|
||||
Maria Malejka · Gedenkseite
|
||||
</p>
|
||||
|
||||
<form onSubmit={login} className="space-y-4">
|
||||
<input
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
placeholder="Passwort"
|
||||
className="w-full px-4 py-3 rounded-xl border border-warm-border bg-white text-warm-brown focus:outline-none focus:ring-2 focus:ring-amber-400 font-lora"
|
||||
autoFocus
|
||||
/>
|
||||
{loginError && (
|
||||
<p className="text-red-500 text-sm text-center">{loginError}</p>
|
||||
)}
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loginLoading}
|
||||
className="w-full py-3 bg-amber-800 hover:bg-amber-700 disabled:opacity-60 text-amber-100 rounded-xl font-lora transition-colors flex items-center justify-center gap-2"
|
||||
>
|
||||
{loginLoading && <Loader2 size={16} className="animate-spin" />}
|
||||
Anmelden
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<a
|
||||
href="/"
|
||||
className="block text-center mt-5 text-sm text-warm-brown-light hover:text-warm-gold transition-colors"
|
||||
>
|
||||
← Zur Gedenkseite
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// ── Admin UI ───────────────────────────────────────────────────────────────
|
||||
return (
|
||||
<div className="min-h-screen bg-cream">
|
||||
{/* Header */}
|
||||
<header className="bg-amber-950/95 text-amber-100 px-4 py-3 flex items-center justify-between sticky top-0 z-20 backdrop-blur-sm">
|
||||
<a
|
||||
href="/"
|
||||
className="text-amber-400 hover:text-amber-200 transition-colors flex items-center gap-1.5 text-sm"
|
||||
>
|
||||
<Eye size={14} />
|
||||
Seite ansehen
|
||||
</a>
|
||||
<h1 className="font-cormorant italic text-xl text-amber-200">
|
||||
Verwaltung
|
||||
</h1>
|
||||
<button
|
||||
onClick={logout}
|
||||
className="text-amber-500 hover:text-amber-200 transition-colors flex items-center gap-1.5 text-sm"
|
||||
>
|
||||
<LogOut size={14} />
|
||||
Abmelden
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<div className="max-w-3xl mx-auto px-4 py-10 space-y-14">
|
||||
{/* ── Upload Section ───────────────────────────────────────────────── */}
|
||||
<section>
|
||||
<h2 className="font-cormorant italic text-3xl text-warm-brown mb-5 flex items-center gap-2">
|
||||
<Upload size={20} className="text-warm-gold" />
|
||||
Dateien hochladen
|
||||
</h2>
|
||||
|
||||
<div className="mb-3">
|
||||
<input
|
||||
type="text"
|
||||
value={uploadCaption}
|
||||
onChange={(e) => setUploadCaption(e.target.value)}
|
||||
placeholder="Bildunterschrift / Beschreibung (optional)"
|
||||
className="w-full px-4 py-2.5 rounded-xl border border-warm-border bg-white text-warm-brown text-sm focus:outline-none focus:ring-2 focus:ring-amber-400 font-lora"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
onDrop={handleDrop}
|
||||
onDragOver={(e) => { e.preventDefault(); setDragOver(true) }}
|
||||
onDragLeave={() => setDragOver(false)}
|
||||
className={`border-2 border-dashed rounded-2xl p-8 text-center transition-colors ${
|
||||
dragOver
|
||||
? 'border-amber-500 bg-amber-50/50'
|
||||
: 'border-warm-border hover:border-amber-400'
|
||||
}`}
|
||||
>
|
||||
<Upload className="mx-auto mb-3 text-warm-gold" size={28} />
|
||||
<p className="text-warm-brown font-lora text-sm mb-1">
|
||||
Fotos, Videos oder Musik hochladen
|
||||
</p>
|
||||
<p className="text-warm-brown-light text-xs mb-4">
|
||||
JPG, PNG, HEIC (iPhone), MP4, MOV, MP3, M4A — mehrere auf einmal möglich
|
||||
</p>
|
||||
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
type="file"
|
||||
multiple
|
||||
accept="image/*,video/*,audio/*"
|
||||
onChange={handleFileChange}
|
||||
className="hidden"
|
||||
id="file-upload"
|
||||
/>
|
||||
<label
|
||||
htmlFor="file-upload"
|
||||
className={`inline-block px-6 py-2.5 rounded-xl cursor-pointer transition-colors font-lora text-sm ${
|
||||
uploading
|
||||
? 'bg-amber-200 text-amber-700 cursor-not-allowed'
|
||||
: 'bg-amber-800 hover:bg-amber-700 text-amber-100'
|
||||
}`}
|
||||
>
|
||||
{uploading ? 'Lädt hoch…' : 'Dateien auswählen'}
|
||||
</label>
|
||||
|
||||
{uploadStatus && (
|
||||
<p className="mt-3 text-sm text-warm-brown-light font-lora">
|
||||
{uploadStatus}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ── Photos ──────────────────────────────────────────────────────── */}
|
||||
<section>
|
||||
<h2 className="font-cormorant italic text-3xl text-warm-brown mb-5 flex items-center gap-2">
|
||||
<ImageIcon size={20} className="text-warm-gold" />
|
||||
Fotos
|
||||
<span className="text-warm-brown-light text-xl">({photos.length})</span>
|
||||
</h2>
|
||||
|
||||
{photos.length === 0 ? (
|
||||
<p className="text-warm-brown-light text-sm italic font-lora">
|
||||
Noch keine Fotos hochgeladen.
|
||||
</p>
|
||||
) : (
|
||||
<div className="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 gap-3">
|
||||
{photos.map((photo) => (
|
||||
<div key={photo.id} className="relative group aspect-square">
|
||||
<img
|
||||
src={`/api/files/${photo.filename}`}
|
||||
alt={photo.caption || ''}
|
||||
className="w-full h-full object-cover rounded-xl"
|
||||
loading="lazy"
|
||||
/>
|
||||
<button
|
||||
onClick={() => deleteMedia(photo.id)}
|
||||
className="absolute top-1 right-1 bg-red-500/90 text-white rounded-full p-1.5 opacity-0 group-hover:opacity-100 transition-opacity shadow"
|
||||
title="Löschen"
|
||||
>
|
||||
<Trash2 size={12} />
|
||||
</button>
|
||||
{photo.caption && (
|
||||
<div className="absolute bottom-0 inset-x-0 bg-black/50 rounded-b-xl px-1.5 py-1">
|
||||
<p className="text-white text-xs truncate">{photo.caption}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
|
||||
{/* ── Videos ──────────────────────────────────────────────────────── */}
|
||||
<section>
|
||||
<h2 className="font-cormorant italic text-3xl text-warm-brown mb-5 flex items-center gap-2">
|
||||
<Film size={20} className="text-warm-gold" />
|
||||
Videos
|
||||
<span className="text-warm-brown-light text-xl">({videos.length})</span>
|
||||
</h2>
|
||||
|
||||
{videos.length === 0 ? (
|
||||
<p className="text-warm-brown-light text-sm italic font-lora">
|
||||
Noch keine Videos hochgeladen.
|
||||
</p>
|
||||
) : (
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 gap-4">
|
||||
{videos.map((video) => (
|
||||
<div key={video.id} className="relative group">
|
||||
<video
|
||||
src={`/api/files/${video.filename}`}
|
||||
className="w-full aspect-video object-cover rounded-xl bg-stone-900"
|
||||
preload="metadata"
|
||||
muted
|
||||
/>
|
||||
<p className="text-xs text-warm-brown-light mt-1 truncate font-lora">
|
||||
{video.original_name || video.caption || video.filename}
|
||||
</p>
|
||||
<button
|
||||
onClick={() => deleteMedia(video.id)}
|
||||
className="absolute top-1 right-1 bg-red-500/90 text-white rounded-full p-1.5 opacity-0 group-hover:opacity-100 transition-opacity shadow"
|
||||
title="Löschen"
|
||||
>
|
||||
<Trash2 size={12} />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
|
||||
{/* ── Music ───────────────────────────────────────────────────────── */}
|
||||
<section>
|
||||
<h2 className="font-cormorant italic text-3xl text-warm-brown mb-5 flex items-center gap-2">
|
||||
<Music size={20} className="text-warm-gold" />
|
||||
Musik
|
||||
<span className="text-warm-brown-light text-xl">({music.length})</span>
|
||||
</h2>
|
||||
|
||||
{music.length === 0 ? (
|
||||
<p className="text-warm-brown-light text-sm italic font-lora">
|
||||
Noch keine Musik hochgeladen.
|
||||
</p>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{music.map((track, i) => (
|
||||
<div
|
||||
key={track.id}
|
||||
className="flex items-center gap-3 bg-white/60 rounded-xl px-4 py-3 border border-warm-border group"
|
||||
>
|
||||
<span className="text-warm-gold/60 text-sm font-cormorant">{i + 1}.</span>
|
||||
<Music size={14} className="text-warm-gold flex-shrink-0" />
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm text-warm-brown truncate font-lora">
|
||||
{track.original_name?.replace(/\.[^/.]+$/, '') ||
|
||||
track.caption ||
|
||||
track.filename}
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => deleteMedia(track.id)}
|
||||
className="text-red-400/60 hover:text-red-500 transition-colors opacity-0 group-hover:opacity-100 flex-shrink-0"
|
||||
title="Löschen"
|
||||
>
|
||||
<Trash2 size={15} />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
|
||||
{/* ── Memories ────────────────────────────────────────────────────── */}
|
||||
<section>
|
||||
<div className="flex items-center justify-between mb-5">
|
||||
<h2 className="font-cormorant italic text-3xl text-warm-brown flex items-center gap-2">
|
||||
<FileText size={20} className="text-warm-gold" />
|
||||
Erinnerungen
|
||||
<span className="text-warm-brown-light text-xl">({memories.length})</span>
|
||||
</h2>
|
||||
<button
|
||||
onClick={() => {
|
||||
setShowNewMemory(true)
|
||||
setEditingMemory(null)
|
||||
}}
|
||||
className="flex items-center gap-1.5 px-4 py-2 bg-amber-800 hover:bg-amber-700 text-amber-100 rounded-xl text-sm transition-colors font-lora"
|
||||
>
|
||||
<Plus size={15} />
|
||||
Neue Erinnerung
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* New / Edit form */}
|
||||
<AnimatePresence>
|
||||
{(showNewMemory || editingMemory) && (
|
||||
<motion.form
|
||||
initial={{ opacity: 0, height: 0 }}
|
||||
animate={{ opacity: 1, height: 'auto' }}
|
||||
exit={{ opacity: 0, height: 0 }}
|
||||
transition={{ duration: 0.25 }}
|
||||
onSubmit={saveMemory}
|
||||
className="bg-white/80 rounded-2xl p-5 mb-6 space-y-3 border border-warm-border overflow-hidden"
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm text-warm-brown-light font-lora">
|
||||
{editingMemory ? 'Erinnerung bearbeiten' : 'Neue Erinnerung'}
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setShowNewMemory(false)
|
||||
setEditingMemory(null)
|
||||
}}
|
||||
className="text-warm-brown-light hover:text-warm-brown"
|
||||
>
|
||||
<X size={16} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<input
|
||||
type="text"
|
||||
value={editingMemory ? editingMemory.title : newMemory.title}
|
||||
onChange={(e) =>
|
||||
editingMemory
|
||||
? setEditingMemory({ ...editingMemory, title: e.target.value })
|
||||
: setNewMemory({ ...newMemory, title: e.target.value })
|
||||
}
|
||||
placeholder="Titel"
|
||||
required
|
||||
className="w-full px-4 py-2.5 rounded-xl border border-warm-border bg-white font-cormorant italic text-xl text-warm-brown focus:outline-none focus:ring-2 focus:ring-amber-400"
|
||||
/>
|
||||
|
||||
<textarea
|
||||
value={editingMemory ? editingMemory.content : newMemory.content}
|
||||
onChange={(e) =>
|
||||
editingMemory
|
||||
? setEditingMemory({ ...editingMemory, content: e.target.value })
|
||||
: setNewMemory({ ...newMemory, content: e.target.value })
|
||||
}
|
||||
placeholder="Deine Gedanken und Erinnerungen…"
|
||||
required
|
||||
rows={7}
|
||||
className="w-full px-4 py-3 rounded-xl border border-warm-border bg-white font-lora text-warm-brown focus:outline-none focus:ring-2 focus:ring-amber-400 resize-none text-sm leading-relaxed"
|
||||
/>
|
||||
|
||||
<div className="flex gap-2 justify-end">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setShowNewMemory(false)
|
||||
setEditingMemory(null)
|
||||
}}
|
||||
className="px-4 py-2 rounded-xl border border-warm-border text-warm-brown-light hover:text-warm-brown text-sm transition-colors font-lora"
|
||||
>
|
||||
Abbrechen
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={savingMemory}
|
||||
className="px-4 py-2 bg-amber-800 hover:bg-amber-700 disabled:opacity-60 text-amber-100 rounded-xl text-sm transition-colors flex items-center gap-1.5 font-lora"
|
||||
>
|
||||
{savingMemory ? (
|
||||
<Loader2 size={14} className="animate-spin" />
|
||||
) : (
|
||||
<Save size={14} />
|
||||
)}
|
||||
Speichern
|
||||
</button>
|
||||
</div>
|
||||
</motion.form>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
|
||||
{memories.length === 0 ? (
|
||||
<p className="text-warm-brown-light text-sm italic font-lora">
|
||||
Noch keine Erinnerungen geschrieben.
|
||||
</p>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
{memories.map((memory) => (
|
||||
<div
|
||||
key={memory.id}
|
||||
className={`bg-white/60 rounded-2xl p-5 border transition-colors ${
|
||||
editingMemory?.id === memory.id
|
||||
? 'border-amber-400'
|
||||
: 'border-warm-border'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<div className="flex-1 min-w-0">
|
||||
<h3 className="font-cormorant italic text-xl text-warm-brown leading-snug">
|
||||
{memory.title}
|
||||
</h3>
|
||||
<p className="text-warm-brown-light text-xs mt-0.5 font-lora">
|
||||
{new Date(memory.created_at).toLocaleDateString('de-DE', {
|
||||
day: 'numeric',
|
||||
month: 'long',
|
||||
year: 'numeric',
|
||||
})}
|
||||
</p>
|
||||
<p className="text-warm-brown/70 text-sm mt-2 line-clamp-3 font-lora leading-relaxed">
|
||||
{memory.content}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex gap-1 flex-shrink-0">
|
||||
<button
|
||||
onClick={() => {
|
||||
setEditingMemory(memory)
|
||||
setShowNewMemory(false)
|
||||
}}
|
||||
className="p-2 text-amber-700 hover:text-amber-500 transition-colors rounded-lg hover:bg-amber-50"
|
||||
title="Bearbeiten"
|
||||
>
|
||||
<Edit2 size={15} />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => deleteMemory(memory.id)}
|
||||
className="p-2 text-red-400/70 hover:text-red-500 transition-colors rounded-lg hover:bg-red-50"
|
||||
title="Löschen"
|
||||
>
|
||||
<Trash2 size={15} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user