52 lines
1.5 KiB
TypeScript
52 lines
1.5 KiB
TypeScript
import React from 'react';
|
|
|
|
import { RiEyeLine, RiEyeOffLine } from '@remixicon/react';
|
|
|
|
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
|
|
import { Button } from '@/components/ui/button';
|
|
|
|
export type PreviewToggleButtonProps = {
|
|
/** Current mode - determines which icon is displayed */
|
|
currentMode: 'preview' | 'edit';
|
|
/** Callback fired when toggle button is clicked */
|
|
onToggle: () => void;
|
|
};
|
|
|
|
/**
|
|
* PreviewToggleButton - A toggle button for switching between preview and edit modes.
|
|
*
|
|
* Displays an eye icon when in preview mode (indicating the content is visible/read-only)
|
|
* and a slashed eye icon when in edit mode (indicating the content can be edited).
|
|
*/
|
|
export const PreviewToggleButton: React.FC<PreviewToggleButtonProps> = ({
|
|
currentMode,
|
|
onToggle,
|
|
}) => {
|
|
const isPreview = currentMode === 'preview';
|
|
const ariaLabel = isPreview ? 'Switch to edit mode' : 'Switch to preview mode';
|
|
const tooltipText = isPreview ? 'Edit' : 'Preview';
|
|
|
|
return (
|
|
<Tooltip delayDuration={500}>
|
|
<TooltipTrigger asChild>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
onClick={onToggle}
|
|
aria-label={ariaLabel}
|
|
className="size-8"
|
|
>
|
|
{isPreview ? (
|
|
<RiEyeLine className="size-4" aria-hidden="true" />
|
|
) : (
|
|
<RiEyeOffLine className="size-4" aria-hidden="true" />
|
|
)}
|
|
</Button>
|
|
</TooltipTrigger>
|
|
<TooltipContent sideOffset={8}>
|
|
{tooltipText}
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
);
|
|
};
|