2023-01-07 22:23:33 +01:00
|
|
|
---
|
|
|
|
import BaseLayout from './BaseLayout.astro';
|
|
|
|
|
|
|
|
import type { PlaylistSnapshot } from '../models/playlist-snapshot';
|
|
|
|
|
2023-01-08 13:40:32 +01:00
|
|
|
interface Props {
|
|
|
|
playlist: PlaylistSnapshot | null;
|
|
|
|
title: string;
|
|
|
|
description: string;
|
2023-01-07 22:23:33 +01:00
|
|
|
}
|
2023-01-08 13:40:32 +01:00
|
|
|
|
|
|
|
const { playlist, title, description } = Astro.props as Props;
|
2023-01-07 22:23:33 +01:00
|
|
|
---
|
|
|
|
|
2023-01-08 13:40:32 +01:00
|
|
|
<BaseLayout title={title} description={description}>
|
2023-01-07 22:23:33 +01:00
|
|
|
<div class="mt-24 text-center flex flex-col gap-5 items-center">
|
|
|
|
{
|
|
|
|
playlist ? (
|
|
|
|
<h1 class="font-bold text-4xl">
|
|
|
|
<a href={playlist.url} target="_blank" rel="noopener noreferrer">
|
2023-01-08 13:40:32 +01:00
|
|
|
{title}
|
2023-01-07 22:23:33 +01:00
|
|
|
</a>
|
|
|
|
by
|
|
|
|
<a
|
|
|
|
href={playlist.owner.url}
|
|
|
|
target="_blank"
|
|
|
|
rel="noopener noreferrer"
|
|
|
|
>
|
|
|
|
{playlist.owner.name}
|
|
|
|
</a>
|
|
|
|
</h1>
|
|
|
|
<p class="text-lg">{description}</p>
|
|
|
|
<div class="tabs">
|
|
|
|
<a class="tab text-base">
|
|
|
|
<i class="fa-solid fa-calendar mr-3" />
|
|
|
|
Browse snapshots
|
|
|
|
</a>
|
|
|
|
<a class="tab text-base">
|
|
|
|
<i class="fa-solid fa-plus-minus mr-3" />
|
|
|
|
Compare snapshots
|
|
|
|
</a>
|
|
|
|
<a class="tab text-base">
|
|
|
|
<i class="fa-solid fa-chart-line mr-3" />
|
|
|
|
Show statistics
|
|
|
|
</a>
|
|
|
|
</div>
|
|
|
|
<slot />
|
|
|
|
) : (
|
2023-01-08 13:40:32 +01:00
|
|
|
<div class="alert alert-error max-w-md justify-center shadow-lg">
|
|
|
|
<span>{description}</span>
|
|
|
|
</div>
|
2023-01-07 22:23:33 +01:00
|
|
|
)
|
|
|
|
}
|
|
|
|
</div>
|
|
|
|
</BaseLayout>
|