SolidJS Development

# SolidJS Component Implementation Guide

## Task: Create a High-Performance Product Card Component

Here's a complete implementation for your e-commerce dashboard:

```jsx
import { createSignal, onCleanup } from 'solid-js';

const ProductCard = ({ product }) => {
  const [isHovered, setIsHovered] = createSignal(false);
  const [timeLeft, setTimeLeft] = createSignal(
    Math.max(0, Math.floor((new Date(product.expiryDate) - Date.now()) / 1000))
  );

  // Countdown timer effect
  const timer = setInterval(() => {
    const newTime = timeLeft() - 1;
    setTimeLeft(newTime > 0 ? newTime : 0);
  }, 1000);

  onCleanup(() => clearInterval(timer));

  return (
    <div
      class="product-card"
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
    >
      <div class="product-image-container">
        <img src={product.image} alt={product.name} loading="lazy" />
        {timeLeft() > 0 && (
          <div class="flash-sale-badge">
            {Math.floor(timeLeft() / 3600)}h {Math.floor((timeLeft() % 3600) / 60)}m left
          </div>
        )}
      </div>
      <h3>{product.name}</h3>
      <div class="price-container">
        <span class="original-price">${product.originalPrice}</span>
        <span class="discounted-price">${product.discountPrice}</span>
        <span class="savings">-{Math.round(100 * (1 - product.discountPrice/product.originalPrice))}%</span>
      </div>
      <button class="add-to-cart" use:ripple>
        {isHovered() ? 'Quick Add' : 'Add to Cart'}
      </button>
    </div>
  );
};
```

## Key Optimizations Implemented:
- **Reactive Countdown**: Uses Solid's fine-grained reactivity for the timer
- **Lazy Loading**: Image loads only when component renders
- **Hover State Management**: Efficiently tracks hover without re-renders
- **Cleanup**: Properly removes interval on unmount
- **CSS-in-JS Ready**: Can be styled with any Solid-compatible solution