Callout Block

1import { calloutBlock } from '@contentbit/blocks'
2import { defineBlockComponent } from '@contentbit/react'
3import type { LucideIcon } from 'lucide-react'
4 
5import { cn } from '@/lib/utils'
6import { Info, Lightbulb, OctagonAlert, Sparkles, TriangleAlert } from 'lucide-react'
7 
8interface Variant {
9  border: string
10  head: string
11  icon: LucideIcon
12  label: string
13}
14 
15const VARIANTS: Record<string, Variant> = {
16  note: {
17    border: 'border-border',
18    head: 'bg-muted/60 text-muted-foreground',
19    icon: Info,
20    label: 'Note',
21  },
22  tip: {
23    border: 'border-emerald-500/30',
24    head: 'bg-emerald-500/[0.07] text-emerald-700 dark:text-emerald-400',
25    icon: Lightbulb,
26    label: 'Tip',
27  },
28  warning: {
29    border: 'border-amber-500/30',
30    head: 'bg-amber-500/[0.08] text-amber-700 dark:text-amber-400',
31    icon: TriangleAlert,
32    label: 'Warning',
33  },
34  important: {
35    border: 'border-rose-500/30',
36    head: 'bg-rose-500/[0.07] text-rose-700 dark:text-rose-400',
37    icon: OctagonAlert,
38    label: 'Important',
39  },
40  tldr: {
41    border: 'border-sky-500/30',
42    head: 'bg-sky-500/[0.07] text-sky-700 dark:text-sky-400',
43    icon: Sparkles,
44    label: 'TL;DR',
45  },
46}
47 
48export const CalloutBlock = defineBlockComponent(calloutBlock, ({ node, ctx }) => {
49  const data = node.data
50  const type = node.props.type
51  const title = node.props.title
52  const variant = VARIANTS[type] ?? VARIANTS.note
53  const Icon = variant.icon
54  return (
55    <aside data-cb-styled className={cn('bg-card my-6 border', variant.border)}>
56      <div className={cn('flex items-center gap-2 border-b px-4 py-2', variant.head)}>
57        <Icon className="size-3.5 shrink-0" aria-hidden strokeWidth={2.5} />
58        <span className="font-mono text-[11px] font-semibold tracking-wider uppercase">
59          {variant.label}
60        </span>
61        {title ? <span className="text-foreground ml-1 text-sm font-medium">{title}</span> : null}
62      </div>
63      <div className="px-4 py-3 text-sm leading-relaxed [&>p]:m-0 [&>p+p]:mt-2">
64        {ctx.renderMarkdown(data.markdown)}
65      </div>
66    </aside>
67  )
68})