WishlistButton

const wishlistButtonFixture = {
  id: "wishlist-button",
  defaultPressed: true,
  largeSize: "lg",
} satisfies {
  id: string;
  defaultPressed: boolean;
  largeSize: "sm" | "md" | "lg";
};
 
import { WishlistButton } from "@grassroot/ui-react";
 
export default function WishlistButtonDemo() {
  return (
    <div>
      <WishlistButton defaultPressed={wishlistButtonFixture.defaultPressed} />
      <WishlistButton size={wishlistButtonFixture.largeSize} />
    </div>
  );
}

<script setup lang="ts">
import { ref } from "vue";
const wishlistButtonFixture = {
  id: "wishlist-button",
  defaultPressed: true,
  largeSize: "lg",
} satisfies {
  id: string;
  defaultPressed: boolean;
  largeSize: "sm" | "md" | "lg";
};
 
import { WishlistButton } from "@grassroot/ui-vue";
 
const pressed = ref(wishlistButtonFixture.defaultPressed);
</script>
 
<template>
  <div>
    <WishlistButton v-model:pressed="pressed" />
    <WishlistButton :size="wishlistButtonFixture.largeSize" />
  </div>
</template>

import { Component, signal } from "@angular/core";
const wishlistButtonFixture = {
  id: "wishlist-button",
  defaultPressed: true,
  largeSize: "lg",
} satisfies {
  id: string;
  defaultPressed: boolean;
  largeSize: "sm" | "md" | "lg";
};
 
import { GrassrootWishlistButton } from "@grassroot/ui-angular";
 
@Component({
  selector: "app-wishlist-button-demo",
  standalone: true,
  imports: [GrassrootWishlistButton],
  template: `
    <div>
      <grassroot-wishlist-button [pressed]="pressed()" (pressedChange)="pressed.set($event)" />
      <grassroot-wishlist-button [size]="fixture.largeSize" />
    </div>
  `,
})
export class WishlistButtonDemoComponent {
  protected readonly fixture = wishlistButtonFixture;
  readonly pressed = signal(wishlistButtonFixture.defaultPressed);
}
 
export default WishlistButtonDemoComponent;

<script lang="ts">
  import { WishlistButton } from "@grassroot/ui-svelte";
  const wishlistButtonFixture = {
    id: "wishlist-button",
    defaultPressed: true,
    largeSize: "lg",
  } satisfies {
    id: string;
    defaultPressed: boolean;
    largeSize: "sm" | "md" | "lg";
  };
 
  </script>
 
<div>
  <WishlistButton defaultPressed={wishlistButtonFixture.defaultPressed} /><WishlistButton
    size={wishlistButtonFixture.largeSize}
  />
</div>

/** @jsxImportSource solid-js */
import { WishlistButton } from "@grassroot/ui-solid";
const wishlistButtonFixture = {
  id: "wishlist-button",
  defaultPressed: true,
  largeSize: "lg",
} satisfies {
  id: string;
  defaultPressed: boolean;
  largeSize: "sm" | "md" | "lg";
};
 
export default function WishlistButtonDemo() {
  return (
    <div>
      <WishlistButton defaultPressed={wishlistButtonFixture.defaultPressed} />
      <WishlistButton size={wishlistButtonFixture.largeSize} />
    </div>
  );
}