feat: first pass at callout component

src/components/shared/Callout.module.css

@@ -0,0 +1,67 @@
+.container {
+  display: flex;
+  padding: 10px 15px 10px 15px;
+  gap: 12px;
+  border-radius: 4px;
+  margin: 15px 0;
+}
+
+.content {
+  margin: 0;
+  text-align: justify;
+}
+
+.error {
+  background: linear-gradient(
+    90deg,
+    rgba(245, 108, 157, 0.2) 0.78%,
+    rgba(245, 108, 157, 0.05) 41.41%
+  );
+
+  border: 1px solid rgba(245, 108, 157, 0.3);
+}
+
+.warning {
+  background: linear-gradient(
+    90deg,
+    rgba(255, 167, 38, 0.2) 0.78%,
+    rgba(255, 167, 38, 0.05) 41.41%
+  );
+  border: 1px solid rgba(255, 167, 38, 0.3);
+  color: #ffa726;
+}
+
+.info {
+  background: linear-gradient(
+    90deg,
+    rgba(41, 182, 246, 0.2) 0.78%,
+    rgba(41, 182, 246, 0.05) 41.41%
+  );
+  border: 1px solid rgba(2, 136, 209, 0.3);
+  color: #0288d1;
+}
+
+.success {
+  background: linear-gradient(
+    90deg,
+    rgba(0, 182, 138, 0.2) 0.78%,
+    rgba(0, 182, 138, 0.05) 41.41%
+  );
+  border: 1px solid rgba(2, 136, 209, 0.3);
+  color: #00b68a;
+}
+
+.title {
+  font-style: normal;
+  font-weight: 500;
+  font-size: 16px;
+  line-height: 130%;
+  letter-spacing: 0.15px;
+  margin-bottom: 10px;
+}
+
+.svg {
+  width: 25px;
+  height: 25px;
+  margin-right: 15px;
+}

src/components/shared/Callout.tsx

@@ -0,0 +1,55 @@
+import clsx from "clsx";
+import React, { PropsWithChildren } from "react";
+
+import styles from "./Callout.module.css";
+
+import error from "@site/static/img/callout/error.svg";
+import warning from "@site/static/img/callout/warning.svg";
+import success from "@site/static/img/callout/success.svg";
+import info from "@site/static/img/callout/info.svg";
+
+export enum Callouts {
+  ERROR = "error",
+  WARNING = "warning",
+  INFO = "info",
+  SUCCESS = "success",
+}
+
+interface Callout {
+  type: Callouts;
+  title: string;
+  content: string;
+}
+
+export const Callout = ({
+  type,
+  title,
+  content,
+  children,
+}: PropsWithChildren<Callout>) => {
+  const containerClass = clsx({
+    [styles.error]: type == Callouts.ERROR,
+    [styles.warning]: type == Callouts.WARNING,
+    [styles.info]: type == Callouts.INFO,
+    [styles.success]: type == Callouts.SUCCESS,
+  });
+
+  const Svg = {
+    [Callouts.ERROR]: error,
+    [Callouts.WARNING]: warning,
+    [Callouts.INFO]: info,
+    [Callouts.SUCCESS]: success,
+  }[type];
+
+  return (
+    <div className={clsx([styles.container, containerClass])}>
+      <div>
+        <Svg className={styles.svg} />
+      </div>
+      <div>
+        {title && <p className={styles.title}>{title}</p>}
+        <p className={styles.content}>{content ?? children}</p>
+      </div>
+    </div>
+  );
+};