Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 43 44 45 46 47 | 1x 5x 10x 1x | import { Eye, PenLine } from 'lucide-react';
import type { ReactNode } from 'react';
export type EditorMode = 'preview' | 'wysiwyg';
interface ToolbarProps {
mode: EditorMode;
onModeChange: (mode: EditorMode) => void;
}
const MODES: { key: EditorMode; label: string; icon: ReactNode }[] = [
{ key: 'preview', label: '预览', icon: <Eye size={14} /> },
{ key: 'wysiwyg', label: '编辑', icon: <PenLine size={14} /> },
];
export function Toolbar({ mode, onModeChange }: ToolbarProps) {
return (
<div className="sticky top-0 z-50 flex items-center justify-end px-3 py-1.5 border-b border-cursor-stroke-tertiary backdrop-blur-sm" style={{ backgroundColor: 'var(--color-vsc-bg)' }}>
<div className="flex gap-0.5 rounded-md p-0.5" style={{ background: 'var(--color-cursor-bg-tertiary)' }}>
{MODES.map(m => (
<button
key={m.key}
className={`flex items-center gap-1 px-2.5 py-1 border-none rounded-sm text-xs cursor-pointer transition-all duration-150 whitespace-nowrap leading-none ${
mode === m.key
? 'text-cursor-text-primary shadow-sm'
: 'text-cursor-text-tertiary bg-transparent hover:text-cursor-text-primary'
}`}
style={mode === m.key ? {
color: 'var(--color-cursor-text-primary)',
background: 'var(--color-vsc-bg)',
boxShadow: '0 1px 2px rgba(0,0,0,0.1)',
} : {
color: 'var(--color-cursor-text-tertiary)',
background: 'transparent',
}}
onClick={() => onModeChange(m.key)}
title={m.label}
>
<span className="leading-none">{m.icon}</span>
<span className="text-[11px] font-medium">{m.label}</span>
</button>
))}
</div>
</div>
);
}
|