SelectSelect

"use client";

import * as React from "react";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/notchset/select";

const models = [
  { value: "atlas-3-flash", label: "Atlas 3 Flash" },
  { value: "atlas-3", label: "Atlas 3" },
];

export function ModelSelect() {
  const [model, setModel] = React.useState("atlas-3-flash");
  return (
    // onValueChange skips an empty choice, so the same code types in the Base UI and Radix builds.
    <Select value={model} onValueChange={(v) => v && setModel(v)} items={models}>
      {/* A combobox is never named by its text: give the trigger a name (or a <label> pointing at it). */}
      <SelectTrigger aria-label="Model" meta="$0.0007 / RUN">
        <SelectValue />
      </SelectTrigger>
      <SelectContent>
        <SelectItem value="atlas-3-flash" meta="1.9S P50" tag="DEFAULT">
          Atlas 3 Flash
        </SelectItem>
        <SelectItem value="atlas-3" meta="3.2S P50">
          Atlas 3
        </SelectItem>
      </SelectContent>
    </Select>
  );
}

"use client";

import * as React from "react";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/notchset/select";

export function ModelSelect() {
  const [model, setModel] = React.useState("atlas-3-flash");
  return (
    <Select value={model} onValueChange={setModel}>
      <SelectTrigger aria-label="Model" meta="$0.0007 / RUN">
        <SelectValue />
      </SelectTrigger>
      <SelectContent>
        <SelectItem value="atlas-3-flash" meta="1.9S P50" tag="DEFAULT">
          Atlas 3 Flash
        </SelectItem>
        <SelectItem value="atlas-3" meta="3.2S P50">
          Atlas 3
        </SelectItem>
      </SelectContent>
    </Select>
  );
}