alert solid and icon variant examples

Author: ariflogs

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

@@ -88,13 +88,13 @@ export default function page() {
           </Alert.Description>
         </Alert>
 
-        <Alert variant="secondary">
+        <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="secondary" className="flex items-center">
+        <Alert variant="solid" className="flex items-center">
           <CheckCircle className="h-4 w-4 mr-4" />
           <div>
             <Alert.Title>Heads up!</Alert.Title>

config/components.ts

@@ -40,6 +40,16 @@ export const componentConfig = {
       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")),
+    },
     "avatar-style-circle": {
       name: "avatar-style-circle",
       filePath: "preview/components/avatar-style-circle.tsx",

content/docs/components/alert.mdx

@@ -30,3 +30,15 @@ npm install class-variance-authority
 ### Default
 
 <ComponentShowcase name="alert-style-default" />
+<br />
+<br />
+
+### Solid
+
+<ComponentShowcase name="alert-style-solid" />
+<br />
+<br />
+
+### With Icon
+
+<ComponentShowcase name="alert-style-with-icon" />

packages/ui/Alerts/Alert.tsx

@@ -8,7 +8,7 @@ const alertVariants = cva("relative w-full border-2 border-black p-4", {
   variants: {
     variant: {
       default: "bg-primary-300 text-foreground",
-      secondary: "bg-black text-white",
+      solid: "bg-black text-white",
       destructive:
         "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
     },

preview/components/alert-style-default.tsx

@@ -5,7 +5,7 @@ export default function AlertStyleDefault() {
     <Alert>
       <Alert.Title>Heads up!</Alert.Title>
       <Alert.Description>
-        You can add components to your app using the cli.
+        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>
+  );
+}