hamid zarghami
34 lines
1.0 KiB
TypeScript
34 lines
1.0 KiB
TypeScript
import { clx } from "@/helpers/utils";
|
|
import { SearchNormal1 } from "iconsax-react";
|
|
import { type FC } from "react";
|
|
|
|
export type ZoomButtonProps = {
|
|
isActive: boolean;
|
|
onToggle: () => void;
|
|
};
|
|
|
|
const ZoomButton: FC<ZoomButtonProps> = ({ isActive, onToggle }) => (
|
|
<button
|
|
type="button"
|
|
onClick={onToggle}
|
|
aria-label={isActive ? "غیرفعال کردن ذرهبین" : "فعال کردن ذرهبین"}
|
|
aria-pressed={isActive}
|
|
title={isActive ? "غیرفعال کردن ذرهبین" : "فعال کردن ذرهبین"}
|
|
className={clx(
|
|
"p-2 md:p-2 min-h-11 min-w-11 md:min-h-0 md:min-w-0 inline-flex items-center justify-center rounded-full transition-all",
|
|
isActive
|
|
? "bg-gray-200 ring-2 ring-gray-400 hover:bg-gray-200"
|
|
: "hover:bg-gray-100 active:bg-gray-200",
|
|
)}
|
|
>
|
|
<SearchNormal1
|
|
color="black"
|
|
size={20}
|
|
variant={isActive ? "Bold" : "Outline"}
|
|
className="text-gray-700 md:w-6 md:h-6"
|
|
/>
|
|
</button>
|
|
);
|
|
|
|
export default ZoomButton;
|