export default function InteractiveBookshelfDemo() {
const books = [
{
id: 1,
title: 'KI Grundlagen',
author: 'Max Beispiel',
color: 'from-blue-600 to-blue-900',
content: [
'Künstliche Intelligenz verändert unsere Welt.',
'Machine Learning ist ein Teilbereich der KI.',
'Neuronale Netze bestehen aus vielen Schichten.',
'Große Sprachmodelle können Texte generieren.',
],
},
{
id: 2,
title: 'Marketing 2026',
author: 'Anna Digital',
color: 'from-pink-600 to-purple-900',
content: [
'Social Media bleibt wichtig.',
'Video Content dominiert viele Plattformen.',
'SEO verändert sich durch KI-Suchen.',
'Branding wird emotionaler.',
],
},
{
id: 3,
title: 'Solarenergie',
author: 'Thomas Grün',
color: 'from-yellow-500 to-orange-700',
content: [
'Photovoltaik wird effizienter.',
'Batteriespeicher wachsen stark.',
'Dezentrale Energieversorgung nimmt zu.',
'Smart Grids verbinden Erzeuger und Verbraucher.',
],
},
{
id: 4,
title: 'Webdesign Trends',
author: 'Lisa UX',
color: 'from-emerald-500 to-teal-800',
content: [
'Minimalismus bleibt beliebt.',
'3D Interfaces gewinnen an Bedeutung.',
'Animationen verbessern die UX.',
'Dark Mode ist Standard geworden.',
],
},
{
id: 5,
title: 'Cyber Security',
author: 'David Secure',
color: 'from-slate-600 to-black',
content: [
'Zero Trust wird wichtiger.',
'Passkeys ersetzen Passwörter.',
'Phishing-Angriffe werden intelligenter.',
'Cloud Security ist zentral.',
],
},
];
const [selectedBook, setSelectedBook] = React.useState(null);
const [currentPage, setCurrentPage] = React.useState(0);
const [search, setSearch] = React.useState('');
const filteredBooks = books.filter((book) => {
const text = `${book.title} ${book.author} ${book.content.join(' ')}`.toLowerCase();
return text.includes(search.toLowerCase());
});
const openBook = (book) => {
setSelectedBook(book);
setCurrentPage(0);
};
const nextPage = () => {
if (selectedBook && currentPage < selectedBook.content.length - 1) {
setCurrentPage(currentPage + 1);
}
};
const prevPage = () => {
if (currentPage > 0) {
setCurrentPage(currentPage - 1);
}
};
return (
{selectedBook && (
)}
);
}
Interaktives Bücherregal
3D Bücherregal mit Suchfunktion und animiertem Flipbook
setSearch(e.target.value)}
className="w-full px-5 py-4 rounded-2xl bg-zinc-800 border border-zinc-700 text-white outline-none focus:border-blue-500 transition"
/>
{filteredBooks.map((book) => (
openBook(book)}
className="group cursor-pointer"
>
))}
Buch
{book.title}
{book.author}
Digitales Buch
{selectedBook.title}
Autor: {selectedBook.author}
Interaktives Flipbook Beispiel
Seite {currentPage + 1}
{selectedBook.content.length} Seiten
{selectedBook.content[currentPage]}