1
0
cvsa/packages/solid/src/routes/song/[id]/info.tsx
alikia2x 3dd5e77d39 add: a logo that respond to color scheme changes
modified the layout
fixed the navigation rail on mobile
2025-08-04 00:50:20 +08:00

65 lines
2.6 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

import { Layout } from "~/components/shell/Layout";
import { Card, CardContent, CardMedia, Typography } from "@m3-components/solid";
import LogoLight from "/icons/zh/appbar_desktop_light.svg";
import LogoDark from "/icons/zh/appbar_desktop_dark.svg";
import { DynamicImage } from "~/components/utils/DynamicImage";
export default function Info() {
return (
<Layout>
<title></title>
<div
class="w-full sm:w-120 sm:mx-auto lg:w-full lg:grid lg:grid-cols-[1fr_560px_minmax(300px,_1fr)]
xl:grid-cols-[1fr_648px_1fr]"
>
<nav class="hidden opacity-0 pointer-events-none lg:block xl:opacity-100 xl:pointer-events-auto pt-4">
<DynamicImage class="hidden xl:block 2xl:w-8/9" darkSrc={LogoDark} lightSrc={LogoLight} />
</nav>
<main class="mt-14 lg:mt-8 sm:pl-6 lg:pl-0">
<Card variant="outlined" class="w-full">
<CardMedia
round={false}
src="https://i0.hdslb.com/bfs/archive/8ad220336f96e4d2ea05baada3bc04592d56b2a5.jpg"
referrerpolicy="no-referrer"
class="w-full"
/>
<CardContent>
<Typography.Display class="mb-3" variant="small">
</Typography.Display>
<div class="grid grid-cols-2 grid-rows-3 gap-1">
<Typography.Body variant="large">稿</Typography.Body>
<Typography.Body variant="large">4:28</Typography.Body>
<Typography.Body variant="large"></Typography.Body>
<Typography.Body variant="large">
<span class="inline-flex gap-2">
<a href="https://www.bilibili.com/video/BV1eaq9Y3EVV/"></a>
<a href="https://vocadb.net/S/742394">VocaDB</a>
</span>
</Typography.Body>
<Typography.Body variant="large">2024-12-15 12:15:00</Typography.Body>
<Typography.Body variant="large">1.24 (12,422)</Typography.Body>
</div>
</CardContent>
</Card>
<article class="mt-6">
<Typography.Headline variant="medium"></Typography.Headline>
<Typography.Body class="mt-2" variant="large">
<span class="font-medium"></span><a href="#"></a>
<span>
&VeryThinSpace;2024&VeryThinSpace;&VeryThinSpace;12&VeryThinSpace;&VeryThinSpace;15&VeryThinSpace;
</span>
稿
<a href="#"></a>&ThinSpace;<a href="#">Synthesizer V</a>&ThinSpace;
<span></span>
<span></span>, <a href="#"></a>
</Typography.Body>
</article>
</main>
<nav></nav>
</div>
</Layout>
);
}