Alert component

src/components/alert/Alert.stories.tsx

@@ -0,0 +1,14 @@
+import {Meta} from "@storybook/react";
+import {Alert} from "./Alert";
+import React from "react";
+
+export default {
+    title: "Alert",
+    component: Alert
+} as Meta
+
+export const AlertExample = () => {
+    return <Alert color={"error"}>
+        This is an alert message!
+    </Alert>
+}

src/components/alert/Alert.style.scss

@@ -0,0 +1,28 @@
+@use "../../styles/helpers";
+@use "../../styles/box";
+@use "../../styles/variables";
+
+.alert {
+  padding: variables.$md;
+  font-size: variables.$sm;
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: variables.$xxs;
+
+  & {
+    @include helpers.fontStyle();
+    @include helpers.borderRadius();
+  }
+
+  > svg {
+    min-width: variables.$md;
+    min-height: variables.$md;
+  }
+}
+
+@each $name, $color in variables.$colors {
+    .alert--#{$name} {
+      @include box.box($color);
+    }
+}

src/components/alert/Alert.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import {Code0Component, Color, mergeCode0Props} from "../../utils";
+import {
+    IconAlertCircle,
+    IconCircleCheck,
+    IconCircleDot,
+    IconCircleX,
+    IconInfoCircle,
+    IconProps
+} from "@tabler/icons-react";
+import "./Alert.style.scss"
+
+export interface AlertProps extends Code0Component<HTMLDivElement> {
+    color?: Color
+    children: React.ReactNode
+}
+
+export const Alert: React.FC<AlertProps> = (props) => {
+    const {color = "secondary", children, ...rest} = props
+
+    const icons: Record<Color, React.ReactElement<IconProps>> = {
+        "primary": <IconCircleDot size={16}/>,
+        "secondary": <IconCircleDot size={16}/>,
+        "info": <IconInfoCircle size={16}/>,
+        "success": <IconCircleCheck size={16}/>,
+        "warning": <IconAlertCircle size={16}/>,
+        "error": <IconCircleX size={16}/>,
+    }
+
+    return <div {...mergeCode0Props(`alert alert--${color}`, rest)}>
+        {icons[color]}
+        {children}
+    </div>
+}

src/index.ts

@@ -1,3 +1,4 @@
+export * from "./components/alert/Alert"
 export * from "./components/avatar/Avatar"
 export * from "./components/badge/Badge"
 export * from "./components/breadcrumb/Breadcrumb"