Item

const itemFixture = {
  id: "item",
  href: "/services/ledger-api",
  leading: "LA",
  title: "ledger-api",
  description: "Platform · prod",
  trailing: "Healthy",
  bare: false,
  active: true,
} satisfies {
  id: string;
  href: string;
  leading: string;
  title: string;
  description: string;
  trailing: string;
  bare: boolean;
  active: boolean;
};
 
import { Item } from "@grassroot/ui-react";
 
export default function ItemDemo() {
  return (
    <div>
      <Item
        href={itemFixture.href}
        leading={<span aria-hidden="true">{itemFixture.leading}</span>}
        title={itemFixture.title}
        description={itemFixture.description}
        trailing={<span>{itemFixture.trailing}</span>}
        bare={itemFixture.bare}
        active={itemFixture.active}
      />
    </div>
  );
}

<script setup lang="ts">
const itemFixture = {
  id: "item",
  href: "/services/ledger-api",
  leading: "LA",
  title: "ledger-api",
  description: "Platform · prod",
  trailing: "Healthy",
  bare: false,
  active: true,
} satisfies {
  id: string;
  href: string;
  leading: string;
  title: string;
  description: string;
  trailing: string;
  bare: boolean;
  active: boolean;
};
 
import { Item } from "@grassroot/ui-vue";
</script>
 
<template>
  <div>
    <Item :href="itemFixture.href" :bare="itemFixture.bare" :active="itemFixture.active">
      <template #leading
        ><span aria-hidden="true">{{ itemFixture.leading }}</span></template
      >
      <template #title>{{ itemFixture.title }}</template>
      <template #description>{{ itemFixture.description }}</template>
      <template #trailing
        ><span>{{ itemFixture.trailing }}</span></template
      >
    </Item>
  </div>
</template>

import { Component } from "@angular/core";
const itemFixture = {
  id: "item",
  href: "/services/ledger-api",
  leading: "LA",
  title: "ledger-api",
  description: "Platform · prod",
  trailing: "Healthy",
  bare: false,
  active: true,
} satisfies {
  id: string;
  href: string;
  leading: string;
  title: string;
  description: string;
  trailing: string;
  bare: boolean;
  active: boolean;
};
 
import { GrassrootItem } from "@grassroot/ui-angular";
 
@Component({
  selector: "app-item-demo",
  standalone: true,
  imports: [GrassrootItem],
  template: `
    <div>
      <a grassrootItem [href]="fixture.href" [bare]="fixture.bare" [active]="fixture.active">
        <span leading aria-hidden="true">{{ fixture.leading }}</span>
        <ng-container ngProjectAs="[title]">{{ fixture.title }}</ng-container>
        <ng-container ngProjectAs="[description]">{{ fixture.description }}</ng-container>
        <span trailing>{{ fixture.trailing }}</span>
      </a>
    </div>
  `,
})
export class ItemDemoComponent {
  protected readonly fixture = itemFixture;
}
 
export default ItemDemoComponent;

<script lang="ts">
  const itemFixture = {
    id: "item",
    href: "/services/ledger-api",
    leading: "LA",
    title: "ledger-api",
    description: "Platform · prod",
    trailing: "Healthy",
    bare: false,
    active: true,
  } satisfies {
    id: string;
    href: string;
    leading: string;
    title: string;
    description: string;
    trailing: string;
    bare: boolean;
    active: boolean;
  };
 
  import { Item } from "@grassroot/ui-svelte";
</script>
 
{#snippet leading()}<span aria-hidden="true">{itemFixture.leading}</span>{/snippet}
{#snippet title()}{itemFixture.title}{/snippet}
{#snippet description()}{itemFixture.description}{/snippet}
{#snippet trailing()}<span>{itemFixture.trailing}</span>{/snippet}
 
<div>
  <Item
    href={itemFixture.href}
    bare={itemFixture.bare}
    active={itemFixture.active}
    {leading}
    {title}
    {description}
    {trailing}
  />
</div>

/** @jsxImportSource solid-js */
const itemFixture = {
  id: "item",
  href: "/services/ledger-api",
  leading: "LA",
  title: "ledger-api",
  description: "Platform · prod",
  trailing: "Healthy",
  bare: false,
  active: true,
} satisfies {
  id: string;
  href: string;
  leading: string;
  title: string;
  description: string;
  trailing: string;
  bare: boolean;
  active: boolean;
};
 
import { Item } from "@grassroot/ui-solid";
import type { JSX } from "solid-js";
 
export default function ItemDemo(): JSX.Element {
  return (
    <div>
      <Item
        href={itemFixture.href}
        leading={<span aria-hidden="true">{itemFixture.leading}</span>}
        title={itemFixture.title}
        description={itemFixture.description}
        trailing={<span>{itemFixture.trailing}</span>}
        bare={itemFixture.bare}
        active={itemFixture.active}
      />
    </div>
  );
}