EmptyState

const emptyStateFixture = {
  id: "empty-state",
  icon: "∅",
  title: "No deployments yet",
  description: "Connect a repository to run your first pipeline.",
  action: "Connect repository",
} satisfies {
  id: string;
  icon: string;
  title: string;
  description: string;
  action: string;
};
 
import { EmptyState } from "@grassroot/ui-react";
 
export default function EmptyStateDemo() {
  return (
    <div>
      <EmptyState
        icon={<span aria-hidden="true">{emptyStateFixture.icon}</span>}
        title={emptyStateFixture.title}
        description={emptyStateFixture.description}
        action={<button type="button">{emptyStateFixture.action}</button>}
      />
    </div>
  );
}

<script setup lang="ts">
const emptyStateFixture = {
  id: "empty-state",
  icon: "∅",
  title: "No deployments yet",
  description: "Connect a repository to run your first pipeline.",
  action: "Connect repository",
} satisfies {
  id: string;
  icon: string;
  title: string;
  description: string;
  action: string;
};
 
import { EmptyState } from "@grassroot/ui-vue";
</script>
 
<template>
  <div>
    <EmptyState :title="emptyStateFixture.title" :description="emptyStateFixture.description">
      <template #icon
        ><span aria-hidden="true">{{ emptyStateFixture.icon }}</span></template
      >
      <template #action
        ><button type="button">{{ emptyStateFixture.action }}</button></template
      >
    </EmptyState>
  </div>
</template>

import { Component } from "@angular/core";
const emptyStateFixture = {
  id: "empty-state",
  icon: "∅",
  title: "No deployments yet",
  description: "Connect a repository to run your first pipeline.",
  action: "Connect repository",
} satisfies {
  id: string;
  icon: string;
  title: string;
  description: string;
  action: string;
};
 
import { GrassrootEmptyState } from "@grassroot/ui-angular";
 
@Component({
  selector: "app-empty-state-demo",
  standalone: true,
  imports: [GrassrootEmptyState],
  template: `
    <div>
      <div grassrootEmptyState [title]="fixture.title" [description]="fixture.description">
        <span icon aria-hidden="true">{{ fixture.icon }}</span>
        <button action type="button">{{ fixture.action }}</button>
      </div>
    </div>
  `,
})
export class EmptyStateDemoComponent {
  protected readonly fixture = emptyStateFixture;
}
 
export default EmptyStateDemoComponent;

<script lang="ts">
  const emptyStateFixture = {
    id: "empty-state",
    icon: "∅",
    title: "No deployments yet",
    description: "Connect a repository to run your first pipeline.",
    action: "Connect repository",
  } satisfies {
    id: string;
    icon: string;
    title: string;
    description: string;
    action: string;
  };
 
  import { EmptyState } from "@grassroot/ui-svelte";
</script>
 
{#snippet icon()}<span aria-hidden="true">{emptyStateFixture.icon}</span>{/snippet}
{#snippet action()}<button type="button">{emptyStateFixture.action}</button>{/snippet}
 
<div>
  <EmptyState
    title={emptyStateFixture.title}
    description={emptyStateFixture.description}
    {icon}
    {action}
  />
</div>

/** @jsxImportSource solid-js */
const emptyStateFixture = {
  id: "empty-state",
  icon: "∅",
  title: "No deployments yet",
  description: "Connect a repository to run your first pipeline.",
  action: "Connect repository",
} satisfies {
  id: string;
  icon: string;
  title: string;
  description: string;
  action: string;
};
 
import { EmptyState } from "@grassroot/ui-solid";
import type { JSX } from "solid-js";
 
export default function EmptyStateDemo(): JSX.Element {
  return (
    <div>
      <EmptyState
        icon={<span aria-hidden="true">{emptyStateFixture.icon}</span>}
        title={emptyStateFixture.title}
        description={emptyStateFixture.description}
        action={<button type="button">{emptyStateFixture.action}</button>}
      />
    </div>
  );
}