[Stream] Chapters in collapsible details

Author: kodster28

src/components/Stream.astro

@@ -2,6 +2,7 @@
 import { z } from "astro:schema";
 import { Badge } from "@astrojs/starlight/components";
 import parse from "parse-duration";
+import Details from "./Details.astro";
 
 type Props = z.input<typeof props>;
 
@@ -53,42 +54,43 @@ if (thumbnail) {
 
 		{
 			chapters && (
-				<p>
-					<strong>Chapters</strong>
-					<ul class="flex list-none gap-4 overflow-x-scroll pb-4 pl-0">
-						{Object.entries(chapters).map(([chapter, time]) => {
-							const totalSeconds = parse(time, "s");
-
-							const thumbnail = new URL(thumbnailUrl);
-							thumbnail.searchParams.set("fit", "crop");
-							thumbnail.searchParams.set("time", `${totalSeconds}s`);
-
-							return (
-								<li class="mt-0!">
-									<button
-										class="flex h-full w-36 cursor-pointer flex-col rounded-sm border border-gray-200 bg-transparent p-4 dark:border-gray-700"
-										data-chapter={chapter}
-										data-time={totalSeconds}
-									>
-										<img
-											src={thumbnail.toString()}
-											alt={chapter}
-											width="120"
-											height="64"
-											class="border-accent bg-accent/10 rounded-sm border"
-										/>
-										<div class="flex h-full flex-col items-center justify-between">
-											<strong class="line-clamp-2 text-xs" title={chapter}>
-												{chapter}
-											</strong>
-											<Badge text={time} variant="tip" class="w-fit" />
-										</div>
-									</button>
-								</li>
-							);
-						})}
-					</ul>
-				</p>
+				<Details header="Chapters" open={false}>
+					<p>
+						<ul class="flex list-none gap-4 overflow-x-scroll pb-4 pl-0">
+							{Object.entries(chapters).map(([chapter, time]) => {
+								const totalSeconds = parse(time, "s");
+
+								const thumbnail = new URL(thumbnailUrl);
+								thumbnail.searchParams.set("fit", "crop");
+								thumbnail.searchParams.set("time", `${totalSeconds}s`);
+
+								return (
+									<li class="mt-0!">
+										<button
+											class="flex h-full w-36 cursor-pointer flex-col rounded-sm border border-gray-200 bg-transparent p-4 dark:border-gray-700"
+											data-chapter={chapter}
+											data-time={totalSeconds}
+										>
+											<img
+												src={thumbnail.toString()}
+												alt={chapter}
+												width="120"
+												height="64"
+												class="border-accent bg-accent/10 rounded-sm border"
+											/>
+											<div class="flex h-full flex-col items-center justify-between">
+												<strong class="line-clamp-2 text-xs" title={chapter}>
+													{chapter}
+												</strong>
+												<Badge text={time} variant="tip" class="w-fit" />
+											</div>
+										</button>
+									</li>
+								);
+							})}
+						</ul>
+					</p>
+				</Details>
 			)
 		}