File size: 1,623 Bytes
0dbc9de | 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 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 | import { RGBA, TextAttributes } from "@opentui/core"
import { For, type JSX } from "solid-js"
import { tint, useTheme } from "../context/theme"
import { logo } from "../logo"
export function Logo() {
const { theme } = useTheme()
const renderLine = (line: string, fg: RGBA, bold: boolean): JSX.Element[] => {
const shadow = tint(theme.background, fg, 0.25)
const attrs = bold ? TextAttributes.BOLD : undefined
return Array.from(line).map((char) => {
if (char === "_") {
return (
<text fg={fg} bg={shadow} attributes={attrs} selectable={false}>
{" "}
</text>
)
}
if (char === "^") {
return (
<text fg={fg} bg={shadow} attributes={attrs} selectable={false}>
▀
</text>
)
}
if (char === "~") {
return (
<text fg={shadow} attributes={attrs} selectable={false}>
▀
</text>
)
}
if (char === ",") {
return (
<text fg={shadow} attributes={attrs} selectable={false}>
▄
</text>
)
}
return (
<text fg={fg} attributes={attrs} selectable={false}>
{char}
</text>
)
})
}
return (
<box>
<For each={logo.left}>
{(line, index) => (
<box flexDirection="row" gap={1}>
<box flexDirection="row">{renderLine(line, theme.textMuted, false)}</box>
<box flexDirection="row">{renderLine(logo.right[index()], theme.text, true)}</box>
</box>
)}
</For>
</box>
)
}
|