Eyebrow

const eyebrowFixture = {
  id: "eyebrow",
  text: "01 · Infrastructure",
} satisfies { id: string; text: string };
 
import { Eyebrow } from "@grassroot/ui-react";
 
export default function EyebrowDemo() {
  return (
    <div>
      <Eyebrow>{eyebrowFixture.text}</Eyebrow>
    </div>
  );
}

<script setup lang="ts">
import { Eyebrow } from "@grassroot/ui-vue";
const eyebrowFixture = {
  id: "eyebrow",
  text: "01 · Infrastructure",
} satisfies { id: string; text: string };
 
</script>
 
<template>
  <div>
    <Eyebrow>{{ eyebrowFixture.text }}</Eyebrow>
  </div>
</template>

import { Component } from "@angular/core";
import { GrassrootEyebrow } from "@grassroot/ui-angular";
const eyebrowFixture = {
  id: "eyebrow",
  text: "01 · Infrastructure",
} satisfies { id: string; text: string };
 
@Component({
  selector: "app-eyebrow-demo",
  standalone: true,
  imports: [GrassrootEyebrow],
  template: `
    <div>
      <grassroot-eyebrow>{{ fixture.text }}</grassroot-eyebrow>
    </div>
  `,
})
export class EyebrowDemoComponent {
  protected readonly fixture = eyebrowFixture;
}
 
export default EyebrowDemoComponent;

<script lang="ts">
  import { Eyebrow } from "@grassroot/ui-svelte";
  const eyebrowFixture = {
    id: "eyebrow",
    text: "01 · Infrastructure",
  } satisfies { id: string; text: string };
 
  </script>
 
<div><Eyebrow>{eyebrowFixture.text}</Eyebrow></div>

/** @jsxImportSource solid-js */
import { Eyebrow } from "@grassroot/ui-solid";
const eyebrowFixture = {
  id: "eyebrow",
  text: "01 · Infrastructure",
} satisfies { id: string; text: string };
 
export default function EyebrowDemo() {
  return (
    <div>
      <Eyebrow>{eyebrowFixture.text}</Eyebrow>
    </div>
  );
}