103 lines
3.1 KiB
TypeScript
103 lines
3.1 KiB
TypeScript
import type { TerminalTheme } from "@/constants/terminal-themes";
|
|
import { TERMINAL_THEMES, TERMINAL_FONTS } from "@/constants/terminal-themes";
|
|
|
|
interface TerminalPreviewProps {
|
|
theme: string;
|
|
fontSize?: number;
|
|
fontFamily?: string;
|
|
cursorStyle?: "block" | "underline" | "bar";
|
|
cursorBlink?: boolean;
|
|
letterSpacing?: number;
|
|
lineHeight?: number;
|
|
}
|
|
|
|
export function TerminalPreview({
|
|
theme = "termix",
|
|
fontSize = 14,
|
|
fontFamily = "Caskaydia Cove Nerd Font Mono",
|
|
cursorStyle = "bar",
|
|
cursorBlink = true,
|
|
letterSpacing = 0,
|
|
lineHeight = 1.2,
|
|
}: TerminalPreviewProps) {
|
|
return (
|
|
<div className="border border-input rounded-md overflow-hidden">
|
|
<div
|
|
className="p-4 font-mono text-sm"
|
|
style={{
|
|
fontSize: `${fontSize}px`,
|
|
fontFamily:
|
|
TERMINAL_FONTS.find((f) => f.value === fontFamily)?.fallback ||
|
|
TERMINAL_FONTS[0].fallback,
|
|
letterSpacing: `${letterSpacing}px`,
|
|
lineHeight,
|
|
background: TERMINAL_THEMES[theme]?.colors.background || "#18181b",
|
|
color: TERMINAL_THEMES[theme]?.colors.foreground || "#f7f7f7",
|
|
}}
|
|
>
|
|
<div>
|
|
<span style={{ color: TERMINAL_THEMES[theme]?.colors.green }}>
|
|
user@termix
|
|
</span>
|
|
<span>:</span>
|
|
<span style={{ color: TERMINAL_THEMES[theme]?.colors.blue }}>~</span>
|
|
<span>$ ls -la</span>
|
|
</div>
|
|
<div>
|
|
<span style={{ color: TERMINAL_THEMES[theme]?.colors.blue }}>
|
|
drwxr-xr-x
|
|
</span>
|
|
<span> 5 user </span>
|
|
<span style={{ color: TERMINAL_THEMES[theme]?.colors.cyan }}>
|
|
docs
|
|
</span>
|
|
</div>
|
|
<div>
|
|
<span style={{ color: TERMINAL_THEMES[theme]?.colors.green }}>
|
|
-rwxr-xr-x
|
|
</span>
|
|
<span> 1 user </span>
|
|
<span style={{ color: TERMINAL_THEMES[theme]?.colors.green }}>
|
|
script.sh
|
|
</span>
|
|
</div>
|
|
<div>
|
|
<span>-rw-r--r--</span>
|
|
<span> 1 user </span>
|
|
<span>README.md</span>
|
|
</div>
|
|
<div>
|
|
<span style={{ color: TERMINAL_THEMES[theme]?.colors.green }}>
|
|
user@termix
|
|
</span>
|
|
<span>:</span>
|
|
<span style={{ color: TERMINAL_THEMES[theme]?.colors.blue }}>~</span>
|
|
<span>$ </span>
|
|
<span
|
|
className="inline-block"
|
|
style={{
|
|
width: cursorStyle === "block" ? "0.6em" : "0.1em",
|
|
height:
|
|
cursorStyle === "underline"
|
|
? "0.15em"
|
|
: cursorStyle === "bar"
|
|
? `${fontSize}px`
|
|
: `${fontSize}px`,
|
|
background: TERMINAL_THEMES[theme]?.colors.cursor || "#f7f7f7",
|
|
animation: cursorBlink ? "blink 1s step-end infinite" : "none",
|
|
verticalAlign:
|
|
cursorStyle === "underline" ? "bottom" : "text-bottom",
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<style>{`
|
|
@keyframes blink {
|
|
0%, 49% { opacity: 1; }
|
|
50%, 100% { opacity: 0; }
|
|
}
|
|
`}</style>
|
|
</div>
|
|
);
|
|
}
|