Callout Block (Astro)

1---
2import type { ValidatedBlockNode } from '@contentbit/core'
3 
4interface Props {
5  node: ValidatedBlockNode<unknown>
6  type?: string
7  title?: string
8}
9 
10const { type = 'note', title } = Astro.props
11 
12interface Variant {
13  border: string
14  head: string
15  label: string
16  path: string
17}
18 
19// Inline lucide paths: info, lightbulb, triangle-alert, octagon-alert, sparkles.
20const VARIANTS: Record<string, Variant> = {
21  note: {
22    border: 'border-border',
23    head: 'bg-muted/60 text-muted-foreground',
24    label: 'Note',
25    path: '<circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/>',
26  },
27  tip: {
28    border: 'border-emerald-500/30',
29    head: 'bg-emerald-500/[0.07] text-emerald-700 dark:text-emerald-400',
30    label: 'Tip',
31    path: '<path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5"/><path d="M9 18h6"/><path d="M10 22h4"/>',
32  },
33  warning: {
34    border: 'border-amber-500/30',
35    head: 'bg-amber-500/[0.08] text-amber-700 dark:text-amber-400',
36    label: 'Warning',
37    path: '<path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/><path d="M12 9v4"/><path d="M12 17h.01"/>',
38  },
39  important: {
40    border: 'border-rose-500/30',
41    head: 'bg-rose-500/[0.07] text-rose-700 dark:text-rose-400',
42    label: 'Important',
43    path: '<path d="M12 16h.01"/><path d="M12 8v4"/><path d="M15.312 2a2 2 0 0 1 1.414.586l4.688 4.688A2 2 0 0 1 22 8.688v6.624a2 2 0 0 1-.586 1.414l-4.688 4.688a2 2 0 0 1-1.414.586H8.688a2 2 0 0 1-1.414-.586l-4.688-4.688A2 2 0 0 1 2 15.312V8.688a2 2 0 0 1 .586-1.414l4.688-4.688A2 2 0 0 1 8.688 2z"/>',
44  },
45  tldr: {
46    border: 'border-sky-500/30',
47    head: 'bg-sky-500/[0.07] text-sky-700 dark:text-sky-400',
48    label: 'TL;DR',
49    path: '<path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z"/><path d="M20 2v4"/><path d="M22 4h-4"/><circle cx="4" cy="20" r="2"/>',
50  },
51}
52 
53const variant = VARIANTS[type] ?? VARIANTS.note
54---
55 
56<aside data-cb-styled class:list={['bg-card my-6 border', variant.border]}>
57  <div class:list={['flex items-center gap-2 border-b px-4 py-2', variant.head]}>
58    <svg
59      xmlns="http://www.w3.org/2000/svg"
60      viewBox="0 0 24 24"
61      fill="none"
62      stroke="currentColor"
63      stroke-width="2.5"
64// … truncated