Popover

const popoverFixture = {
  id: "popover",
  trigger: "ledger-api",
  title: "ledger-api",
  body: "Event-sourced payments ledger.",
  side: "bottom",
  align: "start",
} satisfies {
  id: string;
  trigger: string;
  title: string;
  body: string;
  side: "top" | "bottom";
  align: "start" | "end";
};
 
import { Popover } from "@grassroot/ui-react";
 
export default function PopoverDemo() {
  return (
    <div>
      <Popover
        trigger={popoverFixture.trigger}
        side={popoverFixture.side}
        align={popoverFixture.align}
      >
        <div className="px-1.5 py-1 font-semibold text-heading">{popoverFixture.title}</div>
        <div className="px-1.5 pb-2 text-body">{popoverFixture.body}</div>
      </Popover>
    </div>
  );
}

<script setup lang="ts">
const popoverFixture = {
  id: "popover",
  trigger: "ledger-api",
  title: "ledger-api",
  body: "Event-sourced payments ledger.",
  side: "bottom",
  align: "start",
} satisfies {
  id: string;
  trigger: string;
  title: string;
  body: string;
  side: "top" | "bottom";
  align: "start" | "end";
};
 
import { Popover } from "@grassroot/ui-vue";
</script>
 
<template>
  <div>
    <Popover :side="popoverFixture.side" :align="popoverFixture.align">
      <template #trigger>{{ popoverFixture.trigger }}</template>
      <div class="px-1.5 py-1 font-semibold text-heading">{{ popoverFixture.title }}</div>
      <div class="px-1.5 pb-2 text-body">{{ popoverFixture.body }}</div>
    </Popover>
  </div>
</template>

import { Component } from "@angular/core";
const popoverFixture = {
  id: "popover",
  trigger: "ledger-api",
  title: "ledger-api",
  body: "Event-sourced payments ledger.",
  side: "bottom",
  align: "start",
} satisfies {
  id: string;
  trigger: string;
  title: string;
  body: string;
  side: "top" | "bottom";
  align: "start" | "end";
};
 
import { GrassrootPopover } from "@grassroot/ui-angular";
 
@Component({
  selector: "app-popover-demo",
  standalone: true,
  imports: [GrassrootPopover],
  template: `
    <div>
      <grassroot-popover [side]="fixture.side" [align]="fixture.align">
        <ng-container ngProjectAs="[trigger]">{{ fixture.trigger }}</ng-container>
        <div class="px-1.5 py-1 font-semibold text-heading">{{ fixture.title }}</div>
        <div class="px-1.5 pb-2 text-body">{{ fixture.body }}</div>
      </grassroot-popover>
    </div>
  `,
})
export class PopoverDemoComponent {
  protected readonly fixture = popoverFixture;
}
 
export default PopoverDemoComponent;

<script lang="ts">
  import { Popover } from "@grassroot/ui-svelte";
  const popoverFixture = {
    id: "popover",
    trigger: "ledger-api",
    title: "ledger-api",
    body: "Event-sourced payments ledger.",
    side: "bottom",
    align: "start",
  } satisfies {
    id: string;
    trigger: string;
    title: string;
    body: string;
    side: "top" | "bottom";
    align: "start" | "end";
  };
 
  </script>
 
{#snippet trigger()}{popoverFixture.trigger}{/snippet}
{#snippet children()}<div class="px-1.5 py-1 font-semibold text-heading">
    {popoverFixture.title}
  </div>
  <div class="px-1.5 pb-2 text-body">{popoverFixture.body}</div>{/snippet}
<div>
  <Popover side={popoverFixture.side} align={popoverFixture.align} {trigger} {children} />
</div>

/** @jsxImportSource solid-js */
import { Popover } from "@grassroot/ui-solid";
const popoverFixture = {
  id: "popover",
  trigger: "ledger-api",
  title: "ledger-api",
  body: "Event-sourced payments ledger.",
  side: "bottom",
  align: "start",
} satisfies {
  id: string;
  trigger: string;
  title: string;
  body: string;
  side: "top" | "bottom";
  align: "start" | "end";
};
 
export default function PopoverDemo() {
  return (
    <div>
      <Popover
        trigger={popoverFixture.trigger}
        side={popoverFixture.side}
        align={popoverFixture.align}
      >
        <div class="px-1.5 py-1 font-semibold text-heading">{popoverFixture.title}</div>
        <div class="px-1.5 pb-2 text-body">{popoverFixture.body}</div>
      </Popover>
    </div>
  );
}