added alert default style example

Author: ariflogs

config/components.ts

@@ -6,6 +6,10 @@ export const componentConfig = {
       name: "accordion",
       filePath: "packages/ui/Accordions/Accordion.tsx",
     },
+    alert: {
+      name: "alert",
+      filePath: "packages/ui/Alerts/Alert.tsx",
+    },
     avatar: {
       name: "avatar",
       filePath: "packages/ui/Avatars/Avatar.tsx",
@@ -31,6 +35,11 @@ export const componentConfig = {
         () => import("@/preview/components/accordion-style-default")
       ),
     },
+    "alert-style-default": {
+      name: "alert-style-default",
+      filePath: "preview/components/alert-style-default.tsx",
+      preview: lazy(() => import("@/preview/components/alert-style-default")),
+    },
     "avatar-style-circle": {
       name: "avatar-style-circle",
       filePath: "preview/components/avatar-style-circle.tsx",

config/navigation.ts

@@ -17,6 +17,7 @@ export const navConfig: INavigationConfig = {
       title: "Components",
       children: [
         { title: "Accordion", href: `${componentsRoute}/accordion` },
+        { title: "Alert", href: `${componentsRoute}/alert` },
         { title: "Avatar", href: `${componentsRoute}/avatar` },
         { title: "Badge", href: `${componentsRoute}/badge` },
         { title: "Button", href: `${componentsRoute}/button` },

content/docs/components/alert.mdx

@@ -0,0 +1,32 @@
+---
+title: Alert
+description: Notify your users about important events and updates. 📣
+lastUpdated: 24 Oct, 2024
+---
+
+<ComponentShowcase name="alert-style-default" />
+<br />
+<br />
+
+## Installation
+
+#### 1. Install dependencies:
+
+```sh
+npm install class-variance-authority
+```
+
+<br />
+
+#### 2. Copy the code 👇 into your project:
+
+<ComponentSource name="alert" />
+
+<br />
+<br />
+
+## Examples
+
+### Default
+
+<ComponentShowcase name="alert-style-default" />

preview/components/alert-style-default.tsx

@@ -0,0 +1,12 @@
+import { Alert } from "@/packages/ui";
+
+export default function AlertStyleDefault() {
+  return (
+    <Alert>
+      <Alert.Title>Heads up!</Alert.Title>
+      <Alert.Description>
+        You can add components to your app using the cli.
+      </Alert.Description>
+    </Alert>
+  );
+}