magnifier

2026-07-01 11:17:08 +03:30
parent 39e18c3331
commit 85ba8e4261
10 changed files with 585 additions and 22 deletions
@@ -0,0 +1,33 @@
+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;