46 lines
1.9 KiB
TypeScript
46 lines
1.9 KiB
TypeScript
import clsx from "clsx";
|
|
import { FeatherSearch } from "@subframe/core";
|
|
import { useTranslation } from "react-i18next";
|
|
import { cn } from "~/lib/utils";
|
|
import { Button } from "../button";
|
|
|
|
interface Props {
|
|
size?: "xs" | "sm" | "md";
|
|
onClick: () => void;
|
|
className?: string;
|
|
placeholder?: string;
|
|
}
|
|
|
|
// Subframe migration (strangler shim): this is NOT an editable field — it is a button
|
|
// styled like a search box that triggers `onClick` (e.g. opens a search modal/palette).
|
|
// It therefore maps to the already-migrated Subframe `Button` shim (variant="outline")
|
|
// rather than Subframe's TextInput/SearchInput. The inline SVG is replaced by the
|
|
// design-system FeatherSearch icon. Public API (size/onClick/className/placeholder) is
|
|
// preserved exactly. See docs/subframe/COMPONENT-MAPPING.md.
|
|
export default function InputSearchButton({ size = "md", onClick, className, placeholder }: Props) {
|
|
const { t } = useTranslation();
|
|
return (
|
|
<div className={clsx("flex justify-between space-x-2")}>
|
|
<div className="relative flex w-full flex-auto items-center justify-center">
|
|
<div className="text-muted-foreground pointer-events-none absolute inset-y-0 flex items-center justify-center focus-within:z-10 lg:left-0 lg:pl-3">
|
|
<FeatherSearch className={cn(size === "xs" && "size-2", size === "sm" && "size-3.5", size === "md" && "size-4")} />
|
|
</div>
|
|
<Button
|
|
type="button"
|
|
onClick={onClick}
|
|
variant="outline"
|
|
className={cn(
|
|
"text-muted-foreground w-full justify-start text-left font-normal",
|
|
className,
|
|
size === "xs" && "h-7 text-xs lg:pl-8",
|
|
size === "sm" && "h-8 text-sm lg:pl-8",
|
|
size === "md" && "lg:pl-9"
|
|
)}
|
|
>
|
|
<span className="hidden text-xs lg:flex">{placeholder ?? t("shared.searchDot")}</span>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|