ProductCard

import { ProductCard } from "@grassroot/ui-react";
 
<ProductCard
  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"
  onAddToCart={() => {}}
/>

<script setup lang="ts">
import { ProductCard } from "@grassroot/ui-vue";
</script>
 
<template>
  <ProductCard
    name="Forged steel trowel"
    :price="3200"
    :compare-at="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"
    :review-count="64"
    badge="Sale"
    @add-to-cart="undefined"
  />
</template>

import { Component } from "@angular/core";
import { GrassrootProductCard } from "@grassroot/ui-angular";
 
@Component({
  selector: "app-example",
  standalone: true,
  imports: [GrassrootProductCard],
  template: `
    <grassroot-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"
      (addToCart)="undefined"
    />
  `,
})
export class ExampleComponent {
}

<script lang="ts">
  import { ProductCard } from "@grassroot/ui-svelte";
</script>
 
<ProductCard
  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"
  onAddToCart={() => {}}
/>

import { ProductCard } from "@grassroot/ui-solid";
 
export function Example() {
  return (
    <>
      <ProductCard
        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"
        onAddToCart={() => {}}
      />
    </>
  );
}