added status variants

Author: ariflogs

config/components.ts

@@ -50,6 +50,13 @@ export const componentConfig = {
       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",

content/docs/components/alert.mdx

@@ -42,3 +42,9 @@ npm install class-variance-authority
 ### With Icon
 
 <ComponentShowcase name="alert-style-with-icon" />
+<br />
+<br />
+
+### Status
+
+<ComponentShowcase name="alert-style-all-status" />

packages/ui/Alerts/Alert.tsx

@@ -12,6 +12,12 @@ const alertVariants = cva("relative w-full border-2 border-black p-4", {
       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",
@@ -22,18 +28,18 @@ interface IAlertProps
   extends HtmlHTMLAttributes<HTMLDivElement>,
     VariantProps<typeof alertVariants> {}
 
-const Alert = ({ className, variant, ...props }: IAlertProps) => (
+const Alert = ({ className, variant, status, ...props }: IAlertProps) => (
   <div
     role="alert"
-    className={cn(alertVariants({ variant }), className)}
+    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("mb-1", className)} {...props} />
+  <Text as="h5" className={cn(className)} {...props} />
 );
 AlertTitle.displayName = "AlertTitle";
 

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>
+  );
+}