Improve Alert component

src/components/Alert/Alert.tsx

@@ -1,5 +1,5 @@
 import "./alert.css";
-import { CSSProperties } from "react";
+import { CSSProperties, ReactNode } from "react";
 
 interface CustomStyleCSS extends CSSProperties {
   "--codex-border-radius"?: string;
@@ -11,7 +11,9 @@ interface CustomStyleCSS extends CSSProperties {
 type Props = {
   variant: "success" | "warning" | "toast";
 
-  message: string;
+  title: string;
+
+  children: ReactNode;
 
   className?: string;
 
@@ -23,12 +25,16 @@ type Props = {
    * --codex-font-family
    */
   style?: CustomStyleCSS;
+
+  Icon?: ReactNode;
 };
 
 export function Alert({
   variant,
-  message,
   style,
+  title,
+  Icon,
+  children,
   className = "",
   ...rest
 }: Props) {
@@ -38,8 +44,16 @@ export function Alert({
       style={style}
       {...rest}
     >
-      <b className="alert-message">{variant} ! </b>
-      <div>{message}</div>
+      {Icon && (
+        <span className="alert-circleIcon">
+          <span className="alert-icon">{Icon}</span>
+        </span>
+      )}
+
+      <div className="alert-body">
+        <b className="alert-title">{title}</b>
+        <div className="alert-message">{children}</div>
+      </div>
     </div>
   );
 }

src/components/Alert/alert.css

@@ -1,23 +1,42 @@
 .alert {
-  border: 1px solid var(--codex-alert-border-color);
-  color: 1px solid var(--codex-alert-border-color);
+  border-top: 2px solid rgb(var(--codex-alert-color));
+  background-color: rgba(var(--codex-alert-color), 0.1);
+  color: 1px solid var(--codex-alert-color);
   border-radius: var(--codex-border-radius);
   padding: 0.75rem 1.5rem;
   font-family: var(--codex-font-family);
-  color: var(--codex-alert-color);
+  color: var(--codex-color);
   word-break: break-word;
+  display: flex;
+  gap: 1rem;
 }
 
-.alert-message {
+.alert-icon {
+  display: flex;
+  width: 1rem;
+  color: rgb(var(--codex-alert-color));
+}
+
+.alert-circleIcon {
+  background: rgba(var(--codex-alert-color), 0.2);
+  border-radius: 75px;
+  height: 1.75rem;
+  width: 1.75rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.alert-title {
   text-transform: capitalize;
+  margin-bottom: 0.25rem;
+  display: inline-block;
 }
 
 .alert--success {
-  --codex-alert-border-color: var(--codex-color-primary);
-  --codex-alert-color: var(--codex-color-primary);
+  --codex-alert-color: var(--codex-color-success);
 }
 
 .alert--warning {
-  --codex-alert-border-color: var(--codex-color-warning);
   --codex-alert-color: var(--codex-color-warning);
 }

stories/Alert.stories.tsx

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { Alert } from "../src/components/Alert/Alert";
+import { AlertCircle, CircleIcon, InfoIcon } from "lucide-react";
 
 const meta = {
   title: "Overlays/Alert",
@@ -20,21 +21,33 @@ type Story = StoryObj<typeof meta>;
 
 export const Success: Story = {
   args: {
-    message: "This is a success message.",
+    title: "Success",
+    children: "This is a success message.",
     variant: "success",
   },
 };
 
 export const Warning: Story = {
   args: {
-    message: "This is a warning message.",
+    children: "This is a warning message.",
     variant: "warning",
+    title: "Warning",
+  },
+};
+
+export const Icon: Story = {
+  args: {
+    Icon: <InfoIcon />,
+    children: "This is a warning message.",
+    variant: "success",
+    title: "Success",
   },
 };
 
 export const CustomStyle: Story = {
   args: {
-    message: "This is a custom style message.",
+    title: "Warning",
+    children: "This is a custom style message.",
     variant: "warning",
     style: { "--codex-color-warning": "red" },
   },