button-group-input-group-demo

1"use client";
2
3import { useState } from "react";
4import { AudioLinesIcon, PlusIcon } from "lucide-react";
5
6import { Button } from "@/registry/pure-ui/ui/button";
7import { ButtonGroup } from "@/registry/pure-ui/ui/button-group";
8import {
9  InputGroup,
10  InputGroupAddon,
11  InputGroupButton,
12  InputGroupInput,
13} from "@/registry/pure-ui/ui/input-group";
14import {
15  Tooltip,
16  TooltipPopup,
17  TooltipTrigger,
18} from "@/registry/pure-ui/ui/tooltip";
19
20export function ButtonGroupInputGroupDemo() {
21  const [voiceEnabled, setVoiceEnabled] = useState(false);
22
23  return (
24    <ButtonGroup className="[--radius:9999rem]">
25      <ButtonGroup>
26        <Button variant="outline" size="icon">
27          <PlusIcon />
28        </Button>
29      </ButtonGroup>
30      <ButtonGroup>
31        <InputGroup>
32          <InputGroupInput
33            placeholder={
34              voiceEnabled ? "Record and send audio..." : "Send a message..."
35            }
36            disabled={voiceEnabled}
37          />
38          <InputGroupAddon align="inline-end">
39            <Tooltip>
40              <TooltipTrigger
41                render={
42                  <InputGroupButton
43                    onClick={() => setVoiceEnabled(!voiceEnabled)}
44                    size="icon-xs"
45                    data-active={voiceEnabled}
46                    className="data-[active=true]:bg-orange-100 data-[active=true]:text-orange-700 dark:data-[active=true]:bg-orange-800 dark:data-[active=true]:text-orange-100"
47                    aria-pressed={voiceEnabled}
48                  />
49                }
50              >
51                <AudioLinesIcon />
52              </TooltipTrigger>
53              <TooltipPopup>Voice Mode</TooltipPopup>
54            </Tooltip>
55          </InputGroupAddon>
56        </InputGroup>
57      </ButtonGroup>
58    </ButtonGroup>
59  );
60}