ProductCard

import * as React from "react";
const productCardFixture = {
  id: "product-card",
  name: "Forged steel trowel",
  price: 3200,
  compareAt: 4000,
  image:
    "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3Crect width='400' height='300' fill='%23e8e8ea'/%3E%3Crect x='140' y='90' width='120' height='120' rx='8' fill='%23c9c9cf'/%3E%3C/svg%3E",
  rating: 4.8,
  reviewCount: 64,
  badge: "Sale",
  wishlisted: false,
} satisfies {
  id: string;
  name: string;
  price: number;
  compareAt: number;
  image: string;
  rating: number;
  reviewCount: number;
  badge: string;
  wishlisted: boolean;
};
 
import { ProductCard } from "@grassroot/ui-react";
 
export default function ProductCardDemo() {
  const [wishlisted, setWishlisted] = React.useState<boolean>(productCardFixture.wishlisted);
  return (
    <div>
      <ProductCard
        name={productCardFixture.name}
        price={productCardFixture.price}
        compareAt={productCardFixture.compareAt}
        image={productCardFixture.image}
        rating={productCardFixture.rating}
        reviewCount={productCardFixture.reviewCount}
        badge={productCardFixture.badge}
        wishlisted={wishlisted}
        onToggleWishlist={setWishlisted}
        onAddToCart={() => {}}
      />
    </div>
  );
}

<script setup lang="ts">
import { ref } from "vue";
const productCardFixture = {
  id: "product-card",
  name: "Forged steel trowel",
  price: 3200,
  compareAt: 4000,
  image:
    "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3Crect width='400' height='300' fill='%23e8e8ea'/%3E%3Crect x='140' y='90' width='120' height='120' rx='8' fill='%23c9c9cf'/%3E%3C/svg%3E",
  rating: 4.8,
  reviewCount: 64,
  badge: "Sale",
  wishlisted: false,
} satisfies {
  id: string;
  name: string;
  price: number;
  compareAt: number;
  image: string;
  rating: number;
  reviewCount: number;
  badge: string;
  wishlisted: boolean;
};
 
import { ProductCard } from "@grassroot/ui-vue";
 
const wishlisted = ref(productCardFixture.wishlisted);
</script>
 
<template>
  <div>
    <ProductCard
      :name="productCardFixture.name"
      :price="productCardFixture.price"
      :compare-at="productCardFixture.compareAt"
      :image="productCardFixture.image"
      :rating="productCardFixture.rating"
      :review-count="productCardFixture.reviewCount"
      :badge="productCardFixture.badge"
      v-model:wishlisted="wishlisted"
      @add-to-cart="undefined"
    />
  </div>
</template>

import { Component, signal } from "@angular/core";
const productCardFixture = {
  id: "product-card",
  name: "Forged steel trowel",
  price: 3200,
  compareAt: 4000,
  image:
    "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3Crect width='400' height='300' fill='%23e8e8ea'/%3E%3Crect x='140' y='90' width='120' height='120' rx='8' fill='%23c9c9cf'/%3E%3C/svg%3E",
  rating: 4.8,
  reviewCount: 64,
  badge: "Sale",
  wishlisted: false,
} satisfies {
  id: string;
  name: string;
  price: number;
  compareAt: number;
  image: string;
  rating: number;
  reviewCount: number;
  badge: string;
  wishlisted: boolean;
};
 
import { GrassrootProductCard } from "@grassroot/ui-angular";
 
@Component({
  selector: "app-product-card-demo",
  standalone: true,
  imports: [GrassrootProductCard],
  template: `
    <div>
      <grassroot-product-card
        [name]="fixture.name"
        [price]="fixture.price"
        [compareAt]="fixture.compareAt"
        [image]="fixture.image"
        [rating]="fixture.rating"
        [reviewCount]="fixture.reviewCount"
        [badge]="fixture.badge"
        [wishlisted]="wishlisted()"
        (wishlistedChange)="wishlisted.set($event)"
        (addToCart)="(undefined)"
      />
    </div>
  `,
})
export class ProductCardDemoComponent {
  protected readonly fixture = productCardFixture;
  readonly wishlisted = signal(productCardFixture.wishlisted);
}
 
export default ProductCardDemoComponent;

<script lang="ts">
  import { ProductCard } from "@grassroot/ui-svelte";
  const productCardFixture = {
    id: "product-card",
    name: "Forged steel trowel",
    price: 3200,
    compareAt: 4000,
    image:
      "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3Crect width='400' height='300' fill='%23e8e8ea'/%3E%3Crect x='140' y='90' width='120' height='120' rx='8' fill='%23c9c9cf'/%3E%3C/svg%3E",
    rating: 4.8,
    reviewCount: 64,
    badge: "Sale",
    wishlisted: false,
  } satisfies {
    id: string;
    name: string;
    price: number;
    compareAt: number;
    image: string;
    rating: number;
    reviewCount: number;
    badge: string;
    wishlisted: boolean;
  };
 
  let wishlisted = $state(productCardFixture.wishlisted);
</script>
 
<div>
  <ProductCard
    name={productCardFixture.name}
    price={productCardFixture.price}
    compareAt={productCardFixture.compareAt}
    image={productCardFixture.image}
    rating={productCardFixture.rating}
    reviewCount={productCardFixture.reviewCount}
    badge={productCardFixture.badge}
    bind:wishlisted
    onAddToCart={() => {}}
  />
</div>

/** @jsxImportSource solid-js */
import { createSignal } from "solid-js";
import { ProductCard } from "@grassroot/ui-solid";
const productCardFixture = {
  id: "product-card",
  name: "Forged steel trowel",
  price: 3200,
  compareAt: 4000,
  image:
    "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3Crect width='400' height='300' fill='%23e8e8ea'/%3E%3Crect x='140' y='90' width='120' height='120' rx='8' fill='%23c9c9cf'/%3E%3C/svg%3E",
  rating: 4.8,
  reviewCount: 64,
  badge: "Sale",
  wishlisted: false,
} satisfies {
  id: string;
  name: string;
  price: number;
  compareAt: number;
  image: string;
  rating: number;
  reviewCount: number;
  badge: string;
  wishlisted: boolean;
};
 
export default function ProductCardDemo() {
  const [wishlisted, setWishlisted] = createSignal(productCardFixture.wishlisted);
 
  return (
    <div>
      <ProductCard
        name={productCardFixture.name}
        price={productCardFixture.price}
        compareAt={productCardFixture.compareAt}
        image={productCardFixture.image}
        rating={productCardFixture.rating}
        reviewCount={productCardFixture.reviewCount}
        badge={productCardFixture.badge}
        wishlisted={wishlisted()}
        onToggleWishlist={setWishlisted}
        onAddToCart={() => {}}
      />
    </div>
  );
}