feat(ui): add markdown preview toggle for FilesView (#224)

2026-01-27 09:15:00 +02:00
parent 6656816101
commit 5a4c291dc0
2 changed files with 124 additions and 2 deletions
@@ -0,0 +1,51 @@
+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>
+  );
+};