callout.tsx

1import { ReactNode } from 'react'
2import { cn } from '@/lib/utils'
3
4type CalloutType = 'important' | 'note' | 'warning' | 'tip'
5
6interface CalloutProps {
7	type: CalloutType
8	children: ReactNode
9	className?: string
10}
11
12const calloutStyles = {
13	important: {
14		container: 'border-[#1f6feb]/20 bg-[#161b22]',
15		text: 'text-[#1f6feb]',
16		icon: '🚨',
17	},
18	note: {
19		container: 'border-[#2f81f7]/20 bg-[#161b22]',
20		text: 'text-[#2f81f7]',
21		icon: '📝',
22	},
23	warning: {
24		container: 'border-[#d29922]/20 bg-[#161b22]',
25		text: 'text-[#d29922]',
26		icon: '⚠️',
27	},
28	tip: {
29		container: 'border-[#3fb950]/20 bg-[#161b22]',
30		text: 'text-[#3fb950]',
31		icon: '💡',
32	},
33}
34
35export function Callout({ type, children, className }: CalloutProps) {
36	const styles = calloutStyles[type]
37
38	return (
39		<div
40			className={cn('my-4 rounded-md border p-4', styles.container, className)}
41		>
42			<div className="mb-2 flex items-center gap-2">
43				<span
44					className={cn('flex items-center gap-2 font-semibold', styles.text)}
45				>
46					<span>{styles.icon}</span>
47					{type.toUpperCase()}
48				</span>
49			</div>
50			<div className="text-[#e6edf3]">{children}</div>
51		</div>
52	)
53}
54