FeaturesList.astro

---
import Headline from '~/components/ui/Headline.astro';
import WidgetWrapper from '~/components/ui/WidgetWrapper.astro';
import type { FeaturesList as Props } from '~/types';
import Tick from '../ui/Tick.astro';
import Soon from '../ui/Soon.astro';
import Pro from '../ui/Pro.astro';

const {
  title = await Astro.slots.render('title'),
  subtitle = await Astro.slots.render('subtitle'),
  tagline = await Astro.slots.render('tagline'),
  products = [],
  specs = [],
  extra = await Astro.slots.render('extra'),

  id,
  isDark = false,
  classes = {},
  bg = await Astro.slots.render('bg'),
} = Astro.props;
---

<WidgetWrapper id={id} isDark={isDark} containerClass={`max-w-3xl mx-auto ${classes?.container ?? ''}`} bg={bg}>
  <Headline title={title} subtitle={subtitle} tagline={tagline} classes={classes?.headline as Record<string, string>} />
  <div>
    <table class="w-full border-collapse border border-neutral-200 dark:border-neutral-800">
      <thead>
        <tr class="bg-neutral-100 dark:bg-neutral-700">
          <th class="p-2 text-xl font-bold text-left">Features</th>
          {
            products.map((name) => (
              <th class="p-2 text-xl font-bold">
                <Fragment set:html={name} />
              </th>
            ))
          }
        </tr>
      </thead>
      <tbody>
        {
          specs.map(({ feature, isHeader, isSoon, isPro, values, available }) => (
            <tr class={(isHeader && ' bg-neutral-50 dark:bg-neutral-800') || ''}>
              {isHeader && <td class="p-2 font-semibold"><Fragment set:html={feature} />{ isSoon && <Soon/> }{ isPro && <Pro/> }</td>}
              {isHeader && products.map(() => <td class="p-2 text-center" />)}
              {!isHeader && <td class="px-2 text-muted"><Fragment set:html={feature} />{ isSoon && <Soon/> }</td> }
              {!isHeader && values && (values.map((val) => <td class="px-2 text-muted text-center">{val}</td>))}
              {!isHeader && available && !isPro && available.map((yes) => <td class="px-2 text-muted text-center">{yes && <Tick />}</td>)}
              {!isHeader && available && isPro && available.map((yes) => <td class="px-2 text-muted text-center">{yes && <Tick classes={{icon_bg: 'bg-amber-200/80 dark:bg-amber-800', icon: 'text-amber-600 dark:text-amber-100'}} />}</td>)}
            </tr>
          ))
        }
      </tbody>
    </table>
    <div class="text-xs text-muted pt-2"><Fragment set:html={extra} /></div>
  </div>
</WidgetWrapper>