fix Alert component

Author: nemanjam

src/components/Details.astro

@@ -1,19 +1,18 @@
 ---
-export interface Props {
+import { cn } from '@/utils/styles';
+
+import type { HTMLAttributes } from 'astro/types';
+
+export interface Props extends HTMLAttributes<'details'> {
   title: string;
 }
 
-const { title } = Astro.props as Props;
+const { title, class: className, ...props } = Astro.props as Props;
 ---
 
-<details class="group mx-2 rounded-lg bg-slate-200 p-8 px-4 py-1 dark:bg-slate-800 sm:mx-4">
-  <summary
-    class="cursor-pointer text-purple-600 no-underline outline-none hover:underline hover:decoration-4 hover:underline-offset-2 focus:underline focus:decoration-4 focus:underline-offset-4 dark:text-purple-400"
-  >
-    <span
-      class="bg-gradient-to-br from-blue-700 to-purple-600 bg-clip-text font-bold text-transparent dark:from-blue-400 dark:to-purple-400"
-      >{title}</span
-    >
+<details {...props} class={cn('rounded-button bg-base-200 px-4 py-1', className)}>
+  <summary class="cursor-pointer">
+    <span class="font-semibold">{title}</span>
   </summary>
   <slot />
 </details>

src/components/Prose.astro

@@ -0,0 +1,42 @@
+---
+layout: '../../layouts/Page.astro'
+title: Other components
+---
+
+
+import Details from '../../components/Details.astro';
+import Alert from '../../components/Alert.astro';
+
+back to [Index](/design)
+
+## Details
+
+<Details title="This is the title">
+These are the details.
+</Details>
+
+export const alerts = {
+  variant: [
+    { variant: 'note' },
+    { variant: 'info' },
+    { variant: 'tip' },
+    { variant: 'warning' },
+    { variant: 'danger' },
+  ],
+};
+
+## Alerts
+
+{Object.entries(alerts).map(([key, values]) => (
+<>
+  <h4>{key}</h4>
+  <div>
+    {values.map((props) => {
+      const item = `${Object.values(props)[0]}`;
+      const text = `This is some ${item} text.`;
+
+      return <Alert {...props}>{text}</Alert>;
+    })}
+  </div>
+</>
+))}

src/pages/design/components.mdx

@@ -10,4 +10,5 @@ title: Design system
 - [Colors](/design/colors)
 - [Images](/design/images)
 - [Embeds](/design/embeds)
+- [Components](/design/components)
 - [Typography](/design/typography)

src/pages/design/index.mdx

@@ -1,11 +1,13 @@
 @layer components {
   .alert {
-    @apply mb-4 mx-8 md:mx-auto px-4 py-1 rounded-button;
+    @apply px-4 py-1 rounded-button;
 
     & p {
       @apply my-0;
     }
   }
+
+  /* extract into semantic colors maybe in future */
   .alert--note {
     /* use base-200-300 here */
     @apply bg-slate-100 border border-slate-200 dark:border-slate-800 dark:bg-slate-900;