import {
  TagInput,
  TagInputBadge,
  TagInputBox,
  TagInputContainer,
} from "@/registry/ui/tag-input";
import { useState } from "react";
 
const Component = () => {
  const [values, setValues] = useState<string[]>([]);
  return (
    <TagInput
      values={values}
      onValuesChange={setValues}
      size="lg"
      confirmKey="enter"
      disabled
    >
      <TagInputContainer>
        <TagInputBox placeholder="Add a tag" />
      </TagInputContainer>
      <div className="flex flex-wrap gap-1.5">
        {values.map((value) => (
          <TagInputBadge key={value} value={value}>
            <span className="truncate">{value}</span>
          </TagInputBadge>
        ))}
      </div>
    </TagInput>
  );
};