Footnotes

import { Footnotes } from "@grassroot/ui-react";
 
const definitions = [
  { identifier: "1", text: "The source remains plain data." },
  { identifier: "2", text: "The adapter owns the DOM." },
];
 
export default function FootnotesDemo() {
  return <Footnotes definitions={definitions} />;
}

<script setup lang="ts">
import { Footnotes } from "@grassroot/ui-vue";
 
const definitions = [
  { identifier: "1", text: "The source remains plain data." },
  { identifier: "2", text: "The adapter owns the DOM." },
];
</script>
 
<template>
  <Footnotes :definitions="definitions" />
</template>

import { Component } from "@angular/core";
import { GrassrootFootnotes } from "@grassroot/ui-angular";
 
@Component({
  selector: "app-footnotes-demo",
  standalone: true,
  imports: [GrassrootFootnotes],
  host: { style: "display: contents" },
  template: `<grassroot-footnotes [definitions]="definitions" />`,
})
export class FootnotesDemoComponent {
  protected readonly definitions = [
    { identifier: "1", text: "The source remains plain data." },
    { identifier: "2", text: "The adapter owns the DOM." },
  ];
}
 
export default FootnotesDemoComponent;

<script lang="ts">
  import { Footnotes } from "@grassroot/ui-svelte";
 
  const definitions = [
    { identifier: "1", text: "The source remains plain data." },
    { identifier: "2", text: "The adapter owns the DOM." },
  ];
</script>
 
<Footnotes {definitions} />

/** @jsxImportSource solid-js */
import { Footnotes } from "@grassroot/ui-solid";
 
const definitions = [
  { identifier: "1", text: "The source remains plain data." },
  { identifier: "2", text: "The adapter owns the DOM." },
];
 
export default function FootnotesDemo() {
  return <Footnotes definitions={definitions} />;
}