File size: 1,712 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 63 64 65 66 67 68 | import style from "./content-bash.module.css"
import { createResource, createSignal } from "solid-js"
import { createOverflow, useShareMessages } from "./common"
import { codeToHtml } from "shiki"
interface Props {
command: string
output: string
expand?: boolean
}
export function ContentBash(props: Props) {
const messages = useShareMessages()
const [commandHtml] = createResource(
() => props.command,
async (command) => {
return codeToHtml(command || "", {
lang: "bash",
themes: {
light: "github-light",
dark: "github-dark",
},
})
},
)
const [outputHtml] = createResource(
() => props.output,
async (output) => {
return codeToHtml(output || "", {
lang: "console",
themes: {
light: "github-light",
dark: "github-dark",
},
})
},
)
const [expanded, setExpanded] = createSignal(false)
const overflow = createOverflow()
return (
<div class={style.root} data-expanded={expanded() || props.expand === true ? true : undefined}>
<div data-slot="body">
<div data-slot="header">
<span>Shell</span>
</div>
<div data-slot="content">
<div innerHTML={commandHtml()} />
<div data-slot="output" ref={overflow.ref} innerHTML={outputHtml()} />
</div>
</div>
{!props.expand && overflow.status && (
<button
type="button"
data-component="text-button"
data-slot="expand-button"
onClick={() => setExpanded((e) => !e)}
>
{expanded() ? messages.show_less : messages.show_more}
</button>
)}
</div>
)
}
|