Refactorings.
parent
fff2aef2c6
commit
28bec5b242
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,7 @@
|
||||
import Episodes from '@/components/Episodes'
|
||||
|
||||
export default async function AllEpisodes() {
|
||||
return (
|
||||
<Episodes />
|
||||
);
|
||||
}
|
@ -0,0 +1,96 @@
|
||||
import Link from 'next/link'
|
||||
|
||||
import { Container } from '@/components/Container'
|
||||
import { FormattedDate } from '@/components/FormattedDate'
|
||||
|
||||
import { getEpisodes } from '@/data/episodes'
|
||||
|
||||
import Player from '@/app/Player'
|
||||
|
||||
function EpisodeEntry({ episode }) {
|
||||
let date = new Date(episode.published)
|
||||
|
||||
return (
|
||||
<article
|
||||
aria-labelledby={`episode-${episode.id}-title`}
|
||||
className="py-10 sm:py-12"
|
||||
>
|
||||
<Container>
|
||||
<div className="flex flex-col items-start">
|
||||
<h2
|
||||
id={`episode-${episode.id}-title`}
|
||||
className="mt-2 text-lg font-bold text-slate-900"
|
||||
>
|
||||
<Link href={`/podcast/${episode?.slug}`}>{episode.title}</Link>
|
||||
</h2>
|
||||
<FormattedDate
|
||||
date={date}
|
||||
className="order-first font-mono text-sm leading-7 text-slate-500"
|
||||
/>
|
||||
<p className="mt-1 text-base leading-7 text-slate-700">
|
||||
{episode.description}
|
||||
</p>
|
||||
<div className="mt-4 flex items-center gap-4">
|
||||
<Player episode={episode}>
|
||||
<span className="ml-3" aria-hidden="true">
|
||||
Listen
|
||||
</span>
|
||||
</Player>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
className="text-sm font-bold text-slate-400"
|
||||
>
|
||||
/
|
||||
</span>
|
||||
<Link
|
||||
href={`/podcast/${episode.slug}`}
|
||||
className="flex items-center text-sm font-bold leading-6 text-pink-500 hover:text-pink-700 active:text-pink-900"
|
||||
aria-label={`Show notes for episode ${episode.title}`}
|
||||
>
|
||||
Show notes
|
||||
</Link>
|
||||
{episode?.transcript &&
|
||||
(
|
||||
<>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
className="text-sm font-bold text-slate-400"
|
||||
>
|
||||
/
|
||||
</span>
|
||||
<Link
|
||||
href={`/podcast/${episode.slug}#transcript`}
|
||||
className="flex items-center text-sm font-bold leading-6 text-pink-500 hover:text-pink-700 active:text-pink-900"
|
||||
aria-label={`Transcript for episode ${episode.title}`}
|
||||
>
|
||||
Transcript
|
||||
</Link>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</article>
|
||||
)
|
||||
}
|
||||
|
||||
export default async function Episodes({ limit }) {
|
||||
const episodes = await getEpisodes()
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="pt-16 pb-12 sm:pb-4 lg:pt-12">
|
||||
<Container>
|
||||
<h1 className="text-2xl font-bold leading-7 text-slate-900">
|
||||
Episodes
|
||||
</h1>
|
||||
</Container>
|
||||
<div className="divide-y divide-slate-100 sm:mt-4 lg:mt-8 lg:border-t lg:border-slate-100">
|
||||
{episodes.slice(0, limit || episodes.length).map((episode) => (
|
||||
<EpisodeEntry key={episode.id} episode={episode} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
Loading…
Reference in New Issue