52 lines
1.8 KiB
TypeScript
52 lines
1.8 KiB
TypeScript
import React from 'react';
|
|
import { Menu } from './components/menu';
|
|
import { Sidebar } from './components/sidebar';
|
|
import { PodcastEmptyPlaceholder } from './components/podcast-empty-placeholder';
|
|
import { AlbumArtwork } from './components/album-artwork';
|
|
import { listenNowAlbums, madeForYouAlbums } from './data/albums';
|
|
import { playlists } from './data/playlists';
|
|
|
|
export default function TemplatesPage() {
|
|
return (
|
|
<div className="min-h-screen bg-white">
|
|
<Menu />
|
|
<div className="flex">
|
|
<div className="w-64 border-r border-gray-200">
|
|
<Sidebar playlists={playlists} />
|
|
</div>
|
|
<div className="flex-1 p-4 overflow-auto">
|
|
<div className="mb-8">
|
|
<h2 className="text-2xl font-bold">Listen Now</h2>
|
|
<p className="text-gray-500">Top picks for you. Updated daily.</p>
|
|
<div className="flex overflow-x-auto py-4 space-x-4">
|
|
{listenNowAlbums.map((album) => (
|
|
<AlbumArtwork
|
|
key={album.name}
|
|
album={album}
|
|
width={250}
|
|
height={330}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<div className="mb-8">
|
|
<h2 className="text-2xl font-bold">Made for You</h2>
|
|
<p className="text-gray-500">Your personal playlists. Updated daily.</p>
|
|
<div className="flex overflow-x-auto py-4 space-x-4">
|
|
{madeForYouAlbums.map((album) => (
|
|
<AlbumArtwork
|
|
key={album.name}
|
|
album={album}
|
|
width={150}
|
|
height={150}
|
|
aspectRatio="square"
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<PodcastEmptyPlaceholder />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|