File size: 1,583 Bytes
bc4a7e8 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | "use client";
import useEmailPrivacyStore from "@/store/emailPrivacyStore";
import { useTranslations } from "next-intl";
/**
* EmailPrivacyToggle — A toggle button (eye icon) for global email visibility.
*
* When emails are hidden (default), displays a closed-eye icon.
* When active, displays an open-eye icon and all masked emails become fully visible.
*
* Accepts an optional `size` prop: "sm" (default) for inline use, "md" for page headers.
*/
export default function EmailPrivacyToggle({ size = "sm" }: { size?: "sm" | "md" }) {
const { emailsVisible, toggleEmailVisibility } = useEmailPrivacyStore();
const t = useTranslations("providers");
const iconSize = size === "md" ? "text-[20px]" : "text-[16px]";
const sizeClass = size === "md" ? "h-10 w-10" : "h-8 w-8";
const label = emailsVisible ? t("hideEmails") : t("showEmails");
return (
<button
type="button"
onClick={toggleEmailVisibility}
className={`inline-flex ${sizeClass} items-center justify-center rounded transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary ${
emailsVisible
? "bg-primary/15 text-primary hover:bg-primary/25"
: "text-text-muted hover:bg-sidebar hover:text-primary"
}`}
title={label}
aria-label={label}
aria-pressed={emailsVisible}
>
<span className={`material-symbols-outlined ${iconSize} leading-none`}>
{emailsVisible ? "visibility" : "visibility_off"}
</span>
</button>
);
}
|