Gitt One Pages
Open menu

DifferentItem

apps/www/src/components/DifferentItem.astro · 48 lines · group Features & lists

Used by

Live sites: skattedosan.se.

Samples 2

skattedosan.se/en/models/buffering-unit/shown inside <DifferentSection>

Control Unit VS Buffering Unit

Control Unit

Control Unit

Fiscal data is stored ONLY on the Control Unit, and THE TAX AGENCY NEEDS TO VISIT YOUR POINT OF SALE to download fiscal data

The solution WILL BECOME OBSOLETE soon

Buffering Unit

Buffering Unit

Fiscal data is being sent to the server in REAL TIME

There is NO more NEED for the Tax Agency TO VISIT YOUR POINT OF SALE: they just collect data from the Control Server

All fiscal data is replicated and kept on BOTH SIDES: Buffering Unit and Control Server

If the internet connection is lost, the Buffering Unit CONTINUES SIGNING AND KEEPING fiscal data, and waits until the internet connection is restored, then sends data to the Control Server

MDX of this sample
<DifferentSection
  title="Control Unit VS Buffering Unit"
>
  <DifferentItem
    title="Control Unit"
    description={[
      'Fiscal data is stored ONLY on the Control Unit, and THE TAX AGENCY NEEDS TO VISIT YOUR POINT OF SALE to download fiscal data',
      'The solution WILL BECOME OBSOLETE soon',
    ]}
    imageName="cu_schema.png"
  />
  <DifferentItem
    title="Buffering Unit"
    description={[
      'Fiscal data is being sent to the server in REAL TIME',
      'There is NO more NEED for the Tax Agency TO VISIT YOUR POINT OF SALE: they just collect data from the Control Server',
      'All fiscal data is replicated and kept on BOTH SIDES: Buffering Unit and Control Server',
      'If the internet connection is lost, the Buffering Unit CONTINUES SIGNING AND KEEPING fiscal data, and waits until the internet connection is restored, then sends data to the Control Server',
    ]}
    imageName="bu_schema.png"
  />
</DifferentSection>
skattedosan.se/models/buffering-unit/history: commit 1396f74 (2026-08-18)shown inside <DifferentSection>

Control Unit VS Buffering Unit

Control Unit

Control Unit

Fiscal data is stored ONLY on the Control Unit, and THE TAX AGENCY NEEDS TO VISIT YOUR POINT OF SALE to download fiscal data

The solution WILL BECOME OBSOLETE soon

Buffering Unit

Buffering Unit

Fiscal data is being sent to the server in REAL TIME

There is NO more NEED for the Tax Agency TO VISIT YOUR POINT OF SALE: they just collect data from the Control Server

All fiscal data is replicated and kept on BOTH SIDES: Buffering Unit and Control Server

If the internet connection is lost, the Buffering Unit CONTINUES SIGNING AND KEEPING fiscal data, and waits until the internet connection is restored, then sends data to the Control Server

MDX of this sample
<DifferentSection
  title="Control Unit VS Buffering Unit"
>
  <DifferentItem
    title="Control Unit"
    description={[
      'Fiscal data is stored ONLY on the Control Unit, and THE TAX AGENCY NEEDS TO VISIT YOUR POINT OF SALE to download fiscal data',
      'The solution WILL BECOME OBSOLETE soon',
    ]}
    imageName="cu_schema.png"
  />
  <DifferentItem
    title="Buffering Unit"
    description={[
      'Fiscal data is being sent to the server in REAL TIME',
      'There is NO more NEED for the Tax Agency TO VISIT YOUR POINT OF SALE: they just collect data from the Control Server',
      'All fiscal data is replicated and kept on BOTH SIDES: Buffering Unit and Control Server',
      'If the internet connection is lost, the Buffering Unit CONTINUES SIGNING AND KEEPING fiscal data, and waits until the internet connection is restored, then sends data to the Control Server',
    ]}
    imageName="bu_schema.png"
  />
</DifferentSection>

Props

NameTypeRequiredDefaultDescription
titlestringyes
descriptionstring[]yes
imageNamestringyes

Source apps/www/src/components/DifferentItem.astro @ gitt.one

---
import { Image } from 'astro:assets';

import { resolveImage } from '../lib/images';

interface Props {
  title: string;
  description: string[];
  imageName: string;
}

const { title, description, imageName } = Astro.props;
const image = await resolveImage(imageName);
---

<div class="flex flex-col rounded-lg shadow-lg overflow-hidden">
  <div class="flex-shrink-0">
    <Image
      src={image}
      alt={title}
      widths={[400, 840]}
      class="h-48 w-full object-contain max-w-full"
    />
  </div>
  <div class="flex-1 bg-white p-6 flex flex-col justify-between">
    <div class="flex-1">
      <div class="block mt-2">
        <p class="text-xl font-semibold text-gray-900">{title}</p>
        {
          description.length > 0 && (
            <div class="mt-3 text-base text-gray-500">
              {description.map((paragraph) => (
                <p class="text-gray-500 my-4">
                  {paragraph.split('*').map((chunk, index) => (
                    <span class:list={[index % 2 === 1 && 'text-primary-600']}>
                      {chunk}
                    </span>
                  ))}
                </p>
              ))}
            </div>
          )
        }
      </div>
    </div>
  </div>
</div>

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.