action-bar-position-demo

1"use client";
2 
3import { Archive, Star, X } from "lucide-react";
4import * as React from "react";
5import {
6  ActionBar,
7  ActionBarClose,
8  ActionBarGroup,
9  ActionBarItem,
10  ActionBarSelection,
11  ActionBarSeparator,
12} from "@/registry/bases/base/ui/action-bar";
13import { Label } from "@/registry/bases/base/ui/label";
14import {
15  Select,
16  SelectContent,
17  SelectItem,
18  SelectTrigger,
19  SelectValue,
20} from "@/registry/bases/base/ui/select";
21import { Switch } from "@/registry/bases/base/ui/switch";
22 
23export default function ActionBarPositionDemo() {
24  const [open, setOpen] = React.useState(false);
25  const [side, setSide] = React.useState<"top" | "bottom">("bottom");
26  const [align, setAlign] = React.useState<"start" | "center" | "end">(
27    "center",
28  );
29 
30  return (
31    <div className="flex flex-col gap-4">
32      <div className="flex items-center gap-2">
33        <Switch id="open" checked={open} onCheckedChange={setOpen} />
34        <Label htmlFor="open">Show Action Bar</Label>
35      </div>
36      <div className="flex items-center gap-2">
37        <Label htmlFor="side" className="w-14">
38          Side
39        </Label>
40        <Select
41          value={side}
42          onValueChange={(value) => setSide(value as "top" | "bottom")}
43        >
44          <SelectTrigger id="side" className="w-28">
45            <SelectValue />
46          </SelectTrigger>
47          <SelectContent>
48            <SelectItem value="top">Top</SelectItem>
49            <SelectItem value="bottom">Bottom</SelectItem>
50          </SelectContent>
51        </Select>
52      </div>
53      <div className="flex items-center gap-2">
54        <Label htmlFor="align" className="w-14">
55          Align
56        </Label>
57        <Select
58          value={align}
59          onValueChange={(value) =>
60            setAlign(value as "start" | "center" | "end")
61          }
62        >
63          <SelectTrigger id="align" className="w-28">
64            <SelectValue />
65          </SelectTrigger>
66          <SelectContent>
67            <SelectItem value="start">Start</SelectItem>
68            <SelectItem value="center">Center</SelectItem>
69            <SelectItem value="end">End</SelectItem>
70          </SelectContent>
71        </Select>
72      </div>
73 
74      <ActionBar open={open} onOpenChange={setOpen} side={side} align={align}>
75        <ActionBarSelection>
76          3 selected
77          <ActionBarSeparator />
78          <ActionBarClose>
79            <X />
80          </ActionBarClose>
81        </ActionBarSelection>
82        <ActionBarSeparator />
83// … truncated