button-group-select-demo

1"use client";
2
3import * as React from "react";
4import { ArrowRightIcon, ChevronsUpDownIcon } from "lucide-react";
5
6import { Button } from "@/registry/pure-ui/ui/button";
7import { ButtonGroup } from "@/registry/pure-ui/ui/button-group";
8import { Input } from "@/registry/pure-ui/ui/input";
9import {
10  Select,
11  SelectPopup,
12  SelectItem,
13  SelectTrigger,
14  SelectValue,
15  SelectList,
16  SelectIcon,
17} from "@/registry/pure-ui/ui/select";
18
19interface Currency {
20  value: string;
21  label: string;
22}
23
24const CURRENCIES = [
25  {
26    value: "$",
27    label: "US Dollar",
28  },
29  {
30    value: "€",
31    label: "Euro",
32  },
33  {
34    value: "£",
35    label: "British Pound",
36  },
37];
38
39export function ButtonGroupSelectDemo() {
40  return (
41    <ButtonGroup>
42      <ButtonGroup>
43        <Select
44          defaultValue={CURRENCIES[0]}
45          itemToStringValue={(currency) => (currency as Currency)?.value}
46        >
47          <SelectTrigger className="w-fit min-w-none">
48            <SelectValue>{(currency: Currency) => currency.value}</SelectValue>
49            <SelectIcon>
50              <ChevronsUpDownIcon className="size-3.5" />
51            </SelectIcon>
52          </SelectTrigger>
53          <SelectPopup className="min-w-48" alignItemWithTrigger>
54            <SelectList>
55              {CURRENCIES.map((curr) => (
56                <SelectItem key={curr.value} value={curr}>
57                  {curr.value}{" "}
58                  <span className="text-muted-foreground">{curr.label}</span>
59                </SelectItem>
60              ))}
61            </SelectList>
62          </SelectPopup>
63        </Select>
64        <Input placeholder="10.00" pattern="[0-9]*" />
65      </ButtonGroup>
66      <ButtonGroup>
67        <Button aria-label="Send" size="icon" variant="outline">
68          <ArrowRightIcon />
69        </Button>
70      </ButtonGroup>
71    </ButtonGroup>
72  );
73}