Liquid Metal

import { ArrowUp, ChevronDown, Plus } from "lucide-react"
import { MetalFx } from "@/components/ui/metal-fx"

// Silver preset — MetalFx on the send button of a full chat composer.
const chip =
  "inline-flex items-center gap-1 h-9 rounded-full bg-white/[0.04] text-[#caccd2] text-xs leading-[14px] font-medium shadow-[inset_0_0_0_1px_#ffffff0d,inset_0_1px_0_0_#ffffff0a]"

export default function MetalFxSilverComposerDemo() {
  return (
    <div className="flex min-h-[440px] w-full items-center justify-center bg-[#070707] p-8">
      <div className="flex w-[448px] max-w-full flex-col rounded-[20px] bg-[#1d1d1db3] px-4 pb-4 pt-5">
        <textarea
          rows={1}
          readOnly
          aria-label="Build anything..."
          placeholder="Build anything..."
          className="mb-4 w-full resize-none border-none bg-transparent p-0 text-sm leading-4 text-[#fbfbfb] outline-none placeholder:text-[#4e4e4e]"
        />
        <div className="mt-auto flex items-center gap-3">
          <button
            aria-label="Add"
            className="flex size-9 min-w-9 items-center justify-center rounded-full bg-white/[0.04] text-[#caccd2] shadow-[inset_0_0_0_1px_#ffffff0d,inset_0_1px_0_0_#ffffff0a]"
          >
            <Plus className="size-4" />
          </button>
          <div className="flex-1" />
          <button className={`${chip} pl-3.5 pr-2.5`}>
            <span>Agent</span>
            <ChevronDown className="size-4 text-[#8e8e8e]" />
          </button>
          <button className={`${chip} pl-3.5 pr-2.5`}>
            <span>Auto</span>
            <ChevronDown className="size-4 text-[#8e8e8e]" />
          </button>
          <MetalFx preset="silver" variant="circle" strength={1} theme="dark">
            <button
              aria-label="Send"
              className="flex size-10 items-center justify-center rounded-full bg-[#1d1d1d] text-[#fbfbfb]"
            >
              <ArrowUp className="size-4" />
            </button>
          </MetalFx>
        </div>
      </div>
    </div>
  )
}