v10/site/src/components/Aside.astro

---
import clsx from 'clsx';
import { Info, Lightbulb, TriangleAlert, OctagonX } from 'lucide-react';
import { twMerge } from 'tailwind-merge';

type AsideType = 'note' | 'tip' | 'caution' | 'danger';

type Props = {
  type: AsideType;
  title?: string;
  class?: string;
};

const { type, title, class: className } = Astro.props;

const icons: Record<AsideType, typeof Info> = {
  note: Info,
  tip: Lightbulb,
  caution: TriangleAlert,
  danger: OctagonX,
};

const defaultTitles: Record<AsideType, string> = {
  note: 'Note',
  tip: 'Tip',
  caution: 'Caution',
  danger: 'Danger',
};

const Icon = icons[type];
const renderTitle = title ?? defaultTitles[type];
---

<aside
  class={twMerge(
    clsx('w-full max-w-3xl mx-auto flex my-6 rounded-lg overflow-hidden border border-light-40 dark:border-dark-80 '),
    className,
  )}
>
  <div
    class={clsx(
      'w-2 self-stretch',
      type === 'note' && 'bg-blue',
      type === 'tip' && 'bg-purple',
      type === 'caution' && 'bg-orange',
      type === 'danger' && 'bg-red',
    )}
  >
  </div>
  <div class={clsx('flex-1 flex p-6 pl-4 gap-4')}>
    <div class="flex-shrink-0 mt-[3px]">
      <Icon
        size={18}
        className={clsx(
          clsx(
            type === 'note' && 'text-blue',
            type === 'tip' && ' text-purple',
            type === 'caution' && 'text-orange',
            type === 'danger' && 'text-red',
          ),
        )}
      />
    </div>
    <div class="flex-1 min-w-0">
      <p class="text-md font-semibold mb-2">{renderTitle}</p>
      <div class="[&>.my-6]:my-2 [&>.my-12]:my-4 [&>*:last-child]:!mb-0">
        <slot />
      </div>
    </div>
  </div>
</aside>