Alart

app/(docs)/docs/layout.tsx

@@ -15,7 +15,7 @@ export default function ComponentLayout({
       <div className="hidden lg:block">
         <SideNav />
       </div>
-      <div className="lg:ml-72 mt-16">{children}</div>
+      <div className="lg:ml-72 mt-16 px-4 lg:px-0">{children}</div>
     </div>
   );
 }

app/(sink)/demo/components/page.tsx

@@ -2,6 +2,7 @@
 
 import {
   Accordion,
+  Alert,
   Avatar,
   Badge,
   Button,
@@ -12,6 +13,7 @@ import {
   TabsTriggerList,
 } from "@/packages/ui";
 import { Card } from "@/packages/ui/Cards/Card";
+import { Check, CheckCircle, CheckCircle2 } from "lucide-react";
 import React from "react";
 
 export default function page() {
@@ -76,12 +78,28 @@ export default function page() {
             <Card.Description>Card Description</Card.Description>
           </Card.Header>
         </Card>
-        <Accordion type="single" collapsible>
-          <Accordion.Item value="item-1">
-            <Accordion.Header>Head...</Accordion.Header>
-            <Accordion.Content>Content...</Accordion.Content>
-          </Accordion.Item>
-        </Accordion>
+      </div>
+
+      <div className="space-y-6">
+        <Alert>
+          <Alert.Title>Heads up!</Alert.Title>
+          <Alert.Description>
+            You can add components to your app using the cli.
+          </Alert.Description>
+        </Alert>
+
+        <Alert variant="solid">
+          <Alert.Title>Heads up!</Alert.Title>
+          <Alert.Description>
+            You can add components to your app using the cli.
+          </Alert.Description>
+        </Alert>
+        <Alert variant="solid" className="flex items-center">
+          <CheckCircle className="h-4 w-4 mr-4" />
+          <div>
+            <Alert.Title>Heads up!</Alert.Title>
+          </div>
+        </Alert>
       </div>
     </div>
   );

components/HamburgerMenu.tsx

@@ -7,22 +7,29 @@ import { Button } from "@/packages/ui";
 
 export default function HamburgerMenu() {
   const [isOpen, setIsOpen] = useState(false);
-  
+
   return (
     <div>
       <Button
         size="sm"
         variant="outline"
+        className="p-2"
         onClick={() => setIsOpen((prev) => !prev)}
-        className="z-50 absolute top-3 left-2 mb-3"
       >
-        {isOpen ? <X /> : <AlignJustify />}
+        {isOpen ? (
+          <X className="h-4 w-4" />
+        ) : (
+          <AlignJustify className="h-4 w-4" />
+        )}
       </Button>
-      
+
       {isOpen && (
-        <div className="absolute top-0 z-30 w-full h-screen bg-black opacity-50" onClick={() => setIsOpen(false)} />
+        <div
+          className="absolute top-0 left-0 right-0 w-full h-screen bg-black opacity-50"
+          onClick={() => setIsOpen(false)}
+        />
       )}
-      
+
       {isOpen && (
         <div className="absolute top-0 left-0 z-40">
           <SideNav />

components/TopNav.tsx

@@ -11,13 +11,7 @@ export default function TopNav() {
     <nav className="fixed top-0 h-16 left-0 right-0 w-full border-b-2 border-black bg-white">
       <div className="container max-w-6xl px-4 lg:px-0 mx-auto">
         <div className="flex justify-between items-center h-16">
-
           {/* Logo Section */}
-
-
-          <div className="flex items-center  lg:hidden"> 
-            <HamburgerMenu />
-          </div>
           <div className="flex-shrink-0">
             <a
               href="/"
@@ -54,8 +48,10 @@ export default function TopNav() {
               rel="noopener noreferrer"
             >
               <GithubIcon />
-            </Link> 
+            </Link>
+            <HamburgerMenu />
           </div>
+
           <div className="hidden lg:flex items-center">
             <Link
               href="https://github.com/Logging-Stuff/retroui"

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,28 @@ 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")),
+    },
+    "alert-style-solid": {
+      name: "alert-style-solid",
+      filePath: "preview/components/alert-style-solid.tsx",
+      preview: lazy(() => import("@/preview/components/alert-style-solid")),
+    },
+    "alert-style-with-icon": {
+      name: "alert-style-with-icon",
+      filePath: "preview/components/alert-style-with-icon.tsx",
+      preview: lazy(() => import("@/preview/components/alert-style-with-icon")),
+    },
+    "alert-style-all-status": {
+      name: "alert-style-all-status",
+      filePath: "preview/components/alert-style-all-status.tsx",
+      preview: lazy(
+        () => import("@/preview/components/alert-style-all-status")
+      ),
+    },
     "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,50 @@
+---
+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" />
+<br />
+<br />
+
+### Solid
+
+<ComponentShowcase name="alert-style-solid" />
+<br />
+<br />
+
+### With Icon
+
+<ComponentShowcase name="alert-style-with-icon" />
+<br />
+<br />
+
+### Status
+
+<ComponentShowcase name="alert-style-all-status" />

packages/ui/Alerts/Alert.tsx

@@ -0,0 +1,59 @@
+import { HtmlHTMLAttributes } from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+import { Text } from "../Text";
+
+const alertVariants = cva("relative w-full border-2 border-black p-4", {
+  variants: {
+    variant: {
+      default: "bg-primary-300 text-foreground",
+      solid: "bg-black text-white",
+      destructive:
+        "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+    },
+    status: {
+      error: "bg-red-300 text-red-800 border-red-800",
+      success: "bg-green-300 text-green-800 border-green-800",
+      warning: "bg-yellow-300 text-yellow-800 border-yellow-800",
+      info: "bg-blue-300 text-blue-800 border-blue-800",
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+  },
+});
+
+interface IAlertProps
+  extends HtmlHTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof alertVariants> {}
+
+const Alert = ({ className, variant, status, ...props }: IAlertProps) => (
+  <div
+    role="alert"
+    className={cn(alertVariants({ variant, status }), className)}
+    {...props}
+  />
+);
+Alert.displayName = "Alert";
+
+interface IAlertTitleProps extends HtmlHTMLAttributes<HTMLHeadingElement> {}
+const AlertTitle = ({ className, ...props }: IAlertTitleProps) => (
+  <Text as="h5" className={cn(className)} {...props} />
+);
+AlertTitle.displayName = "AlertTitle";
+
+interface IAlertDescriptionProps
+  extends HtmlHTMLAttributes<HTMLParagraphElement> {}
+const AlertDescription = ({ className, ...props }: IAlertDescriptionProps) => (
+  <div className={cn("text-muted", className)} {...props} />
+);
+
+AlertDescription.displayName = "AlertDescription";
+
+const AlertComponent = Object.assign(Alert, {
+  Title: AlertTitle,
+  Description: AlertDescription,
+});
+
+export { AlertComponent as Alert };

packages/ui/Alerts/index.ts

@@ -0,0 +1 @@
+export * from "./Alert";

packages/ui/index.ts

@@ -2,6 +2,7 @@ export * from "./Buttons";
 export * from "./Form";
 export * from "./Text";
 export * from "./Accordions";
+export * from "./Alerts";
 export * from "./Cards";
 export * from "./Avatars";
 export * from "./Badges";

preview/components/alert-style-all-status.tsx

@@ -0,0 +1,25 @@
+import { Alert } from "@/packages/ui";
+import { CheckCircle, InfoIcon, XIcon } from "lucide-react";
+
+export default function AlertAllStatus() {
+  return (
+    <div className="space-y-4">
+      <Alert status="success" className="flex items-center">
+        <CheckCircle className="h-4 w-4 mr-4" />
+        <Alert.Title>This is a success alert!</Alert.Title>
+      </Alert>
+      <Alert status="info" className="flex items-center">
+        <InfoIcon className="h-4 w-4 mr-4" />
+        <Alert.Title>This is an info alert!</Alert.Title>
+      </Alert>
+      <Alert status="error" className="flex items-center">
+        <XIcon className="h-4 w-4 mr-4" />
+        <Alert.Title>This is an error alert!</Alert.Title>
+      </Alert>
+      <Alert status="warning" className="flex items-center">
+        <InfoIcon className="h-4 w-4 mr-4" />
+        <Alert.Title>This is an error alert!</Alert.Title>
+      </Alert>
+    </div>
+  );
+}

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>
+        This is where you can write description that no one reads...
+      </Alert.Description>
+    </Alert>
+  );
+}

preview/components/alert-style-solid.tsx

@@ -0,0 +1,12 @@
+import { Alert } from "@/packages/ui";
+
+export default function AlertStyleDefault() {
+  return (
+    <Alert variant="solid">
+      <Alert.Title>Heads up!</Alert.Title>
+      <Alert.Description>
+        This is where you can write description that no one reads...
+      </Alert.Description>
+    </Alert>
+  );
+}

preview/components/alert-style-with-icon.tsx

@@ -0,0 +1,16 @@
+import { Alert } from "@/packages/ui";
+import { CheckCircle } from "lucide-react";
+
+export default function AlertStyleDefault() {
+  return (
+    <Alert className="flex">
+      <CheckCircle className="h-5 w-5 mr-4 mt-2" />
+      <div>
+        <Alert.Title>Heads up!</Alert.Title>
+        <Alert.Description>
+          This is where you can write description that no one reads...
+        </Alert.Description>
+      </div>
+    </Alert>
+  );
+}