8-bit Audio Settings

1import { cn } from "@/lib/utils";
2 
3import {
4  Card,
5  CardContent,
6  CardHeader,
7  CardTitle,
8} from "@/components/ui/8bit/card";
9import { Label } from "@/components/ui/8bit/label";
10import { Slider } from "@/components/ui/8bit/slider";
11import { Switch } from "@/components/ui/8bit/switch";
12 
13export default function AudioSettings({
14  className,
15  ...props
16}: React.ComponentProps<"div">) {
17  return (
18    <div className={cn("flex flex-col gap-6", className)} {...props}>
19      <Card>
20        <CardHeader>
21          <CardTitle className="text-sm font-medium">Audio Settings</CardTitle>
22        </CardHeader>
23        <CardContent className="space-y-4">
24          <div className="space-y-4">
25            <Label htmlFor="volume">Master Volume</Label>
26            <Slider
27              id="volume"
28              defaultValue={[75]}
29              max={100}
30              step={1}
31              className="w-full"
32            />
33          </div>
34          <div className="space-y-4">
35            <Label htmlFor="sfx">SFX Volume</Label>
36            <Slider
37              id="sfx"
38              defaultValue={[60]}
39              max={100}
40              step={1}
41              className="w-full"
42            />
43          </div>
44          <div className="flex items-center justify-between">
45            <Label htmlFor="mute">Mute Audio</Label>
46            <Switch id="mute" />
47          </div>
48          <div className="flex items-center justify-between">
49            <Label htmlFor="vibration">Vibration</Label>
50            <Switch id="vibration" defaultChecked />
51          </div>
52        </CardContent>
53      </Card>
54    </div>
55  );
56}