96 lines
4.9 KiB
React
96 lines
4.9 KiB
React
import React from 'react'
|
|
import { useContent } from '../hooks/useContent'
|
|
import { formatDate } from '../utils/formatDate'
|
|
import { ExternalLink } from 'lucide-react'
|
|
import SEOHead from '../components/SEOHead'
|
|
|
|
export default function Podcast() {
|
|
const { items: allEpisodes } = useContent('podcast', { visibility: 'all', pageSize: 100 })
|
|
|
|
// Group: own show "Almost Intelligent" vs. guest appearances vs. other shows (Einfachbahn-Impulse)
|
|
const almostIntelligent = allEpisodes.filter(ep => !ep.role || ep.show === 'Almost Intelligent')
|
|
const guestAppearances = allEpisodes.filter(ep => ep.role === 'guest')
|
|
const otherShows = allEpisodes.filter(ep => ep.role === 'host' && ep.show !== 'Almost Intelligent')
|
|
|
|
return (
|
|
<main style={{ paddingTop: '120px', minHeight: '100vh' }}>
|
|
<SEOHead title="Podcast" description="Podcasts, Gastauftritte und Gespräche von und mit Dr. André Knie über KI, Transformation und Leadership." url="/podcast" />
|
|
<div className="app-container" style={{ maxWidth: '800px', margin: '0 auto' }}>
|
|
<div className="section-header">
|
|
<h1 className="section-title"><span className="text-gradient">Podcast</span></h1>
|
|
<p className="section-subtitle">Eigener Podcast, Gastauftritte und mehr — zu KI, Transformation und Leadership.</p>
|
|
</div>
|
|
|
|
{/* Almost Intelligent */}
|
|
{almostIntelligent.length > 0 && (
|
|
<section style={{ marginBottom: '60px' }}>
|
|
<h2 style={{ marginBottom: '8px' }}>Almost Intelligent</h2>
|
|
<p style={{ color: 'var(--text-secondary)', marginBottom: '24px' }}>14-tägiger KI-Podcast. Die Brücke zwischen künstlicher und natürlicher Intelligenz.</p>
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
|
|
{almostIntelligent.map(ep => (
|
|
<EpisodeCard key={ep.id || ep.slug} ep={ep} />
|
|
))}
|
|
</div>
|
|
</section>
|
|
)}
|
|
|
|
{/* Gastauftritte */}
|
|
{guestAppearances.length > 0 && (
|
|
<section style={{ marginBottom: '60px' }}>
|
|
<h2 style={{ marginBottom: '8px' }}>Gastauftritte</h2>
|
|
<p style={{ color: 'var(--text-secondary)', marginBottom: '24px' }}>Einladungen zu anderen Podcasts und Formaten.</p>
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
|
|
{guestAppearances.map(ep => (
|
|
<EpisodeCard key={ep.id || ep.slug} ep={ep} showHost />
|
|
))}
|
|
</div>
|
|
</section>
|
|
)}
|
|
|
|
{/* Einfachbahn-Impulse / andere eigene Shows */}
|
|
{otherShows.length > 0 && (
|
|
<section style={{ marginBottom: '60px' }}>
|
|
<h2 style={{ marginBottom: '8px' }}>Weitere Formate</h2>
|
|
<p style={{ color: 'var(--text-secondary)', marginBottom: '24px' }}>Interne und spezialisierte Podcast-Reihen.</p>
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
|
|
{otherShows.map(ep => (
|
|
<EpisodeCard key={ep.id || ep.slug} ep={ep} showHost />
|
|
))}
|
|
</div>
|
|
</section>
|
|
)}
|
|
|
|
{allEpisodes.length === 0 && <p style={{ textAlign: 'center', color: 'var(--text-secondary)' }}>Noch keine Episoden veröffentlicht.</p>}
|
|
</div>
|
|
</main>
|
|
)
|
|
}
|
|
|
|
function EpisodeCard({ ep, showHost = false }) {
|
|
const allLinks = { ...ep.external_links, ...ep.links }
|
|
const linkEntries = Object.entries(allLinks || {}).filter(([, url]) => url)
|
|
|
|
return (
|
|
<div className="glass-panel" style={{ padding: '24px' }}>
|
|
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', flexWrap: 'wrap', gap: '4px' }}>
|
|
<h3 style={{ marginBottom: '4px' }}>{ep.title}</h3>
|
|
{ep.show && showHost && <span style={{ color: 'var(--accent-color)', fontSize: '0.8rem', fontWeight: 'var(--font-weight-semibold)' }}>{ep.show}</span>}
|
|
</div>
|
|
<p style={{ color: 'var(--text-secondary)', margin: '0 0 8px', fontSize: '0.9rem' }}>
|
|
{formatDate(ep.date)} {ep.host && showHost && `· ${ep.host}`} {ep.duration && `· ${ep.duration}`}
|
|
</p>
|
|
{ep.description && <p style={{ color: 'var(--text-secondary)', margin: '0 0 12px', lineHeight: 1.6 }}>{ep.description}</p>}
|
|
{ep.summary && !ep.description && <p style={{ color: 'var(--text-secondary)', margin: '0 0 12px', lineHeight: 1.6 }}>{ep.summary}</p>}
|
|
{linkEntries.length > 0 && (
|
|
<div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
|
|
{linkEntries.map(([name, url]) => (
|
|
<a key={name} href={url} target="_blank" rel="noopener noreferrer" className="secondary-button" style={{ padding: '8px 14px', fontSize: '0.8rem', display: 'inline-flex', alignItems: 'center', gap: '4px' }}>
|
|
<ExternalLink size={14} /> {name.charAt(0).toUpperCase() + name.slice(1)}
|
|
</a>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|