import React, { useMemo, useState } from „react“;
import { motion } from „framer-motion“;
import { Search, Moon, Sun, Lock, Play, BookOpen, Sparkles, LibraryBig, Headphones } from „lucide-react“;
import { Card, CardContent } from „@/components/ui/card“;
import { Button } from „@/components/ui/button“;
const tales = [
{
title: „Dornröschen“,
mood: „Vertrauen“,
motif: „Schlossgarten“,
durationNight: „42 Min.“,
durationDay: „24 Min.“,
color: „from-rose-100 via-stone-100 to-amber-100“,
note: „Ein schlafendes Schloss, leise Rosen und die Erinnerung daran, dass manches in uns reifen darf.“,
},
{
title: „Allerleirauh“,
mood: „Wandlung“,
motif: „Sonne, Mond & Sterne“,
durationNight: „48 Min.“,
durationDay: „26 Min.“,
color: „from-slate-100 via-indigo-100 to-amber-100“,
note: „Eine Reise durch Verkleidung, Schutz und das Wiederfinden der eigenen inneren Würde.“,
},
{
title: „Jorinde und Joringel“,
mood: „Mut“,
motif: „Zauberwald“,
durationNight: „45 Min.“,
durationDay: „22 Min.“,
color: „from-emerald-100 via-stone-100 to-rose-100“,
note: „Eine rote Blume, eine Perle und der stille Mut, dem eigenen Traum zu folgen.“,
},
{
title: „Die Gänsemagd“,
mood: „Wahrheit“,
motif: „Wind & Torbogen“,
durationNight: „44 Min.“,
durationDay: „23 Min.“,
color: „from-sky-100 via-stone-100 to-stone-200“,
note: „Eine sanfte Geschichte über Stimme, Wahrheit und das, was nicht verloren geht.“,
},
{
title: „Schneeweißchen und Rosenrot“,
mood: „Geborgenheit“,
motif: „Winterhaus“,
durationNight: „39 Min.“,
durationDay: „21 Min.“,
color: „from-red-100 via-stone-100 to-white“,
note: „Ein warmes Haus im Winter, zwei Rosenbüsche und die Kraft freundlicher Herzen.“,
},
{
title: „Die Sterntaler“,
mood: „Loslassen“,
motif: „Sternennacht“,
durationNight: „36 Min.“,
durationDay: „18 Min.“,
color: „from-slate-200 via-indigo-100 to-yellow-50“,
note: „Eine stille Nachtgeschichte über Hingabe, Vertrauen und den Himmel über dir.“,
},
];
const filters = [„Alle“, „Mut“, „Vertrauen“, „Wandlung“, „Geborgenheit“, „Loslassen“, „Wahrheit“];
function TaleCard({ tale, index }) {
return (
{tale.title}
{tale.note}
);
}
export default function MaerchenbibliothekApp() {
const [query, setQuery] = useState(„“);
const [activeFilter, setActiveFilter] = useState(„Alle“);
const filteredTales = useMemo(() => {
return tales.filter((tale) => {
const matchesQuery = `${tale.title} ${tale.mood} ${tale.motif} ${tale.note}`
.toLowerCase()
.includes(query.toLowerCase());
const matchesFilter = activeFilter === „Alle“ || tale.mood === activeFilter;
return matchesQuery && matchesFilter;
});
}, [query, activeFilter]);
return (
Märchen für den Tag. Märchen für die Nacht.
Ein ruhiger, geschützter Ort im Abendraum: behutsam gelesene Märchen, sanfte Hypnosen und Geschichten, die an etwas sehr Altes in uns erinnern.
Die Märchen bleiben. Du musst abends nicht mehr suchen.
Jede Karte kann später zu einer Audioseite, einem Steady-Link oder einem privaten Podcast-Feed führen.
Heute empfohlen
Jorinde und Joringel
setQuery(e.target.value)}
placeholder=“Suche nach Märchen, Stimmung oder Motiv …“
className=“w-full rounded-3xl border border-stone-200 bg-white/75 py-4 pl-12 pr-5 text-base outline-none ring-[#D88980]/20 transition focus:ring-4″
/>
))}
Sammlung
Deine Märchenkarten
{filteredTales.length} von {tales.length} Märchen
))}
);
}