Bottom Sheet Demo

1"use client";
2 
3import { useState } from "react";
4import {
5  BottomSheet,
6  BottomSheetContent,
7  BottomSheetDescription,
8  BottomSheetList,
9  BottomSheetPanel,
10  BottomSheetRow,
11  BottomSheetTitle,
12  BottomSheetTrigger,
13} from "@/components/sora-ui/radix/bottom-sheet";
14 
15interface SettingsState {
16  preloader: boolean;
17  showLabels: boolean;
18  sound: boolean;
19  systemTheme: boolean;
20  theme: "dark" | "light";
21}
22 
23const initialSettings: SettingsState = {
24  preloader: true,
25  showLabels: false,
26  theme: "dark",
27  systemTheme: true,
28  sound: false,
29};
30 
31export default function BottomSheetDemo() {
32  const [open, setOpen] = useState(false);
33  const [settings, setSettings] = useState(initialSettings);
34 
35  return (
36    <BottomSheet onOpenChange={setOpen} open={open}>
37      <BottomSheetTrigger className="rounded-lg border border-border bg-card px-4 py-2 font-medium text-sm">
38        Open settings
39      </BottomSheetTrigger>
40      <BottomSheetContent
41        className="max-w-[361px]"
42        defaultSnap={0}
43        showHandle={false}
44        snapPoints={["auto"]}
45      >
46        <BottomSheetTitle>Settings</BottomSheetTitle>
47        <BottomSheetDescription>
48          Toggle preloader, labels, theme, and sound.
49        </BottomSheetDescription>
50        <BottomSheetPanel>
51          <BottomSheetList>
52            <BottomSheetRow
53              label="preloader"
54              onClick={() =>
55                setSettings((s) => ({ ...s, preloader: !s.preloader }))
56              }
57              value={String(settings.preloader)}
58            />
59            <BottomSheetRow
60              label="show labels"
61              onClick={() =>
62                setSettings((s) => ({ ...s, showLabels: !s.showLabels }))
63              }
64              value={String(settings.showLabels)}
65            />
66            <BottomSheetRow
67              label="theme"
68              onClick={() =>
69                setSettings((s) => ({
70                  ...s,
71                  theme: s.theme === "dark" ? "light" : "dark",
72                }))
73              }
74              value={settings.theme}
75            />
76            <BottomSheetRow
77              label="system theme"
78              onClick={() =>
79                setSettings((s) => ({ ...s, systemTheme: !s.systemTheme }))
80              }
81              value={settings.systemTheme ? "on" : "off"}
82            />
83            <BottomSheetRow
84              label="sound"
85              onClick={() => setSettings((s) => ({ ...s, sound: !s.sound }))}
86// … truncated