Bohdan Triapitsyn
14357257ae
Replace @remixicon/react with a shared Icon component that renders via <use href> references to a single hidden SVG sprite. This reduces DOM node count by replacing inline SVGs with lightweight references. - Create Icon component with sprite injection (packages/ui/src/components/icon/) - Migrate all 164 files from @remixicon/react to Icon component - Auto-generate sprite data from remixicon bundle (scripts/generate-icon-sprite.mjs) - Add bun run icons:generate to package.json - Move @remixicon/react to devDependencies - Add icon usage instructions to theme-system skill
51 lines
1.5 KiB
TypeScript
51 lines
1.5 KiB
TypeScript
import React from 'react';
|
|
|
|
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Icon } from "@/components/icon/Icon";
|
|
|
|
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>
|
|
<TooltipTrigger asChild>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={onToggle}
|
|
aria-label={ariaLabel}
|
|
className="h-5 w-5 p-0"
|
|
>
|
|
{isPreview ? (
|
|
<Icon name="eye" className="size-4" aria-hidden="true"/>
|
|
) : (
|
|
<Icon name="eye-off" className="size-4" aria-hidden="true"/>
|
|
)}
|
|
</Button>
|
|
</TooltipTrigger>
|
|
<TooltipContent sideOffset={8}>
|
|
{tooltipText}
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
);
|
|
};
|