ershisan99/podcaster
1
0
Fork 0
mirror of https://github.com/ershisan99/podcaster.git synced 2025-12-18 05:09:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: add podcast episodes list styles

Browse Source
This commit is contained in:
andres
2024-04-21 00:51:26 +02:00
parent 499d511c72
commit bea8cc2bb9
2 changed files with 43 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
src/components/podcast-episodes-list.tsx
View File

@@ -1,5 +1,13 @@
import { Link, useParams } from "react-router-dom"; import { Link, useParams } from "react-router-dom";
import { usePodcastQuery } from "../services/podcasts/podcast.hooks"; import { usePodcastQuery } from "../services/podcasts/podcast.hooks";
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeadCell,
TableRow,
} from "./ui/table/table";
export function PodcastEpisodesList() { export function PodcastEpisodesList() {
const { podcastId } = useParams<{ podcastId: string }>(); const { podcastId } = useParams<{ podcastId: string }>();
@@ -7,34 +15,43 @@ export function PodcastEpisodesList() {
return ( return (
<div> <div>
<div>Episodes: {podcast?.trackCount}</div> <div className={"p-3 text-xl font-bold shadow-md"}>
<div> Episodes: {podcast?.trackCount}
<table> </div>
<thead> <div className={"mt-6 p-3 shadow-md"}>
<tr> <Table>
<th>Title</th> <TableHead>
<th>Release Date</th> <TableRow className={"!bg-slate-50"}>
<th>Duration</th> <TableHeadCell className={"text-start"}>Title</TableHeadCell>
</tr> <TableHeadCell className={"text-start"}>Date</TableHeadCell>
</thead> <TableHeadCell className={"text-end"}>Duration</TableHeadCell>
<tbody> </TableRow>
</TableHead>
<TableBody>
{podcast?.episodes?.map((episode) => { {podcast?.episodes?.map((episode) => {
const formattedDate = formatDate(episode.releaseDate); const formattedDate = formatDate(episode.releaseDate);
const formattedDuration = formatDuration(episode.durationSeconds); const formattedDuration = formatDuration(episode.durationSeconds);
const url = `/podcast/${podcastId}/episode/${episode.id}`; const url = `/podcast/${podcastId}/episode/${episode.id}`;
return ( return (
<tr key={episode.id}> <TableRow key={episode.id}>
<td> <TableCell>
<Link to={url}>{episode.title}</Link> <Link
</td> to={url}
<td>{formattedDate}</td> className={"text-indigo-500 hover:underline"}
<td>{formattedDuration}</td> >
</tr> {episode.title}
</Link>
</TableCell>
<TableCell>{formattedDate}</TableCell>
<TableCell className={"text-end"}>
{formattedDuration}
</TableCell>
</TableRow>
); );
})} })}
</tbody> </TableBody>
</table> </Table>
</div> </div>
</div> </div>
); );
@@ -50,5 +67,9 @@ function formatDuration(duration?: number) {
} }
function formatDate(date: string) { function formatDate(date: string) {
return new Date(date).toLocaleDateString(); return new Date(date).toLocaleDateString("es-ES", {
month: "2-digit",
day: "2-digit",
year: "numeric",
});
} }

2
src/components/podcast-info-card.tsx
View File

@@ -23,7 +23,7 @@ export function PodcastInfoCard({
const shouldWrapWithLink = !!episodeId; const shouldWrapWithLink = !!episodeId;
return ( return (
<aside className={"h-fit w-1/3 px-2 py-6 shadow-md"}> <aside className={"h-fit w-1/3 shrink-0 px-2 py-6 shadow-md"}>
<div className={"border-b px-10 pb-4"}> <div className={"border-b px-10 pb-4"}>
<Wrap if={shouldWrapWithLink} with={Link} wrapperProps={{ to: href }}> <Wrap if={shouldWrapWithLink} with={Link} wrapperProps={{ to: href }}>
<img src={imageURL} alt={title} /> <img src={imageURL} alt={title} />