Let's build a website that tells your story

import { useState, useEffect } from 'react';
import { useCart } from '@store/cart';
import { ProductCard } from '@/components/ui';

export default function Storefront({ products }) {
  const { addToCart } = useCart();
  const [isLoaded, setIsLoaded] = useState(false);

  useEffect(() => {
    performance.mark('store-init');
    setIsLoaded(true);
  }, []);

  const handleBuy = async (id) => {
    await addToCart(id);
    console.log('[Success] Added in 0.02s');
  };

  return (
    <div className="grid gap-6 grid-cols-4">
      {products.map((p) => (
        <ProductCard key={p.id} data={p} onAdd={handleBuy} />
      ))}
    </div>
  );
}

import { useState, useEffect } from 'react';
import { useCart } from '@store/cart';
import { ProductCard } from '@/components/ui';

export default function Storefront({ products }) {
  const { addToCart } = useCart();
  const [isLoaded, setIsLoaded] = useState(false);

  useEffect(() => {
    performance.mark('store-init');
    setIsLoaded(true);
  }, []);

  const handleBuy = async (id) => {
    await addToCart(id);
    console.log('[Success] Added in 0.02s');
  };

  return (
    <div className="grid gap-6 grid-cols-4">
      {products.map((p) => (
        <ProductCard key={p.id} data={p} onAdd={handleBuy} />
      ))}
    </div>
  );
}