53 lines
2.2 KiB
TypeScript
53 lines
2.2 KiB
TypeScript
import clsx from "clsx";
|
|
import { useTranslation } from "react-i18next";
|
|
import { UI_ACTION_IDS } from "~/application/ui/uiRegistry";
|
|
import { SearchIcon } from "~/components/ui/icons/vendor";
|
|
|
|
interface Props {
|
|
onClick: () => void;
|
|
}
|
|
export default function SearchButton({ onClick }: Props) {
|
|
const { t } = useTranslation();
|
|
return (
|
|
<div className="relative">
|
|
<div className="inline-flex divide-x divide-gray-300 rounded-sm shadow-none">
|
|
<button
|
|
type="button"
|
|
onClick={onClick}
|
|
data-ui-id={UI_ACTION_IDS.search}
|
|
aria-label={t("shared.search")}
|
|
className={clsx(
|
|
"text-muted-foreground bg-secondary hover:bg-secondary/90 border-border relative inline-flex items-center rounded-full border p-2 font-medium shadow-inner focus-visible:z-10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
|
|
)}
|
|
>
|
|
<span className="inline-block h-5 w-5 overflow-hidden rounded-full">
|
|
<SearchIcon className="h-5 w-5" aria-hidden="true" />
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
// <div className="w-full flex md:ml-0">
|
|
// <div className="align-baseline w-full text-slate-200 pl-1">
|
|
// <div className="w-full">
|
|
// <label htmlFor="command-palette" className="sr-only">
|
|
// {t("shared.commandPalette")}
|
|
// </label>
|
|
// <div className="relative text-muted-foreground hover:text-muted-foreground truncate">
|
|
|
|
// <button
|
|
// type="button"
|
|
// onClick={onOpenCommandPalette}
|
|
// className="flex space-x-2 text-left w-full pl-3 pr-3 py-1.5 text-sm sm:py-2 border border-border rounded-md leading-5 bg-secondary text-muted-foreground focus:outline-hidden hover:ring-0 hover:placeholder-gray-500 hover:text-muted-foreground truncate"
|
|
// >
|
|
// <div className="font-medium hidden lg:block">⌘K</div>
|
|
// <div className="hidden lg:block truncate">{t("shared.commandPalette")}</div>
|
|
// <div className="lg:hidden">{t("shared.search")}</div>
|
|
// </button>
|
|
// </div>
|
|
// </div>
|
|
// </div>
|
|
// </div>
|
|
}
|