initial commit

src/components/SSCallout.tsx

@@ -0,0 +1,28 @@
+import { JSX, JSXElement } from 'solid-js';
+import { COLORS } from 'src/colors';
+
+type SSCalloutProps = JSX.HTMLAttributes<HTMLDivElement> & {
+  color: (typeof COLORS)[number];
+  icon: JSXElement;
+};
+
+function SSCallout(props: SSCalloutProps) {
+  const { icon, color, class: className, style, children, ...rest } = props;
+
+  return (
+    <div
+      {...rest}
+      class={`ss_callout ss_callout--${color} ${className ?? ''}`}
+      style={style}
+    >
+      <span class="ss_callout__icon">
+        {icon}
+      </span>
+      <div class="ss_callout__content">
+        <span>{children}</span>
+      </div>
+    </div>
+  );
+}
+
+export { SSCallout };