Sticker

const stickerFixture = {
  id: "sticker",
  items: [
    { label: "What I build", tone: "accent", rotate: -3 },
    { label: "Boring tech", tone: "neutral", rotate: 2 },
    { label: "It just runs", tone: "success", rotate: -1 },
  ],
} satisfies {
  id: string;
  items: ReadonlyArray<{
    label: string;
    tone: "accent" | "neutral" | "success" | "info";
    rotate: number;
  }>;
};
 
import { Sticker } from "@grassroot/ui-react";
 
export default function StickerDemo() {
  return (
    <div>
      {stickerFixture.items.map((item) => (
        <Sticker key={item.label} tone={item.tone} rotate={item.rotate}>
          {item.label}
        </Sticker>
      ))}
    </div>
  );
}

<script setup lang="ts">
const stickerFixture = {
  id: "sticker",
  items: [
    { label: "What I build", tone: "accent", rotate: -3 },
    { label: "Boring tech", tone: "neutral", rotate: 2 },
    { label: "It just runs", tone: "success", rotate: -1 },
  ],
} satisfies {
  id: string;
  items: ReadonlyArray<{
    label: string;
    tone: "accent" | "neutral" | "success" | "info";
    rotate: number;
  }>;
};
 
import { Sticker } from "@grassroot/ui-vue";
</script>
 
<template>
  <div>
    <Sticker
      v-for="item in stickerFixture.items"
      :key="item.label"
      :tone="item.tone"
      :rotate="item.rotate"
      >{{ item.label }}</Sticker
    >
  </div>
</template>

import { Component } from "@angular/core";
const stickerFixture = {
  id: "sticker",
  items: [
    { label: "What I build", tone: "accent", rotate: -3 },
    { label: "Boring tech", tone: "neutral", rotate: 2 },
    { label: "It just runs", tone: "success", rotate: -1 },
  ],
} satisfies {
  id: string;
  items: ReadonlyArray<{
    label: string;
    tone: "accent" | "neutral" | "success" | "info";
    rotate: number;
  }>;
};
 
import { GrassrootSticker } from "@grassroot/ui-angular";
 
@Component({
  selector: "app-sticker-demo",
  standalone: true,
  imports: [GrassrootSticker],
  template: `
    <div>
      @for (item of fixture.items; track item.label) {
        <grassroot-sticker [tone]="item.tone" [rotate]="item.rotate">{{
          item.label
        }}</grassroot-sticker>
      }
    </div>
  `,
})
export class StickerDemoComponent {
  protected readonly fixture = stickerFixture;
}
 
export default StickerDemoComponent;

<script lang="ts">
  const stickerFixture = {
    id: "sticker",
    items: [
      { label: "What I build", tone: "accent", rotate: -3 },
      { label: "Boring tech", tone: "neutral", rotate: 2 },
      { label: "It just runs", tone: "success", rotate: -1 },
    ],
  } satisfies {
    id: string;
    items: ReadonlyArray<{
      label: string;
      tone: "accent" | "neutral" | "success" | "info";
      rotate: number;
    }>;
  };
 
  import { Sticker } from "@grassroot/ui-svelte";
</script>
 
<div>
  {#each stickerFixture.items as item (item.label)}
    <Sticker tone={item.tone} rotate={item.rotate}>{item.label}</Sticker>
  {/each}
</div>

/** @jsxImportSource solid-js */
import { Sticker } from "@grassroot/ui-solid";
const stickerFixture = {
  id: "sticker",
  items: [
    { label: "What I build", tone: "accent", rotate: -3 },
    { label: "Boring tech", tone: "neutral", rotate: 2 },
    { label: "It just runs", tone: "success", rotate: -1 },
  ],
} satisfies {
  id: string;
  items: ReadonlyArray<{
    label: string;
    tone: "accent" | "neutral" | "success" | "info";
    rotate: number;
  }>;
};
 
export default function StickerDemo() {
  return (
    <div>
      {stickerFixture.items.map((item) => (
        <Sticker tone={item.tone} rotate={item.rotate}>
          {item.label}
        </Sticker>
      ))}
    </div>
  );
}