| 1 | --- |
| 2 | import { CF_COLOR, tint } from "./_colors"; |
| 3 | |
| 4 | interface Props { |
| 5 | label: string; |
| 6 | sub?: string; |
| 7 | accent?: boolean; |
| 8 | dim?: boolean; |
| 9 | color?: string; |
| 10 | } |
| 11 | |
| 12 | const { label, sub, accent, dim, color = CF_COLOR } = Astro.props; |
| 13 | const borderColor = accent ? color : "var(--alc-hairline-2)"; |
| 14 | const bg = dim ? "var(--alc-bg)" : "var(--alc-bg-elev-1)"; |
| 15 | const shadow = accent ? `0 0 0 2px ${tint(color, 0.12)}` : "none"; |
| 16 | --- |
| 17 | |
| 18 | <div |
| 19 | class="diag-node" |
| 20 | style={`background:${bg};border-color:${borderColor};box-shadow:${shadow};`} |
| 21 | > |
| 22 | <slot name="icon" /> |
| 23 | <div class="diag-node__label">{label}</div> |
| 24 | {sub && <div class="diag-node__sub">{sub}</div>} |
| 25 | </div> |
| 26 | |
| 27 | <style> |
| 28 | .diag-node { |
| 29 | border-radius: 10px; |
| 30 | padding: 10px 12px 8px; |
| 31 | min-width: 92px; |
| 32 | display: flex; |
| 33 | flex-direction: column; |
| 34 | align-items: center; |
| 35 | gap: 4px; |
| 36 | text-align: center; |
| 37 | border-width: 1px; |
| 38 | border-style: solid; |
| 39 | } |
| 40 | .diag-node__label { |
| 41 | font-family: var(--alc-font-sans); |
| 42 | font-size: 12px; |
| 43 | font-weight: 600; |
| 44 | color: var(--alc-fg-1); |
| 45 | line-height: 1.2; |
| 46 | } |
| 47 | .diag-node__sub { |
| 48 | font-family: var(--alc-font-mono); |
| 49 | font-size: 10px; |
| 50 | color: var(--alc-fg-3); |
| 51 | line-height: 1.25; |
| 52 | } |
| 53 | </style> |