AI Generate Custom Components

@Component({
  selector: 'custom-product-card',
  template: `
    <div class="product-card">
      <img [src]="imageUrl" [alt]="productName" class="product-image">
      <div class="product-content">
        <h3 class="product-name">{{productName}}</h3>
        <p class="product-price">{{currency}}{{price}}</p>
        <p class="product-description">{{description}}</p>
        <button class="add-to-cart-btn" (click)="onAddToCart()">
          Add to Cart
        </button>
      </div>
    </div>
  `,
  styles: [`
    .product-card {
      border-radius: 8px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
      overflow: hidden;
      transition: box-shadow 0.2s;
    }
    .product-card:hover {
      box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    }
    /* ... additional styles */
  `]
})
export class ProductCardComponent {
  @Input() imageUrl: string;
  @Input() productName: string;
  @Input() price: number;
  @Input() currency: string = '$';
  @Input() description: string;

  @Output() addToCart = new EventEmitter<void>();

  onAddToCart() {
    this.addToCart.emit();
  }
}

{
  "properties": [
    {
      "name": "imageUrl",
      "type": "string",
      "label": "Image URL",
      "description": "URL of the product image"
    },
    {
      "name": "productName",
      "type": "string",
      "label": "Product Name",
      "description": "Name of the product"
    },
    {
      "name": "price",
      "type": "number",
      "label": "Price",
      "description": "Product price"
    }
  ],
  "events": [
    {
      "name": "addToCart",
      "label": "Add to Cart",
      "description": "Fired when user clicks the Add to Cart button"
    }
  ]
}