Icon Picker Popover

1"use client";
2 
3import * as React from "react";
4 
5import { Button } from "@/components/ui/button";
6import {
7  Popover,
8  PopoverContent,
9  PopoverTrigger,
10} from "@/components/ui/popover";
11import IconPicker from "@/registry/icon-picker/icon-picker-tanstack";
12 
13export default function Page() {
14  const [isOpen, setIsOpen] = React.useState(false);
15  const [selectedIcon, setSelectedIcon] = React.useState<string | null>(null);
16 
17  return (
18    <Popover onOpenChange={setIsOpen} open={isOpen}>
19      <PopoverTrigger render={<Button />}>
20        {selectedIcon ? `Selected Icon: ${selectedIcon}` : "Icon Picker"}
21      </PopoverTrigger>
22      <PopoverContent className="w-fit p-0">
23        <IconPicker
24          selectedIcon={selectedIcon}
25          setSelectedIcon={setSelectedIcon}
26          className="bg-transparent border-none"
27        />
28      </PopoverContent>
29    </Popover>
30  );
31}