feat: structure

src/components/callout/index.tsx

@@ -0,0 +1,19 @@
+import { type ReactNode } from 'react';
+import { cx } from '../utils';
+
+type CalloutVariant = 'info' | 'success' | 'warning' | 'danger';
+
+export const Callout = ({
+  variant = 'info',
+  icon,
+  children,
+}: {
+  variant?: CalloutVariant;
+  icon?: ReactNode;
+  children: ReactNode;
+}) => (
+  <div className={cx('modern-sk-callout', variant !== 'info' && `modern-sk-callout--${variant}`)}>
+    {icon && <span className="modern-sk-callout__icon">{icon}</span>}
+    <div className="modern-sk-callout__body">{children}</div>
+  </div>
+);