53 lines
2.6 KiB
TypeScript
53 lines
2.6 KiB
TypeScript
import { PlayIcon, SpeakerWaveIcon } from "@heroicons/react/24/solid";
|
|
import type { Tag } from "@prisma/client";
|
|
import { Link, useLocation } from "@remix-run/react";
|
|
import { ListenLink } from "~/components/page-layout";
|
|
import type { StationWithTagsClientSide } from "~/models/station.server";
|
|
import { getStationUrl, type ConvertDatesToStrings } from "~/utils";
|
|
|
|
export type StationsGalleryProps = {
|
|
stations: StationWithTagsClientSide[];
|
|
tag?: ConvertDatesToStrings<Tag>;
|
|
};
|
|
|
|
export function StationsGallery({ stations, tag }: StationsGalleryProps) {
|
|
const location = useLocation();
|
|
const currentStationId = new URLSearchParams(location.search).get('station')?.trim()
|
|
return (
|
|
<div className="grid grid-cols-1 md:grid-cols-3 xl:grid-cols-4 gap-4">
|
|
{stations.map((station) => {
|
|
return (
|
|
<div key={station.id} className="card card-compact bg-base-100 shadow-xl mb-[70px]">
|
|
<figure><img src={station.imgUrl} alt="Radio Station" /></figure>
|
|
<div className="card-body">
|
|
<div className="flex items-center justify-start gap-2">
|
|
<h2 className="card-title">
|
|
{station.name}
|
|
</h2>
|
|
{station.id === currentStationId ? <div className="w-4 h-4">
|
|
<SpeakerWaveIcon />
|
|
</div> : null}
|
|
</div>
|
|
<h2 className="flex gap-1">
|
|
{station.tags.map((t, id) => {
|
|
return <ListenLink key={id} to={`/listen/tag/${t.tag.slug}`}
|
|
className="badge badge-secondary">{t.tag.name}</ListenLink>;
|
|
})}
|
|
</h2>
|
|
<p>{station.description}</p>
|
|
<div className="card-actions justify-end">
|
|
<Link preventScrollReset to={getStationUrl(station.id, tag)}
|
|
className={`btn btn-primary gap-2 plausible-event-name=play-station plausible-event-station=${station.slug}`}>
|
|
<PlayIcon className="h-6 w-6" />
|
|
Listen Now
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
})}
|
|
</div>
|
|
);
|
|
}
|