1---
2import { highlightTS } from "./highlightTS";
3
4interface Props {
5 filename?: string;
6 code: string;
7 compact?: boolean;
8 caption?: string;
9}
10
11const { filename = "alchemy.run.ts", code, compact, caption } = Astro.props;
12const html = highlightTS(code);
13---
14
15{
16 caption ? (
17 <div class="alc-code-block__wrap">
18 <div class:list={["alc-code-block", compact && "alc-code-block--compact"]}>
19 <div class="alc-code-block__header">
20 <span
21 class="alc-code-block__dot"
22 style="background:var(--alc-danger);"
23 />
24 <span
25 class="alc-code-block__dot"
26 style="background:var(--alc-warn);"
27 />
28 <span
29 class="alc-code-block__dot"
30 style="background:var(--alc-accent-bright);"
31 />
32 <span class="alc-code-block__filename">{filename}</span>
33 </div>
34 <pre
35 class="alc-code-block__pre"
36 tabindex="0"
37 aria-label={`${filename} source`}
38 set:html={html}
39 />
40 </div>
41 <div class="alc-code-block__caption">{caption}</div>
42 </div>
43 ) : (
44 <div class:list={["alc-code-block", compact && "alc-code-block--compact"]}>
45 <div class="alc-code-block__header">
46 <span
47 class="alc-code-block__dot"
48 style="background:var(--alc-danger);"
49 />
50 <span class="alc-code-block__dot" style="background:var(--alc-warn);" />
51 <span
52 class="alc-code-block__dot"
53 style="background:var(--alc-accent-bright);"
54 />
55 <span class="alc-code-block__filename">{filename}</span>
56 </div>
57 <pre
58 class="alc-code-block__pre"
59 tabindex="0"
60 aria-label={`${filename} source`}
61 set:html={html}
62 />
63 </div>
64 )
65}