Alois
dd09ca943d
All checks were successful
/ deploy (push) Successful in 14m56s
(fix): small ui and layout bug
48 lines
1 KiB
TypeScript
48 lines
1 KiB
TypeScript
import { Button, Tooltip, TooltipContent, TooltipTrigger } from "@tensamin/ui";
|
|
import { toggleDeaf, useCall } from "../../store";
|
|
import { HeadphoneOff, Headphones } from "lucide-react";
|
|
|
|
export default function DeafButton({
|
|
className,
|
|
iconSize,
|
|
tooltip,
|
|
portalContainer,
|
|
}: {
|
|
className?: string;
|
|
iconSize?: number;
|
|
tooltip?: string;
|
|
portalContainer?: HTMLElement;
|
|
}) {
|
|
const deaf = useCall((state) => state.deaf);
|
|
|
|
const button = (
|
|
<Button
|
|
variant={deaf ? "destructive" : "default"}
|
|
onClick={toggleDeaf}
|
|
className={className}
|
|
>
|
|
{deaf ? (
|
|
<HeadphoneOff
|
|
style={{ scale: (iconSize ? iconSize + 100 : 100) + "%" }}
|
|
/>
|
|
) : (
|
|
<Headphones
|
|
style={{ scale: (iconSize ? iconSize + 100 : 100) + "%" }}
|
|
/>
|
|
)}
|
|
</Button>
|
|
);
|
|
|
|
if (!tooltip) {
|
|
return button;
|
|
}
|
|
|
|
return (
|
|
<Tooltip>
|
|
<TooltipTrigger render={button} />
|
|
<TooltipContent portalProps={{ container: portalContainer }}>
|
|
{tooltip}
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
);
|
|
}
|