Price

const priceFixture = {
  id: "price",
  amount: 3200,
  saleAmount: 8900,
  saleCompareAt: 10400,
  saleSize: "lg",
  localizedAmount: 1800,
  localizedCurrency: "EUR",
  localizedLocale: "de-DE",
} satisfies {
  id: string;
  amount: number;
  saleAmount: number;
  saleCompareAt: number;
  saleSize: "sm" | "md" | "lg";
  localizedAmount: number;
  localizedCurrency: string;
  localizedLocale: string;
};
 
import { Price } from "@grassroot/ui-react";
 
export default function PriceDemo() {
  return (
    <div>
      <Price amount={priceFixture.amount} />
      <Price
        amount={priceFixture.saleAmount}
        compareAt={priceFixture.saleCompareAt}
        size={priceFixture.saleSize}
      />
      <Price
        amount={priceFixture.localizedAmount}
        currency={priceFixture.localizedCurrency}
        locale={priceFixture.localizedLocale}
      />
    </div>
  );
}

<script setup lang="ts">
const priceFixture = {
  id: "price",
  amount: 3200,
  saleAmount: 8900,
  saleCompareAt: 10400,
  saleSize: "lg",
  localizedAmount: 1800,
  localizedCurrency: "EUR",
  localizedLocale: "de-DE",
} satisfies {
  id: string;
  amount: number;
  saleAmount: number;
  saleCompareAt: number;
  saleSize: "sm" | "md" | "lg";
  localizedAmount: number;
  localizedCurrency: string;
  localizedLocale: string;
};
 
import { Price } from "@grassroot/ui-vue";
</script>
 
<template>
  <div>
    <Price :amount="priceFixture.amount" />
    <Price
      :amount="priceFixture.saleAmount"
      :compare-at="priceFixture.saleCompareAt"
      :size="priceFixture.saleSize"
    />
    <Price
      :amount="priceFixture.localizedAmount"
      :currency="priceFixture.localizedCurrency"
      :locale="priceFixture.localizedLocale"
    />
  </div>
</template>

import { Component } from "@angular/core";
const priceFixture = {
  id: "price",
  amount: 3200,
  saleAmount: 8900,
  saleCompareAt: 10400,
  saleSize: "lg",
  localizedAmount: 1800,
  localizedCurrency: "EUR",
  localizedLocale: "de-DE",
} satisfies {
  id: string;
  amount: number;
  saleAmount: number;
  saleCompareAt: number;
  saleSize: "sm" | "md" | "lg";
  localizedAmount: number;
  localizedCurrency: string;
  localizedLocale: string;
};
 
import { GrassrootPrice } from "@grassroot/ui-angular";
 
@Component({
  selector: "app-price-demo",
  standalone: true,
  imports: [GrassrootPrice],
  template: `
    <div>
      <grassroot-price [amount]="fixture.amount" />
      <grassroot-price
        [amount]="fixture.saleAmount"
        [compareAt]="fixture.saleCompareAt"
        [size]="fixture.saleSize"
      />
      <grassroot-price
        [amount]="fixture.localizedAmount"
        [currency]="fixture.localizedCurrency"
        [locale]="fixture.localizedLocale"
      />
    </div>
  `,
})
export class PriceDemoComponent {
  protected readonly fixture = priceFixture;
}
 
export default PriceDemoComponent;

<script lang="ts">
  import { Price } from "@grassroot/ui-svelte";
  const priceFixture = {
    id: "price",
    amount: 3200,
    saleAmount: 8900,
    saleCompareAt: 10400,
    saleSize: "lg",
    localizedAmount: 1800,
    localizedCurrency: "EUR",
    localizedLocale: "de-DE",
  } satisfies {
    id: string;
    amount: number;
    saleAmount: number;
    saleCompareAt: number;
    saleSize: "sm" | "md" | "lg";
    localizedAmount: number;
    localizedCurrency: string;
    localizedLocale: string;
  };
 
  </script>
 
<div>
  <Price amount={priceFixture.amount} /><Price
    amount={priceFixture.saleAmount}
    compareAt={priceFixture.saleCompareAt}
    size={priceFixture.saleSize}
  /><Price
    amount={priceFixture.localizedAmount}
    currency={priceFixture.localizedCurrency}
    locale={priceFixture.localizedLocale}
  />
</div>

/** @jsxImportSource solid-js */
import { Price } from "@grassroot/ui-solid";
const priceFixture = {
  id: "price",
  amount: 3200,
  saleAmount: 8900,
  saleCompareAt: 10400,
  saleSize: "lg",
  localizedAmount: 1800,
  localizedCurrency: "EUR",
  localizedLocale: "de-DE",
} satisfies {
  id: string;
  amount: number;
  saleAmount: number;
  saleCompareAt: number;
  saleSize: "sm" | "md" | "lg";
  localizedAmount: number;
  localizedCurrency: string;
  localizedLocale: string;
};
 
export default function PriceDemo() {
  return (
    <div>
      <Price amount={priceFixture.amount} />
      <Price
        amount={priceFixture.saleAmount}
        compareAt={priceFixture.saleCompareAt}
        size={priceFixture.saleSize}
      />
      <Price
        amount={priceFixture.localizedAmount}
        currency={priceFixture.localizedCurrency}
        locale={priceFixture.localizedLocale}
      />
    </div>
  );
}