HoverCard

const hoverCardFixture = {
  id: "hovercard",
  trigger: "@riya",
  name: "Riya Kapoor",
  body: "Owns ledger-api deploy pipeline.",
  side: "bottom",
  openDelay: 200,
  closeDelay: 120,
} satisfies {
  id: string;
  trigger: string;
  name: string;
  body: string;
  side: "top" | "bottom";
  openDelay: number;
  closeDelay: number;
};
 
import { HoverCard } from "@grassroot/ui-react";
 
export default function HoverCardDemo() {
  return (
    <div>
      <HoverCard
        trigger={<span className="text-heading underline">{hoverCardFixture.trigger}</span>}
        side={hoverCardFixture.side}
        openDelay={hoverCardFixture.openDelay}
        closeDelay={hoverCardFixture.closeDelay}
      >
        <div className="font-semibold text-heading">{hoverCardFixture.name}</div>
        <div className="text-body">{hoverCardFixture.body}</div>
      </HoverCard>
    </div>
  );
}

<script setup lang="ts">
const hoverCardFixture = {
  id: "hovercard",
  trigger: "@riya",
  name: "Riya Kapoor",
  body: "Owns ledger-api deploy pipeline.",
  side: "bottom",
  openDelay: 200,
  closeDelay: 120,
} satisfies {
  id: string;
  trigger: string;
  name: string;
  body: string;
  side: "top" | "bottom";
  openDelay: number;
  closeDelay: number;
};
 
import { HoverCard } from "@grassroot/ui-vue";
</script>
 
<template>
  <div>
    <HoverCard
      :side="hoverCardFixture.side"
      :open-delay="hoverCardFixture.openDelay"
      :close-delay="hoverCardFixture.closeDelay"
    >
      <template #trigger
        ><span class="text-heading underline">{{ hoverCardFixture.trigger }}</span></template
      >
      <div class="font-semibold text-heading">{{ hoverCardFixture.name }}</div>
      <div class="text-body">{{ hoverCardFixture.body }}</div>
    </HoverCard>
  </div>
</template>

import { Component } from "@angular/core";
const hoverCardFixture = {
  id: "hovercard",
  trigger: "@riya",
  name: "Riya Kapoor",
  body: "Owns ledger-api deploy pipeline.",
  side: "bottom",
  openDelay: 200,
  closeDelay: 120,
} satisfies {
  id: string;
  trigger: string;
  name: string;
  body: string;
  side: "top" | "bottom";
  openDelay: number;
  closeDelay: number;
};
 
import { GrassrootHoverCard } from "@grassroot/ui-angular";
 
@Component({
  selector: "app-hover-card-demo",
  standalone: true,
  imports: [GrassrootHoverCard],
  template: `
    <div>
      <grassroot-hover-card
        [side]="fixture.side"
        [openDelay]="fixture.openDelay"
        [closeDelay]="fixture.closeDelay"
      >
        <span trigger class="text-heading underline">{{ fixture.trigger }}</span>
        <div class="font-semibold text-heading">{{ fixture.name }}</div>
        <div class="text-body">{{ fixture.body }}</div>
      </grassroot-hover-card>
    </div>
  `,
})
export class HoverCardDemoComponent {
  protected readonly fixture = hoverCardFixture;
}
 
export default HoverCardDemoComponent;

<script lang="ts">
  import { HoverCard } from "@grassroot/ui-svelte";
  const hoverCardFixture = {
    id: "hovercard",
    trigger: "@riya",
    name: "Riya Kapoor",
    body: "Owns ledger-api deploy pipeline.",
    side: "bottom",
    openDelay: 200,
    closeDelay: 120,
  } satisfies {
    id: string;
    trigger: string;
    name: string;
    body: string;
    side: "top" | "bottom";
    openDelay: number;
    closeDelay: number;
  };
 
  </script>
 
{#snippet trigger()}<span class="text-heading underline">{hoverCardFixture.trigger}</span>{/snippet}
{#snippet children()}<div class="font-semibold text-heading">{hoverCardFixture.name}</div>
  <div class="text-body">{hoverCardFixture.body}</div>{/snippet}
<div>
  <HoverCard
    side={hoverCardFixture.side}
    openDelay={hoverCardFixture.openDelay}
    closeDelay={hoverCardFixture.closeDelay}
    {trigger}
    {children}
  />
</div>

/** @jsxImportSource solid-js */
import { HoverCard } from "@grassroot/ui-solid";
const hoverCardFixture = {
  id: "hovercard",
  trigger: "@riya",
  name: "Riya Kapoor",
  body: "Owns ledger-api deploy pipeline.",
  side: "bottom",
  openDelay: 200,
  closeDelay: 120,
} satisfies {
  id: string;
  trigger: string;
  name: string;
  body: string;
  side: "top" | "bottom";
  openDelay: number;
  closeDelay: number;
};
 
export default function HoverCardDemo() {
  return (
    <div>
      <HoverCard
        trigger={<span class="text-heading underline">{hoverCardFixture.trigger}</span>}
        side={hoverCardFixture.side}
        openDelay={hoverCardFixture.openDelay}
        closeDelay={hoverCardFixture.closeDelay}
      >
        <div class="font-semibold text-heading">{hoverCardFixture.name}</div>
        <div class="text-body">{hoverCardFixture.body}</div>
      </HoverCard>
    </div>
  );
}