mirror of
https://github.com/Memo-2023/mana-monorepo.git
synced 2026-05-23 11:06:42 +02:00
style: auto-format codebase with Prettier
Applied formatting to 1487+ files using pnpm format:write - TypeScript/JavaScript files - Svelte components - Astro pages - JSON configs - Markdown docs 13 files still need manual review (Astro JSX comments)
This commit is contained in:
Wuesteon
parent
0241f5554c
commit
d36b321d9d
3952 changed files with 661498 additions and 739751 deletions
|
|
@ -2,308 +2,342 @@ import { Component, For, createSignal, onMount, createMemo } from 'solid-js';
|
|||
import ContentCard from './ContentCard';
|
||||
|
||||
interface Talk {
|
||||
id: string;
|
||||
title: string;
|
||||
speaker: string;
|
||||
duration: string;
|
||||
excerpt: string;
|
||||
tags: string[];
|
||||
link: string;
|
||||
date?: string;
|
||||
thumbnail?: string;
|
||||
views?: string;
|
||||
id: string;
|
||||
title: string;
|
||||
speaker: string;
|
||||
duration: string;
|
||||
excerpt: string;
|
||||
tags: string[];
|
||||
link: string;
|
||||
date?: string;
|
||||
thumbnail?: string;
|
||||
views?: string;
|
||||
}
|
||||
|
||||
const SearchableContentList: Component = () => {
|
||||
const [talks, setTalks] = createSignal<Talk[]>([]);
|
||||
const [loading, setLoading] = createSignal(true);
|
||||
const [searchQuery, setSearchQuery] = createSignal('');
|
||||
const [talks, setTalks] = createSignal<Talk[]>([]);
|
||||
const [loading, setLoading] = createSignal(true);
|
||||
const [searchQuery, setSearchQuery] = createSignal('');
|
||||
|
||||
// Mock data - später durch API-Call ersetzen
|
||||
onMount(() => {
|
||||
// Simuliere API-Call
|
||||
setTimeout(() => {
|
||||
setTalks([
|
||||
{
|
||||
id: '1',
|
||||
title: 'Perspective is Everything: The Psychology of Reframing',
|
||||
speaker: 'Rory Sutherland',
|
||||
duration: '18 Min',
|
||||
excerpt: 'Wie kleine Änderungen in der Perspektive große Auswirkungen auf unser Verhalten und unsere Entscheidungen haben können. Ein faszinierender Einblick in die Verhaltensökonomie.',
|
||||
tags: ['Behavioral Economics', 'Psychology', 'Marketing'],
|
||||
link: '/talks/rory-sutherland-perspective-is-everything',
|
||||
date: '15. März 2024',
|
||||
views: '12.5k'
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
title: 'The Power of Psychological Solutions',
|
||||
speaker: 'Rory Sutherland',
|
||||
duration: '22 Min',
|
||||
excerpt: 'Warum psychologische Lösungen oft effektiver und günstiger sind als technische. Sutherland zeigt, wie wir Probleme neu denken können.',
|
||||
tags: ['Innovation', 'Problem Solving', 'Design Thinking'],
|
||||
link: '/talks/rory-sutherland-psychological-solutions',
|
||||
date: '10. März 2024',
|
||||
views: '8.3k'
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
title: 'Marketing Secrets from Behavioral Science',
|
||||
speaker: 'Rory Sutherland',
|
||||
duration: '25 Min',
|
||||
excerpt: 'Die verborgenen psychologischen Mechanismen hinter erfolgreichem Marketing. Erkenntnisse aus jahrzehntelanger Erfahrung bei Ogilvy.',
|
||||
tags: ['Marketing', 'Consumer Behavior', 'Branding'],
|
||||
link: '/talks/rory-sutherland-marketing-secrets',
|
||||
date: '5. März 2024',
|
||||
views: '15.7k'
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
title: 'Why Context Matters More Than Content',
|
||||
speaker: 'Rory Sutherland',
|
||||
duration: '20 Min',
|
||||
excerpt: 'Der Kontext bestimmt, wie wir Informationen wahrnehmen und interpretieren. Eine Lektion in der Kunst der Kommunikation.',
|
||||
tags: ['Communication', 'Perception', 'Context'],
|
||||
link: '/talks/rory-sutherland-context-matters',
|
||||
date: '1. März 2024',
|
||||
views: '6.2k'
|
||||
},
|
||||
{
|
||||
id: '5',
|
||||
title: 'The Irrational Consumer: Understanding Human Behavior',
|
||||
speaker: 'Rory Sutherland',
|
||||
duration: '30 Min',
|
||||
excerpt: 'Menschen sind keine rationalen Akteure. Wie wir diese Erkenntnis nutzen können, um bessere Produkte und Services zu entwickeln.',
|
||||
tags: ['Consumer Psychology', 'Behavioral Economics', 'UX Design'],
|
||||
link: '/talks/rory-sutherland-irrational-consumer',
|
||||
date: '25. Februar 2024',
|
||||
views: '10.1k'
|
||||
},
|
||||
{
|
||||
id: '6',
|
||||
title: 'Alchemy: The Magic of Ideas',
|
||||
speaker: 'Rory Sutherland',
|
||||
duration: '28 Min',
|
||||
excerpt: 'Große Ideen kommen oft aus unerwarteten Ecken. Sutherland erklärt, warum Logik allein nicht ausreicht, um Innovation zu schaffen.',
|
||||
tags: ['Creativity', 'Innovation', 'Ideas'],
|
||||
link: '/talks/rory-sutherland-alchemy',
|
||||
date: '20. Februar 2024',
|
||||
views: '18.9k'
|
||||
},
|
||||
{
|
||||
id: '7',
|
||||
title: 'How Great Leaders Inspire Action (Start with Why)',
|
||||
speaker: 'Simon Sinek',
|
||||
duration: '18 Min',
|
||||
excerpt: 'Simon Sineks berühmter TED Talk über das Golden Circle Modell - warum großartige Führungskräfte mit dem "Warum" beginnen und wie dies das Verhalten und die Loyalität von Menschen beeinflusst.',
|
||||
tags: ['Leadership', 'Purpose', 'Golden Circle', 'Inspiration'],
|
||||
link: '/speakers/simon-sinek',
|
||||
date: '9. September 2024',
|
||||
views: '60M+'
|
||||
},
|
||||
{
|
||||
id: '8',
|
||||
title: 'Why Good Leaders Make You Feel Safe',
|
||||
speaker: 'Simon Sinek',
|
||||
duration: '12 Min',
|
||||
excerpt: 'Ein kraftvoller Vortrag darüber, wie echte Führung bedeutet, Sicherheit für das Team zu schaffen, damit Menschen ihr Bestes geben können und bereit sind, füreinander einzustehen.',
|
||||
tags: ['Leadership', 'Trust', 'Safety', 'Team Building'],
|
||||
link: '/speakers/simon-sinek',
|
||||
date: '9. September 2024',
|
||||
views: '18M+'
|
||||
},
|
||||
{
|
||||
id: '9',
|
||||
title: 'Millennials in the Workplace',
|
||||
speaker: 'Simon Sinek',
|
||||
duration: '15 Min',
|
||||
excerpt: 'Simon Sineks virales Interview über die Herausforderungen der Millennial-Generation im Arbeitsplatz - von der Auswirkung der Technologie bis hin zu veränderten Arbeitserwartungen.',
|
||||
tags: ['Millennials', 'Workplace', 'Technology', 'Generational Change'],
|
||||
link: '/speakers/simon-sinek',
|
||||
date: '9. September 2024',
|
||||
views: '100M+'
|
||||
},
|
||||
{
|
||||
id: '10',
|
||||
title: 'Love Your Work',
|
||||
speaker: 'Simon Sinek',
|
||||
duration: '42 Min',
|
||||
excerpt: 'Ein inspirierender Talk über die Bedeutung von Leidenschaft bei der Arbeit und wie man eine Karriere aufbaut, die nicht nur erfolgreich, sondern auch erfüllend ist.',
|
||||
tags: ['Career', 'Passion', 'Purpose', 'Work-Life Balance'],
|
||||
link: '/speakers/simon-sinek',
|
||||
date: '9. September 2024',
|
||||
views: '2.8M'
|
||||
},
|
||||
{
|
||||
id: '11',
|
||||
title: 'The Future of AI and Machine Learning',
|
||||
speaker: 'Andrew Ng',
|
||||
duration: '35 Min',
|
||||
excerpt: 'Ein tiefer Einblick in die Zukunft der künstlichen Intelligenz und wie Machine Learning unsere Welt verändern wird.',
|
||||
tags: ['AI', 'Machine Learning', 'Technology'],
|
||||
link: '/talks/andrew-ng-future-of-ai',
|
||||
date: '18. Februar 2024',
|
||||
views: '22.3k'
|
||||
},
|
||||
{
|
||||
id: '12',
|
||||
title: 'Building Resilient Systems',
|
||||
speaker: 'Martin Fowler',
|
||||
duration: '40 Min',
|
||||
excerpt: 'Wie man Software-Systeme baut, die robust, wartbar und skalierbar sind. Best Practices aus jahrzehntelanger Erfahrung.',
|
||||
tags: ['Software Architecture', 'Engineering', 'Best Practices'],
|
||||
link: '/talks/martin-fowler-resilient-systems',
|
||||
date: '15. Februar 2024',
|
||||
views: '9.8k'
|
||||
},
|
||||
{
|
||||
id: '13',
|
||||
title: 'The Psychology of Money',
|
||||
speaker: 'Morgan Housel',
|
||||
duration: '32 Min',
|
||||
excerpt: 'Warum kluge Menschen dumme Dinge mit Geld machen und wie unsere Psychologie unsere finanziellen Entscheidungen beeinflusst.',
|
||||
tags: ['Finance', 'Psychology', 'Behavioral Economics'],
|
||||
link: '/talks/morgan-housel-psychology-of-money',
|
||||
date: '10. Februar 2024',
|
||||
views: '25.6k'
|
||||
}
|
||||
]);
|
||||
setLoading(false);
|
||||
}, 500);
|
||||
});
|
||||
// Mock data - später durch API-Call ersetzen
|
||||
onMount(() => {
|
||||
// Simuliere API-Call
|
||||
setTimeout(() => {
|
||||
setTalks([
|
||||
{
|
||||
id: '1',
|
||||
title: 'Perspective is Everything: The Psychology of Reframing',
|
||||
speaker: 'Rory Sutherland',
|
||||
duration: '18 Min',
|
||||
excerpt:
|
||||
'Wie kleine Änderungen in der Perspektive große Auswirkungen auf unser Verhalten und unsere Entscheidungen haben können. Ein faszinierender Einblick in die Verhaltensökonomie.',
|
||||
tags: ['Behavioral Economics', 'Psychology', 'Marketing'],
|
||||
link: '/talks/rory-sutherland-perspective-is-everything',
|
||||
date: '15. März 2024',
|
||||
views: '12.5k',
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
title: 'The Power of Psychological Solutions',
|
||||
speaker: 'Rory Sutherland',
|
||||
duration: '22 Min',
|
||||
excerpt:
|
||||
'Warum psychologische Lösungen oft effektiver und günstiger sind als technische. Sutherland zeigt, wie wir Probleme neu denken können.',
|
||||
tags: ['Innovation', 'Problem Solving', 'Design Thinking'],
|
||||
link: '/talks/rory-sutherland-psychological-solutions',
|
||||
date: '10. März 2024',
|
||||
views: '8.3k',
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
title: 'Marketing Secrets from Behavioral Science',
|
||||
speaker: 'Rory Sutherland',
|
||||
duration: '25 Min',
|
||||
excerpt:
|
||||
'Die verborgenen psychologischen Mechanismen hinter erfolgreichem Marketing. Erkenntnisse aus jahrzehntelanger Erfahrung bei Ogilvy.',
|
||||
tags: ['Marketing', 'Consumer Behavior', 'Branding'],
|
||||
link: '/talks/rory-sutherland-marketing-secrets',
|
||||
date: '5. März 2024',
|
||||
views: '15.7k',
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
title: 'Why Context Matters More Than Content',
|
||||
speaker: 'Rory Sutherland',
|
||||
duration: '20 Min',
|
||||
excerpt:
|
||||
'Der Kontext bestimmt, wie wir Informationen wahrnehmen und interpretieren. Eine Lektion in der Kunst der Kommunikation.',
|
||||
tags: ['Communication', 'Perception', 'Context'],
|
||||
link: '/talks/rory-sutherland-context-matters',
|
||||
date: '1. März 2024',
|
||||
views: '6.2k',
|
||||
},
|
||||
{
|
||||
id: '5',
|
||||
title: 'The Irrational Consumer: Understanding Human Behavior',
|
||||
speaker: 'Rory Sutherland',
|
||||
duration: '30 Min',
|
||||
excerpt:
|
||||
'Menschen sind keine rationalen Akteure. Wie wir diese Erkenntnis nutzen können, um bessere Produkte und Services zu entwickeln.',
|
||||
tags: ['Consumer Psychology', 'Behavioral Economics', 'UX Design'],
|
||||
link: '/talks/rory-sutherland-irrational-consumer',
|
||||
date: '25. Februar 2024',
|
||||
views: '10.1k',
|
||||
},
|
||||
{
|
||||
id: '6',
|
||||
title: 'Alchemy: The Magic of Ideas',
|
||||
speaker: 'Rory Sutherland',
|
||||
duration: '28 Min',
|
||||
excerpt:
|
||||
'Große Ideen kommen oft aus unerwarteten Ecken. Sutherland erklärt, warum Logik allein nicht ausreicht, um Innovation zu schaffen.',
|
||||
tags: ['Creativity', 'Innovation', 'Ideas'],
|
||||
link: '/talks/rory-sutherland-alchemy',
|
||||
date: '20. Februar 2024',
|
||||
views: '18.9k',
|
||||
},
|
||||
{
|
||||
id: '7',
|
||||
title: 'How Great Leaders Inspire Action (Start with Why)',
|
||||
speaker: 'Simon Sinek',
|
||||
duration: '18 Min',
|
||||
excerpt:
|
||||
'Simon Sineks berühmter TED Talk über das Golden Circle Modell - warum großartige Führungskräfte mit dem "Warum" beginnen und wie dies das Verhalten und die Loyalität von Menschen beeinflusst.',
|
||||
tags: ['Leadership', 'Purpose', 'Golden Circle', 'Inspiration'],
|
||||
link: '/speakers/simon-sinek',
|
||||
date: '9. September 2024',
|
||||
views: '60M+',
|
||||
},
|
||||
{
|
||||
id: '8',
|
||||
title: 'Why Good Leaders Make You Feel Safe',
|
||||
speaker: 'Simon Sinek',
|
||||
duration: '12 Min',
|
||||
excerpt:
|
||||
'Ein kraftvoller Vortrag darüber, wie echte Führung bedeutet, Sicherheit für das Team zu schaffen, damit Menschen ihr Bestes geben können und bereit sind, füreinander einzustehen.',
|
||||
tags: ['Leadership', 'Trust', 'Safety', 'Team Building'],
|
||||
link: '/speakers/simon-sinek',
|
||||
date: '9. September 2024',
|
||||
views: '18M+',
|
||||
},
|
||||
{
|
||||
id: '9',
|
||||
title: 'Millennials in the Workplace',
|
||||
speaker: 'Simon Sinek',
|
||||
duration: '15 Min',
|
||||
excerpt:
|
||||
'Simon Sineks virales Interview über die Herausforderungen der Millennial-Generation im Arbeitsplatz - von der Auswirkung der Technologie bis hin zu veränderten Arbeitserwartungen.',
|
||||
tags: ['Millennials', 'Workplace', 'Technology', 'Generational Change'],
|
||||
link: '/speakers/simon-sinek',
|
||||
date: '9. September 2024',
|
||||
views: '100M+',
|
||||
},
|
||||
{
|
||||
id: '10',
|
||||
title: 'Love Your Work',
|
||||
speaker: 'Simon Sinek',
|
||||
duration: '42 Min',
|
||||
excerpt:
|
||||
'Ein inspirierender Talk über die Bedeutung von Leidenschaft bei der Arbeit und wie man eine Karriere aufbaut, die nicht nur erfolgreich, sondern auch erfüllend ist.',
|
||||
tags: ['Career', 'Passion', 'Purpose', 'Work-Life Balance'],
|
||||
link: '/speakers/simon-sinek',
|
||||
date: '9. September 2024',
|
||||
views: '2.8M',
|
||||
},
|
||||
{
|
||||
id: '11',
|
||||
title: 'The Future of AI and Machine Learning',
|
||||
speaker: 'Andrew Ng',
|
||||
duration: '35 Min',
|
||||
excerpt:
|
||||
'Ein tiefer Einblick in die Zukunft der künstlichen Intelligenz und wie Machine Learning unsere Welt verändern wird.',
|
||||
tags: ['AI', 'Machine Learning', 'Technology'],
|
||||
link: '/talks/andrew-ng-future-of-ai',
|
||||
date: '18. Februar 2024',
|
||||
views: '22.3k',
|
||||
},
|
||||
{
|
||||
id: '12',
|
||||
title: 'Building Resilient Systems',
|
||||
speaker: 'Martin Fowler',
|
||||
duration: '40 Min',
|
||||
excerpt:
|
||||
'Wie man Software-Systeme baut, die robust, wartbar und skalierbar sind. Best Practices aus jahrzehntelanger Erfahrung.',
|
||||
tags: ['Software Architecture', 'Engineering', 'Best Practices'],
|
||||
link: '/talks/martin-fowler-resilient-systems',
|
||||
date: '15. Februar 2024',
|
||||
views: '9.8k',
|
||||
},
|
||||
{
|
||||
id: '13',
|
||||
title: 'The Psychology of Money',
|
||||
speaker: 'Morgan Housel',
|
||||
duration: '32 Min',
|
||||
excerpt:
|
||||
'Warum kluge Menschen dumme Dinge mit Geld machen und wie unsere Psychologie unsere finanziellen Entscheidungen beeinflusst.',
|
||||
tags: ['Finance', 'Psychology', 'Behavioral Economics'],
|
||||
link: '/talks/morgan-housel-psychology-of-money',
|
||||
date: '10. Februar 2024',
|
||||
views: '25.6k',
|
||||
},
|
||||
]);
|
||||
setLoading(false);
|
||||
}, 500);
|
||||
});
|
||||
|
||||
// Filtered talks based on search query
|
||||
const filteredTalks = createMemo(() => {
|
||||
const query = searchQuery().toLowerCase();
|
||||
if (!query) return talks();
|
||||
|
||||
return talks().filter(talk => {
|
||||
return (
|
||||
talk.title.toLowerCase().includes(query) ||
|
||||
talk.speaker.toLowerCase().includes(query) ||
|
||||
talk.excerpt.toLowerCase().includes(query) ||
|
||||
talk.tags.some(tag => tag.toLowerCase().includes(query))
|
||||
);
|
||||
});
|
||||
});
|
||||
// Filtered talks based on search query
|
||||
const filteredTalks = createMemo(() => {
|
||||
const query = searchQuery().toLowerCase();
|
||||
if (!query) return talks();
|
||||
|
||||
// Handle search input
|
||||
const handleSearch = (e: Event) => {
|
||||
const target = e.target as HTMLInputElement;
|
||||
setSearchQuery(target.value);
|
||||
};
|
||||
return talks().filter((talk) => {
|
||||
return (
|
||||
talk.title.toLowerCase().includes(query) ||
|
||||
talk.speaker.toLowerCase().includes(query) ||
|
||||
talk.excerpt.toLowerCase().includes(query) ||
|
||||
talk.tags.some((tag) => tag.toLowerCase().includes(query))
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
return (
|
||||
<div class="w-full">
|
||||
{/* Search Bar */}
|
||||
<div class="mb-12 max-w-2xl mx-auto">
|
||||
<div class="relative group">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Suche nach Vorträgen, Sprechern oder Themen..."
|
||||
value={searchQuery()}
|
||||
onInput={handleSearch}
|
||||
class="w-full px-6 py-4 pl-12 glass rounded-full text-theme-text placeholder-theme-text-muted/60 border border-theme-border/50 focus:border-theme-primary/50 focus:outline-none focus:ring-2 focus:ring-theme-primary/20 transition-all"
|
||||
/>
|
||||
<svg class="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-theme-text-muted" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
|
||||
</svg>
|
||||
|
||||
{/* Clear button */}
|
||||
{searchQuery() && (
|
||||
<button
|
||||
onClick={() => setSearchQuery('')}
|
||||
class="absolute right-4 top-1/2 -translate-y-1/2 p-1 rounded-full hover:bg-theme-surface transition-colors"
|
||||
aria-label="Clear search"
|
||||
>
|
||||
<svg class="w-5 h-5 text-theme-text-muted" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
|
||||
</svg>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Search results count */}
|
||||
{searchQuery() && !loading() && (
|
||||
<div class="mt-4 text-center text-theme-text-muted">
|
||||
{filteredTalks().length === 0 ? (
|
||||
<span>Keine Ergebnisse für "{searchQuery()}"</span>
|
||||
) : (
|
||||
<span>
|
||||
{filteredTalks().length} {filteredTalks().length === 1 ? 'Ergebnis' : 'Ergebnisse'} für "{searchQuery()}"
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
// Handle search input
|
||||
const handleSearch = (e: Event) => {
|
||||
const target = e.target as HTMLInputElement;
|
||||
setSearchQuery(target.value);
|
||||
};
|
||||
|
||||
{loading() ? (
|
||||
// Loading skeleton
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
<For each={[1, 2, 3, 4, 5, 6]}>
|
||||
{() => (
|
||||
<div class="glass rounded-2xl overflow-hidden h-[460px] animate-pulse">
|
||||
<div class="h-48 bg-theme-surface"></div>
|
||||
<div class="p-6">
|
||||
<div class="h-6 bg-theme-surface rounded mb-3"></div>
|
||||
<div class="h-4 bg-theme-surface rounded w-2/3 mb-3"></div>
|
||||
<div class="space-y-2">
|
||||
<div class="h-3 bg-theme-surface rounded"></div>
|
||||
<div class="h-3 bg-theme-surface rounded"></div>
|
||||
<div class="h-3 bg-theme-surface rounded w-5/6"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{filteredTalks().length === 0 && searchQuery() ? (
|
||||
// No results state
|
||||
<div class="text-center py-16">
|
||||
<div class="text-6xl mb-4">🔍</div>
|
||||
<h3 class="text-2xl font-semibold mb-2 text-theme-text">Keine Treffer</h3>
|
||||
<p class="text-theme-text-muted max-w-md mx-auto">
|
||||
Versuche es mit anderen Suchbegriffen oder browse durch alle verfügbaren Vorträge.
|
||||
</p>
|
||||
<button
|
||||
onClick={() => setSearchQuery('')}
|
||||
class="mt-6 px-6 py-2 bg-theme-primary text-white rounded-lg hover:bg-theme-primary-hover transition-colors"
|
||||
>
|
||||
Alle Vorträge anzeigen
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
// Content cards grid with fade-in animation
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
<For each={filteredTalks()}>
|
||||
{(talk, index) => (
|
||||
<div
|
||||
style={{
|
||||
animation: `fadeIn 0.5s ease-out ${index() * 0.05}s both`
|
||||
}}
|
||||
>
|
||||
<ContentCard
|
||||
title={talk.title}
|
||||
speaker={talk.speaker}
|
||||
duration={talk.duration}
|
||||
excerpt={talk.excerpt}
|
||||
tags={talk.tags}
|
||||
link={talk.link}
|
||||
date={talk.date}
|
||||
thumbnail={talk.thumbnail}
|
||||
views={talk.views}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
<style>{`
|
||||
return (
|
||||
<div class="w-full">
|
||||
{/* Search Bar */}
|
||||
<div class="mb-12 max-w-2xl mx-auto">
|
||||
<div class="relative group">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Suche nach Vorträgen, Sprechern oder Themen..."
|
||||
value={searchQuery()}
|
||||
onInput={handleSearch}
|
||||
class="w-full px-6 py-4 pl-12 glass rounded-full text-theme-text placeholder-theme-text-muted/60 border border-theme-border/50 focus:border-theme-primary/50 focus:outline-none focus:ring-2 focus:ring-theme-primary/20 transition-all"
|
||||
/>
|
||||
<svg
|
||||
class="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-theme-text-muted"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
|
||||
></path>
|
||||
</svg>
|
||||
|
||||
{/* Clear button */}
|
||||
{searchQuery() && (
|
||||
<button
|
||||
onClick={() => setSearchQuery('')}
|
||||
class="absolute right-4 top-1/2 -translate-y-1/2 p-1 rounded-full hover:bg-theme-surface transition-colors"
|
||||
aria-label="Clear search"
|
||||
>
|
||||
<svg
|
||||
class="w-5 h-5 text-theme-text-muted"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M6 18L18 6M6 6l12 12"
|
||||
></path>
|
||||
</svg>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Search results count */}
|
||||
{searchQuery() && !loading() && (
|
||||
<div class="mt-4 text-center text-theme-text-muted">
|
||||
{filteredTalks().length === 0 ? (
|
||||
<span>Keine Ergebnisse für "{searchQuery()}"</span>
|
||||
) : (
|
||||
<span>
|
||||
{filteredTalks().length} {filteredTalks().length === 1 ? 'Ergebnis' : 'Ergebnisse'}{' '}
|
||||
für "{searchQuery()}"
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{loading() ? (
|
||||
// Loading skeleton
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
<For each={[1, 2, 3, 4, 5, 6]}>
|
||||
{() => (
|
||||
<div class="glass rounded-2xl overflow-hidden h-[460px] animate-pulse">
|
||||
<div class="h-48 bg-theme-surface"></div>
|
||||
<div class="p-6">
|
||||
<div class="h-6 bg-theme-surface rounded mb-3"></div>
|
||||
<div class="h-4 bg-theme-surface rounded w-2/3 mb-3"></div>
|
||||
<div class="space-y-2">
|
||||
<div class="h-3 bg-theme-surface rounded"></div>
|
||||
<div class="h-3 bg-theme-surface rounded"></div>
|
||||
<div class="h-3 bg-theme-surface rounded w-5/6"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{filteredTalks().length === 0 && searchQuery() ? (
|
||||
// No results state
|
||||
<div class="text-center py-16">
|
||||
<div class="text-6xl mb-4">🔍</div>
|
||||
<h3 class="text-2xl font-semibold mb-2 text-theme-text">Keine Treffer</h3>
|
||||
<p class="text-theme-text-muted max-w-md mx-auto">
|
||||
Versuche es mit anderen Suchbegriffen oder browse durch alle verfügbaren Vorträge.
|
||||
</p>
|
||||
<button
|
||||
onClick={() => setSearchQuery('')}
|
||||
class="mt-6 px-6 py-2 bg-theme-primary text-white rounded-lg hover:bg-theme-primary-hover transition-colors"
|
||||
>
|
||||
Alle Vorträge anzeigen
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
// Content cards grid with fade-in animation
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
<For each={filteredTalks()}>
|
||||
{(talk, index) => (
|
||||
<div
|
||||
style={{
|
||||
animation: `fadeIn 0.5s ease-out ${index() * 0.05}s both`,
|
||||
}}
|
||||
>
|
||||
<ContentCard
|
||||
title={talk.title}
|
||||
speaker={talk.speaker}
|
||||
duration={talk.duration}
|
||||
excerpt={talk.excerpt}
|
||||
tags={talk.tags}
|
||||
link={talk.link}
|
||||
date={talk.date}
|
||||
thumbnail={talk.thumbnail}
|
||||
views={talk.views}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
<style>{`
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
|
|
@ -315,8 +349,8 @@ const SearchableContentList: Component = () => {
|
|||
}
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
);
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SearchableContentList;
|
||||
export default SearchableContentList;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue