Stats

apps/www/src/sections/Stats.astro · 33 lines · group Stats

Stats — a row of big numbers (<Stat value label />). Shim: the gatsby-era skattedosan `Stats` (picture + citation + stats[]) is a different shape; when its props are passed the legacy component renders until the site migrates to Hero/Stats/Testimonials.

Used by

posexpert.se / × 2

Live sites: posexpert.se.

Samples 1

posexpert.se/

Key to smarter transactions

By implementing our POS development solutions, you can streamline your business operations, reduce transaction times, improve security, and boost sales.

Clients: >40
Point of Sales: >3000
SLA: 99,9%

MDX of this sample

<Stats
  title="Key to smarter transactions"
  description="By implementing our POS development solutions, you can streamline your business operations, reduce transaction times, improve security, and boost sales."
>
  <Stat value=">40" label="Clients" />
  <Stat value=">3000" label="Point of Sales" />
  <Stat value="99,9%" label="SLA" />
</Stats>

Props

Name	Type	Default	Description
id	string
title	string
description	string
theme	Theme	'muted'
citation	string		legacy skattedosan shape
imageName	string
[legacy: string]	unknown

Source apps/www/src/sections/Stats.astro @ gitt.one

---
/**
 * Stats — a row of big numbers (<Stat value label />).
 * Shim: the gatsby-era skattedosan `Stats` (picture + citation + stats[])
 * is a different shape; when its props are passed the legacy component
 * renders until the site migrates to Hero/Stats/Testimonials.
 */
import Section from './_Section.astro';
import LegacyStats from '../components/Stats.astro';
import type { Theme } from './_Section.astro';

interface Props {
  id?: string;
  title?: string;
  description?: string;
  theme?: Theme;
  /** legacy skattedosan shape */
  citation?: string;
  imageName?: string;
  [legacy: string]: unknown;
}
const { id, title, description, theme = 'muted', citation, imageName } = Astro.props;
const legacy = Boolean(citation || imageName);
---

{legacy ? <LegacyStats {...(Astro.props as any)} /> : (
<Section id={id} title={title} description={description} theme={theme}>
  <dl class="mx-auto grid max-w-4xl grid-cols-1 divide-y divide-gray-100 rounded-lg bg-white text-gray-900 shadow-lg sm:grid-cols-3 sm:divide-x sm:divide-y-0">
    <slot />
  </dl>
</Section>
)}

Source links point to engine-astro@e857a859. Samples are cut from the sites' own content by scripts/gallery-extract.mjs; nothing is merged or removed yet.