Powerful Features for Modern Development

import React from 'react';

const ProductCard = ({ title, price, description }) => {
  return (
    <div className="product-card">
      <h5>{title}</h5>
      <p>{description}</p>
      <div className="card-footer">
        <span className="price">${price}</span>
        <button className="btn-primary">
          Add to Cart
        </button>
      </div>
    </div>
  );
};

<template>
  <div class="product-card">
    <h5>{{ title }}</h5>
    <p>{{ description }}</p>
    <div class="card-footer">
      <span class="price">${{ price }}</span>
      <button class="btn-primary">
        Add to Cart
      </button>
    </div>
  </div>
</template>

<script setup>
defineProps(['title', 'price', 'description'])
</script>

@Component({
  selector: 'app-product-card',
  template: `
    <div class="product-card">
      <h5>{{ title }}</h5>
      <p>{{ description }}</p>
      <div class="card-footer">
        <span class="price">${{ price }}</span>
        <button class="btn-primary">
          Add to Cart
        </button>
      </div>
    </div>
  `
})
export class ProductCardComponent {
  @Input() title: string;
  @Input() price: number;
  @Input() description: string;
}

@page "/product-card"

<div class="product-card">
    <h5>@Title</h5>
    <p>@Description</p>
    <div class="card-footer">
        <span class="price">$@Price</span>
        <button class="btn-primary" @onclick="AddToCart">
            Add to Cart
        </button>
    </div>
</div>

@code {
    [Parameter] public string Title { get; set; }
    [Parameter] public decimal Price { get; set; }
    [Parameter] public string Description { get; set; }
    
    private void AddToCart() {
        // Add to cart logic
    }
}

<div class="product-card">
  <h5 id="product-title">Product Title</h5>
  <p id="product-description">Product description</p>
  <div class="card-footer">
    <span class="price" id="product-price">$299</span>
    <button class="btn-primary" onclick="addToCart()">
      Add to Cart
    </button>
  </div>
</div>

<script>
function addToCart() {
  // Add to cart functionality
}
</script>