Add icons and background colors to Callout

Author: webstackdev

src/components/Callout/index.astro

@@ -1,31 +1,53 @@
 ---
+import Sprite from '@components/Sprite/index.astro'
+import type { SpriteName } from '@components/Sprite/sprites'
+
 export interface Props {
-  type?: 'warning' | 'action' | 'tip' | 'info' | 'note';
-  icon?: string;
+  type?: 'warning' | 'action' | 'tip' | 'info' | 'note'
 }
 
-const { type = 'info', icon } = Astro.props;
-
-// Map callout types to their color CSS custom properties
-const getCalloutColor = (calloutType: string) => {
-  switch (calloutType) {
-    case 'warning':
-    case 'action':
-      return 'var(--color-primary)';
-    case 'tip':
-    case 'info':
-    case 'note':
-    default:
-      return 'var(--color-secondary)';
-  }
-};
+const { type = 'info' } = Astro.props
+
+// Map callout types to sprite icons
+const iconMap: Record<string, SpriteName> = {
+  warning: 'warning',
+  action: 'warning',
+  info: 'info',
+  tip: 'lightbulb',
+  note: 'question',
+}
+
+// Map callout types to their background color CSS custom properties
+const backgroundColorMap: Record<string, string> = {
+  warning: 'var(--color-danger-bg)',
+  action: 'var(--color-danger-bg)',
+  info: 'var(--color-info-bg)',
+  tip: 'var(--color-bg-offset)',
+  note: 'var(--color-bg-offset)',
+}
 
-const calloutColor = getCalloutColor(type);
+// Map callout types to their border/icon color CSS custom properties
+const borderColorMap: Record<string, string> = {
+  warning: 'var(--color-danger)',
+  action: 'var(--color-danger)',
+  info: 'var(--color-info)',
+  tip: 'var(--color-text)',
+  note: 'var(--color-text)',
+}
+
+const icon: SpriteName = iconMap[type] as SpriteName
+const backgroundColor = backgroundColorMap[type]
+const borderColor = borderColorMap[type]
 ---
 
-<style define:vars={{ calloutColor }}>
+<style define:vars={{ backgroundColor, borderColor }}>
   .callout {
-    --callout-color: var(--calloutColor);
+    background-color: var(--backgroundColor);
+    border-left-color: var(--borderColor);
+  }
+
+  .callout__icon {
+    color: var(--borderColor);
   }
 
   /* Spacing for nested elements */
@@ -34,14 +56,12 @@ const calloutColor = getCalloutColor(type);
   }
 </style>
 
-<div class="callout bg-[var(--color-bg-offset)] border border-[var(--color-border)] border-l-0 rounded-r-lg relative">
-  {icon && (
-    <div class="callout__icon bg-[var(--color-bg)] rounded-full text-[var(--callout-color)] absolute left-0 top-0 ml-0.5 p-1 -translate-x-1/2 -translate-y-1/2">
-      {/* Icon implementation would go here - could use a Sprite component */}
-    </div>
-  )}
+<div class="callout border border-[var(--color-border)] border-l-0 rounded-r-lg relative pl-6">
+  <div class="callout__icon bg-[var(--color-bg)] rounded-full absolute left-0 top-0 ml-0.5 p-1 -translate-x-1/2 -translate-y-1/2">
+    <Sprite name={icon} size={20} />
+  </div>
 
-  <div class="callout__content border-l-4 border-[var(--callout-color)] p-4 md:pl-8">
+  <div class="callout__content border-l-4 p-4 md:pl-8">
     <slot />
   </div>
 </div>