51 lines
1.2 KiB
TypeScript
51 lines
1.2 KiB
TypeScript
import { ICONS, type StreamingLink } from "@/lib/release";
|
|
import { TrptkLogo } from "../icons/TrptkLogo";
|
|
import { IconButtonLink } from "@/components/IconButton";
|
|
|
|
type Props = {
|
|
releaseName?: string;
|
|
links: StreamingLink[];
|
|
};
|
|
|
|
function StreamingLinkButton({
|
|
link,
|
|
isFirst,
|
|
}: {
|
|
link: StreamingLink;
|
|
isFirst?: boolean;
|
|
}) {
|
|
const Icon = ICONS[link.icon];
|
|
|
|
return (
|
|
<IconButtonLink
|
|
href={link.url}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className={[
|
|
"flex items-center justify-center text-lg",
|
|
isFirst ? "col-span-3" : "aspect-square",
|
|
].join(" ")}
|
|
>
|
|
{isFirst ? <TrptkLogo width={50} /> : <Icon />}
|
|
</IconButtonLink>
|
|
);
|
|
}
|
|
|
|
export function StreamingLinks({ releaseName, links }: Props) {
|
|
if (links.length === 0) return <p>No streaming links yet.</p>;
|
|
|
|
return (
|
|
<div className="text-center">
|
|
<p className="mb-5 text-sm text-lightsec dark:text-darksec">
|
|
Listen to or buy
|
|
<span className="font-silkasb"> {releaseName} </span>on:
|
|
</p>
|
|
|
|
<div className="inline-grid grid-cols-3 gap-3">
|
|
{links.map((l, idx) => (
|
|
<StreamingLinkButton key={l.label} link={l} isFirst={idx === 0} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|