From d3d8a7666a3e7e3ffb26499098bc3f3cdea80618 Mon Sep 17 00:00:00 2001
From: pheralb <pablohdez4340@gmail.com>
Date: Sat, 30 Mar 2024 20:20:12 +0000
Subject: [PATCH] Add report bug link & alert UI improvements

---
 src/components/commandK/items.ts |  8 +++++++-
 src/ui/alert.tsx                 | 23 +++++++++++++++--------
 2 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/src/components/commandK/items.ts b/src/components/commandK/items.ts
index 365b291..25623ca 100644
--- a/src/components/commandK/items.ts
+++ b/src/components/commandK/items.ts
@@ -1,4 +1,5 @@
 import {
+  BugIcon,
   HeartHandshakeIcon,
   HomeIcon,
   LayoutDashboardIcon,
@@ -26,7 +27,7 @@ export const Pages = [
     name: "Settings",
     href: "/dashboard/settings",
     icon: SettingsIcon,
-  },
+  }
 ];
 
 export const ChangeTheme = [
@@ -63,6 +64,11 @@ export const DocumentationPages = [
     href: "https://github.com/pheralb/slug?tab=readme-ov-file#%EF%B8%8F-contributing",
     icon: HeartHandshakeIcon,
   },
+  {
+    name: "Report a Bug",
+    href: "https://github.com/pheralb/slug/issues/new/choose",
+    icon: BugIcon,
+  }
 ];
 
 export const SocialPages = [
diff --git a/src/ui/alert.tsx b/src/ui/alert.tsx
index 45fe8b4..84f55e7 100644
--- a/src/ui/alert.tsx
+++ b/src/ui/alert.tsx
@@ -8,6 +8,7 @@ interface AlertProps {
   children: ReactNode;
   className?: string;
   containerClassName?: string;
+  icon?: ReactNode;
   iconSize?: number;
 }
 
@@ -16,26 +17,32 @@ const Alert = (props: AlertProps) => {
     <div
       className={cn(
         "w-full rounded-md p-3 text-sm",
-        props.variant === "error" && "dark:text-red-200 dark:bg-red-900/20",
-        props.variant === "success" && "dark:text-green-200 dark:bg-green-900/20",
-        props.variant === "warning" && "dark:text-yellow-200 dark:bg-yellow-900/20",
-        props.variant === "info" && "text-blue-900 dark:text-blue-200 bg-blue-700/20 dark:bg-blue-900/20",
+        props.variant === "error" && "dark:bg-red-900/20 dark:text-red-200",
+        props.variant === "success" &&
+          "dark:bg-green-900/20 dark:text-green-200",
+        props.variant === "warning" &&
+          "dark:bg-yellow-900/20 dark:text-yellow-200",
+        props.variant === "info" &&
+          "bg-blue-700/20 text-blue-900 dark:bg-blue-900/20 dark:text-blue-200",
         props.className,
       )}
     >
       <div
         className={cn("flex items-center space-x-2", props.containerClassName)}
       >
-        {props.variant === "error" && (
+        {props.variant === "error" && !props.icon && (
           <XCircleIcon size={20 || props.iconSize} />
         )}
-        {props.variant === "success" && (
+        {props.variant === "success" && !props.icon && (
           <CheckCircle size={20 || props.iconSize} />
         )}
-        {props.variant === "warning" && (
+        {props.variant === "warning" && !props.icon && (
           <AlertCircle size={20 || props.iconSize} />
         )}
-        {props.variant === "info" && <InfoIcon size={20 || props.iconSize} />}
+        {props.icon}
+        {props.variant === "info" && !props.icon && (
+          <InfoIcon size={20 || props.iconSize} />
+        )}
         <span>{props.children}</span>
       </div>
     </div>