import { useState, useEffect } from "react"; import { Link, useLocation } from "wouter"; import { Button } from "@/components/ui/button"; export function Header() { const [isScrolled, setIsScrolled] = useState(false); const [location] = useLocation(); useEffect(() => { const handleScroll = () => { setIsScrolled(window.scrollY > 10); }; window.addEventListener("scroll", handleScroll); return () => window.removeEventListener("scroll", handleScroll); }, []); const isActive = (path: string) => location === path; return (

SaaSHub Get Started

); }

DOCTYPE html>

Hello World!

New chat started from template **Kids Memory Game** ```typescriptreact project="Kids Memory Game" ... ```

@tailwind base; @tailwind components; @tailwind utilities; @layer utilities { .perspective-1000 { perspective: 1000px; } .transform-style-3d { transform-style: preserve-3d; } .backface-hidden { backface-visibility: hidden; } } @layer base { :root { --background: 224 71% 4%; --foreground: 213 31% 91%; --primary: 224 64% 33%; --primary-foreground: 210 40% 98%; --accent: 216 34% 17%; --accent-foreground: 210 40% 98%; --border: 216 34% 17%; --ring: 216 34% 17%; --radius: 0.5rem; } }

// Sample product data (you can replace this with your actual product data) const products = [ { id: 1, name: 'Product 1', price: 19.99, image: 'https://via.placeholder.com/150' }, { id: 2, name: 'Product 2', price: 29.99, image: 'https://via.placeholder.com/150' }, { id: 3, name: 'Product 3', price: 39.99, image: 'https://via.placeholder.com/150' }, // Add more products as needed ]; let cart = []; // Function to render product list function renderProducts() { const productList = document.querySelector('.product-list'); productList.innerHTML = ''; products.forEach(product => { const productElement = document.createElement('div'); productElement.classList.add('product-item'); productElement.innerHTML = `

${product.name}

$${product.price.toFixed(2)}

Add to Cart `; productList.appendChild(productElement); }); } // Function to add item to cart function addToCart(productId) { const product = products.find(p => p.id === productId); if (product) { cart.push(product); updateCartCount(); } } // Function to update cart count function updateCartCount() { const cartCount = document.getElementById('cart-count'); cartCount.textContent = cart.length; } // Function to render cart items function renderCart() { const cartItems = document.getElementById('cart-items'); const cartTotal = document.getElementById('cart-total'); cartItems.innerHTML = ''; let total = 0; cart.forEach(item => { const itemElement = document.createElement('div'); itemElement.innerHTML = `

${item.name} - $${item.price.toFixed(2)}

`; cartItems.appendChild(itemElement); total += item.price; }); cartTotal.textContent = total.toFixed(2); } // Event listeners document.addEventListener('DOMContentLoaded', () => { renderProducts(); const cartIcon = document.querySelector('.cart-icon'); const modal = document.getElementById('cart-modal'); const closeModal = document.getElementById('close-modal'); const checkoutBtn = document.getElementById('checkout-btn'); cartIcon.addEventListener('click', () => { renderCart(); modal.style.display = 'block'; }); closeModal.addEventListener('click', () => { modal.style.display = 'none'; }); checkoutBtn.addEventListener('click', () => { alert('Checkout functionality not implemented in this example.'); }); window.addEventListener('click', (event) => { if (event.target === modal) { modal.style.display = 'none'; } }); });