| 2 | import { IconInfo } from '../ui/icons/info'; |
| 3 | |
| 4 | export function Note({ |
| 5 | sub, |
| 6 | title, |
| 7 | className, |
| 8 | children |
| 9 | }: { |
| 10 | sub?: string; |
| 11 | className?: string; |
| 12 | title: string; |
| 13 | children: React.ReactNode; |
| 14 | }) { |
| 15 | return ( |
| 16 | <div |
| 17 | className={cn( |
| 18 | 'light:ring-ring:ring-border relative my-7 rounded-lg py-3.5 pl-[1.625rem] pr-4 ring-1 ring-inset ring-ring/10 [--callout-border:theme(colors.indigo.400)] [--callout-icon:theme(colors.indigo.400)] [--callout-title:theme(colors.indigo.400)] dark:[--callout-border:theme(colors.indigo.400)] dark:[--callout-icon:theme(colors.indigo.400)] dark:[--callout-title:theme(colors.indigo.400)] [&>*]:my-0 [&>*]:py-0', |
| 19 | className |
| 20 | )} |
| 21 | > |
| 22 | <div className="absolute inset-y-2 left-2 w-0.5 rounded-full bg-[--callout-border]"></div> |
| 23 | <div className="mb-2 mt-0 flex items-center justify-start gap-1"> |
| 24 | <IconInfo className="h-4 w-4 text-indigo-400" /> |
| 25 | <span className="text-xs font-medium text-[--callout-title]"> |
| 26 | {sub || 'Note'} |
| 27 | </span> |
| 28 | </div> |
| 29 | |
| 30 | <div className="mt-2 [&>a]:text-indigo-400"> |
| 31 | {title && ( |
| 32 | <h4 className="mt-4 flex items-center justify-start gap-4 font-bold text-foreground"> |
| 33 | <strong>{title}</strong> |
| 34 | </h4> |
| 35 | )} |
| 36 | <div className="mt-0 flex flex-col gap-4 [&>p]:my-0 [&>p]:py-0"> |
| 37 | {children} |
| 38 | </div> |
| 39 | </div> |
| 40 | </div> |
| 41 | ); |
| 42 | } |