SchemaItem

apps/www/src/components/SchemaItem.astro · 46 lines · group Features & lists

The original measured the container width in JS: below the lg breakpoint (3-column grid) the arrow was shown after every item except the last of a row of 3; at lg and up (6-column grid) after every item except the last. Reproduce with responsive visibility classes instead of client JS.

Used by

codeexpert.se / × 12

Live sites: codeexpert.se.

Samples 1

codeexpert.se/shown inside <SchemaSection>

How do we make expectation and reality be equal?

1DATA DOMAIN analysis using entity relationship diagrams
2Working with domain experts using UBIQUITOUS language
3BUSINESS PROCESSES analysis with flowcharts, sequence diagrams
4SYSTEM analysis using component diagrams and design patterns
5Creating PROTOTYPE on pre-sale stage and approve UX and UI with customer
6A/B TESTING to compare two variants of a specific feature

MDX of this sample

<SchemaSection title="How do we make expectation and reality be equal?">
  <SchemaItem text="DATA DOMAIN analysis using entity relationship diagrams" ind={1} />
  <SchemaItem text="Working with domain experts using UBIQUITOUS language" ind={2} />
  <SchemaItem text="BUSINESS PROCESSES analysis with flowcharts, sequence diagrams" ind={3} />
  <SchemaItem text="SYSTEM analysis using component diagrams and design patterns" ind={4} />
  <SchemaItem text="Creating PROTOTYPE on pre-sale stage and approve UX and UI with customer" ind={5} />
  <SchemaItem text="A/B TESTING to compare two variants of a specific feature" ind={6} isLastItem={true} />
</SchemaSection>

Props

Name	Type	Required	Default
text	string	yes
ind	number	yes
isLastItem	boolean		false

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

---
interface Props {
  text: string;
  ind: number;
  isLastItem?: boolean;
}
const { text, ind, isLastItem = false } = Astro.props;

// The original measured the container width in JS: below the lg breakpoint
// (3-column grid) the arrow was shown after every item except the last of a
// row of 3; at lg and up (6-column grid) after every item except the last.
// Reproduce with responsive visibility classes instead of client JS.
const showBelowLg = ind % 3 !== 0;
const showAtLg = !isLastItem;
const arrowClass =
  showBelowLg && showAtLg
    ? 'hidden md:block'
    : showBelowLg
      ? 'hidden md:block lg:hidden'
      : 'hidden lg:block';
---

<li class="relative md:flex md:flex-1">
  <div class="flex items-center px-6 py-4 text-sm font-medium" aria-current="step">
    <span class="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full border-2 border-primary-500">
      <span class="font-bold text-white">{ind}</span>
    </span>
    <span class="ml-4 text-sm font-medium text-white">{text}</span>
  </div>

  {
    (showBelowLg || showAtLg) && (
      <div class={arrowClass + ' absolute top-0 right-0 h-full w-5'} aria-hidden="true">
        <svg class="h-full w-full text-white" viewBox="0 0 22 80" fill="none" preserveAspectRatio="none">
          <path
            d="M0 -2L20 40L0 82"
            vector-effect="non-scaling-stroke"
            stroke="currentcolor"
            stroke-linejoin="round"
          />
        </svg>
      </div>
    )
  }
</li>

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.