Select Model

pnpm add @base-ui-components/react

import type React from "react";
import { motion } from "motion/react";
import { Select } from "@base-ui-components/react";
import { Check, ChevronDown } from "lucide-react";
import { cn } from "@/lib/utils";
 
const exampleData = [
  "ChatGPT 4o",
  "ChatGPT 4o-mini",
  "ChatGPT 4-turbo",
  "ChatGPT o1",
  "ChatGPT o1-mini",
];
 
function generateLetters(value: string) {
  const letterCount = new Map<string, number>();
  return value.split("").map((letter) => {
    const count = letterCount.get(letter) || 0;
    const key = `${letter}-${count}`;
    letterCount.set(letter, count + 1);
    return { letter, key };
  });
}
 
function SelectModel() {
  return (
    <Select.Root defaultValue={exampleData[0]} alignItemToTrigger={false}>
      <Select.Trigger className="relative flex h-10 items-center justify-between gap-3 text-sm rounded-md pr-3 pl-3.5 select-none hover:bg-neutral-100 focus-visible:outline-none focus-visible:-outline-offset-1 active:bg-neutral-100 data-[popup-open]:bg-neutral-100">
        <Select.Value placeholder="Select Model">
          {(value) => (
            <>
              <span className="sr-only">{value}</span>
              {generateLetters(value).map(({ letter, key }) => (
                <motion.span
                  aria-hidden
                  key={key}
                  layoutId={key}
                  className="inline-block"
                  transition={{ type: "spring", bounce: 0.35 }}
                >
                  {letter.trim() || "\u00A0"}
                </motion.span>
              ))}
            </>
          )}
        </Select.Value>
        <Select.Icon className="flex">
          <ChevronDown className="size-4" />
        </Select.Icon>
      </Select.Trigger>
      <Select.Portal>
        <Select.Positioner className="outline-none" sideOffset={8}>
          <Select.Popup className="group origin-[var(--transform-origin)] rounded-md bg-white py-1 shadow-lg outline outline-neutral-200 transition-[transform,scale,opacity] data-[ending-style]:scale-100 data-[ending-style]:opacity-100 data-[ending-style]:transition-none data-[starting-style]:scale-95 data-[starting-style]:opacity-0 data-[side=none]:data-[starting-style]:scale-100 data-[side=none]:data-[starting-style]:opacity-100 data-[side=none]:data-[starting-style]:transition-none">
            {exampleData.map((item) => (
              <SelectItem value={item} key={item}>
                {item}
              </SelectItem>
            ))}
          </Select.Popup>
        </Select.Positioner>
      </Select.Portal>
    </Select.Root>
  );
}
 
function SelectItem({
  className,
  children,
  ...props
}: React.ComponentPropsWithRef<typeof Select.Item>) {
  return (
    <Select.Item
      className={cn(
        "grid min-w-[var(--anchor-width)] cursor-default grid-cols-[1fr_0.75rem] items-center gap-2 py-2 pr-4 pl-2.5 text-sm leading-4 outline-none select-none group-data-[side=none]:min-w-[calc(var(--anchor-width)+1rem)] group-data-[side=none]:pr-12 group-data-[side=none]:text-base group-data-[side=none]:leading-4 data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-gray-50 data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-gray-900",
        className
      )}
      {...props}
    >
      <Select.ItemText>{children}</Select.ItemText>
      <Select.ItemIndicator>
        <Check className="size-3" />
      </Select.ItemIndicator>
    </Select.Item>
  );
}
 
export { SelectModel };