From ed61a22ab06b394c6f9d876a25db507a424f4313 Mon Sep 17 00:00:00 2001
From: pheralb <pablohdez4340@gmail.com>
Date: Wed, 5 Mar 2025 17:44:35 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Add=20alert=20UI=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/routes/api/+page.svelte         |  3 ++-
 src/ui/alert/alert-component.svelte | 36 +++++++++++++++++++++++++++++
 tailwind.config.ts                  | 15 +++++++++++-
 3 files changed, 52 insertions(+), 2 deletions(-)
 create mode 100644 src/ui/alert/alert-component.svelte

diff --git a/src/routes/api/+page.svelte b/src/routes/api/+page.svelte
index 323430c..5bbf46b 100644
--- a/src/routes/api/+page.svelte
+++ b/src/routes/api/+page.svelte
@@ -42,7 +42,8 @@
     'prose dark:prose-invert',
     'mx-auto max-w-3xl px-4 py-10',
     'prose-h2:font-medium prose-h2:tracking-tight prose-h2:underline prose-h2:decoration-neutral-300 prose-h2:underline-offset-[6px] prose-h2:transition-opacity hover:prose-h2:opacity-70 dark:prose-h2:decoration-neutral-700/65',
-    'prose-pre:m-0 prose-pre:border prose-pre:border-neutral-200 dark:prose-pre:border dark:prose-pre:border-neutral-800/65'
+    'prose-pre:m-0 prose-pre:border prose-pre:border-neutral-200 dark:prose-pre:border dark:prose-pre:border-neutral-800/65',
+    'prose-inline-code:rounded prose-inline-code:border prose-inline-code:border-neutral-300 prose-inline-code:bg-neutral-200/50 prose-inline-code:p-[2px] prose-inline-code:font-mono prose-inline-code:dark:border-neutral-800 prose-inline-code:dark:bg-neutral-800/50'
   )}
 >
   <svelte:component this={data.content} />
diff --git a/src/ui/alert/alert-component.svelte b/src/ui/alert/alert-component.svelte
new file mode 100644
index 0000000..faff441
--- /dev/null
+++ b/src/ui/alert/alert-component.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+  import { cn } from '@/utils/cn';
+  import { AlertTriangleIcon, CheckCircleIcon, InfoIcon, XCircleIcon } from 'lucide-svelte';
+
+  type iAlertType = 'success' | 'error' | 'warning' | 'info';
+
+  export let type: iAlertType = 'info';
+
+  const icons = {
+    success: CheckCircleIcon,
+    error: XCircleIcon,
+    warning: AlertTriangleIcon,
+    info: InfoIcon
+  };
+</script>
+
+<div
+  class={cn(
+    'flex items-center space-x-3 rounded-lg border px-3 py-2 text-sm dark:border-gray-700/20 dark:text-gray-200',
+    type === 'success' &&
+      'border-emerald-600/20 bg-emerald-100/50 text-emerald-900 selection:bg-emerald-500/20 dark:border-emerald-500/30 dark:bg-emerald-500/10 dark:text-emerald-200 dark:selection:bg-emerald-500/30',
+    type === 'error' &&
+      'border-red-600/20 bg-red-100/50 text-red-900 selection:bg-red-500/20 dark:border-red-500/30 dark:bg-red-500/10 dark:text-red-200 dark:selection:bg-red-500/30',
+    type === 'warning' &&
+      'border-yellow-600/20 bg-yellow-100/50 text-yellow-900 selection:bg-yellow-500/20 dark:border-yellow-500/30 dark:bg-yellow-500/10 dark:text-yellow-200 dark:selection:bg-yellow-500/30',
+    type === 'info' &&
+      'border-blue-600/20 bg-blue-100/50 text-blue-900 selection:bg-blue-500/20 dark:border-blue-500/30 dark:bg-blue-500/10 dark:text-blue-200 dark:selection:bg-blue-500/30'
+  )}
+>
+  {#if icons[type]}
+    <svelte:component this={icons[type]} class="flex-shrink-0" size={16} />
+  {/if}
+  <div>
+    <slot />
+  </div>
+</div>
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 1be55cb..fa16311 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -1,6 +1,7 @@
 import type { Config } from 'tailwindcss';
 
 // Plugins:
+import plugin from 'tailwindcss/plugin';
 import defaultTheme from 'tailwindcss/defaultTheme';
 import twTypography from '@tailwindcss/typography';
 
@@ -28,6 +29,12 @@ const config = {
               'font-style': 'normal'
             }
           }
+        },
+        quoteless: {
+          css: {
+            'blockquote p:first-of-type::before': { content: 'none' },
+            'blockquote p:first-of-type::after': { content: 'none' }
+          }
         }
       },
       colors: {
@@ -51,7 +58,13 @@ const config = {
           'text-wrap': 'balance'
         }
       });
-    }
+    },
+    plugin(function ({ addVariant }) {
+      addVariant(
+        'prose-inline-code',
+        '&.prose :where(:not(pre)>code):not(:where([class~="not-prose"] *))'
+      );
+    })
   ]
 } satisfies Config;