reroute-js 0.46.0 → 1.0.0-alpha.0

package/_/store/src/client/routes/products/[id].tsx

@@ -4,7 +4,6 @@ import Header from '../../components/Header';
 import ProductCard from '../../components/ProductCard';
 import { getProduct, getProductsByCategory, type Product } from '../../lib/api';
 
-// Enable SSR data fetching for this route
 const ssr = {
 	async data({ params }: { params: { id?: string } }) {
 		try {
@@ -45,7 +44,6 @@ function ProductDetailPage() {
 	const params = useParams<{ id: string }>();
 	const productId = params.id ? Number.parseInt(params.id, 10) : null;
 
-	// Read SSR-seeded or prefetched data for this route
 	const routeData = useData<{
 		product: Product | null;
 		relatedProducts: Product[];
@@ -58,7 +56,6 @@ function ProductDetailPage() {
 	const relatedProducts = data?.relatedProducts ?? [];
 	const error = data?.error ?? (productId ? null : 'Invalid product ID');
 
-	// Fallback on client nav if hover prefetch didn't run
 	useEffect(() => {
 		if (typeof window === 'undefined') return;
 		if (routeData !== undefined) return;
@@ -80,7 +77,6 @@ function ProductDetailPage() {
 
 	const handleAddToCart = () => {
 		setAddingToCart(true);
-		// Simulate adding to cart
 		setTimeout(() => {
 			setAddingToCart(false);
 			alert(`Added ${product?.title} to cart!`);
@@ -95,10 +91,12 @@ function ProductDetailPage() {
 		return (
 			<>
 				<Header />
-				<main className='container-custom py-8'>
-					<h1 className='text-4xl font-bold text-gray-900 mb-8'>Loading...</h1>
-					<div className='text-center py-16 text-gray-600 text-lg'>
-						<div className='animate-pulse'>Loading product details...</div>
+				<main className='page-main'>
+					<h1 className='page-title'>Loading...</h1>
+					<div className='state-loading'>
+						<div className='state-loading-pulse'>
+							Loading product details...
+						</div>
 					</div>
 				</main>
 			</>
@@ -109,11 +107,11 @@ function ProductDetailPage() {
 		return (
 			<>
 				<Header />
-				<main className='container-custom py-8'>
-					<div className='text-center py-16 bg-red-50 text-red-600 text-lg rounded-xl'>
+				<main className='page-main'>
+					<div className='state-error'>
 						{error || 'Product not found'}
-						<div className='mt-4'>
-							<Link to='/products' className='link font-semibold'>
+						<div className='state-error-action'>
+							<Link to='/products' className='link link-semibold'>
 								← Back to Products
 							</Link>
 						</div>
@@ -127,9 +125,8 @@ function ProductDetailPage() {
 		<>
 			<Header />
 
-			<main className='container-custom py-8'>
-				{/* Breadcrumbs */}
-				<nav className='flex items-center gap-2 text-sm text-gray-600 mb-8'>
+			<main className='page-main'>
+				<nav className='breadcrumb'>
 					<Link to='/' className='link'>
 						Home
 					</Link>
@@ -142,13 +139,11 @@ function ProductDetailPage() {
 						{product.category}
 					</Link>
 					<span>/</span>
-					<span className='text-gray-900'>{product.title}</span>
+					<span className='breadcrumb-current'>{product.title}</span>
 				</nav>
 
-				{/* Product Details */}
-				<div className='grid grid-cols-1 lg:grid-cols-2 gap-12 mb-16'>
-					{/* Product Image */}
-					<div className='card flex items-center justify-center p-8 min-h-[500px]'>
+				<div className='product-detail-grid'>
+					<div className='card product-detail-image'>
 						<Image
 							src={product.image}
 							alt={product.title}
@@ -157,43 +152,36 @@ function ProductDetailPage() {
 							quality={85}
 							sizes='(max-width: 1024px) 90vw, 350px'
 							priority
-							className='max-w-full max-h-[500px] object-contain relative z-10'
+							className='product-detail-image-img'
 							style={{ viewTransitionName: `product-image-${product.id}` }}
 						/>
 					</div>
 
-					{/* Product Info */}
-					<div className='flex flex-col gap-6'>
+					<div className='product-detail-info'>
 						<div className='badge-primary'>{product.category}</div>
 
-						<h1 className='text-4xl font-bold text-gray-900 leading-tight'>
-							{product.title}
-						</h1>
+						<h1 className='product-detail-title'>{product.title}</h1>
 
 						{product.rating && (
-							<div className='flex items-center gap-4'>
-								<div className='flex items-center gap-2 text-base text-gray-600'>
-									<span className='text-2xl'>⭐</span>
-									<span className='font-semibold text-xl'>
-										{product.rating.rate}
-									</span>
-									<span>({product.rating.count} reviews)</span>
-								</div>
+							<div className='product-rating-lg'>
+								<span className='product-rating-star'>⭐</span>
+								<span className='product-rating-value'>
+									{product.rating.rate}
+								</span>
+								<span>({product.rating.count} reviews)</span>
 							</div>
 						)}
 
-						<div className='text-4xl font-bold text-primary-600'>
-							${product.price.toFixed(2)}
-						</div>
+						<div className='price-lg'>${product.price.toFixed(2)}</div>
 
-						<p className='text-lg text-gray-700 leading-relaxed'>
+						<p className='product-detail-description'>
 							{product.description}
 						</p>
 
-						<div className='flex gap-4 mt-4'>
+						<div className='product-actions'>
 							<button
 								type='button'
-								className='btn-primary flex-1 disabled:opacity-50'
+								className='btn-primary btn-grow'
 								onClick={handleAddToCart}
 								disabled={addingToCart}
 							>
@@ -209,24 +197,23 @@ function ProductDetailPage() {
 							</button>
 						</div>
 
-						<div className='p-4 bg-gray-50 rounded-xl text-sm text-gray-600 space-y-2'>
-							<div className='flex items-center gap-2'>
-								<span className='text-green-600 font-bold'>✓</span>
+						<div className='product-perks'>
+							<div className='product-perk'>
+								<span className='product-perk-check'>✓</span>
 								<span>Free shipping on orders over $50</span>
 							</div>
-							<div className='flex items-center gap-2'>
-								<span className='text-green-600 font-bold'>✓</span>
+							<div className='product-perk'>
+								<span className='product-perk-check'>✓</span>
 								<span>30-day return policy</span>
 							</div>
-							<div className='flex items-center gap-2'>
-								<span className='text-green-600 font-bold'>✓</span>
+							<div className='product-perk'>
+								<span className='product-perk-check'>✓</span>
 								<span>Secure checkout</span>
 							</div>
 						</div>
 					</div>
 				</div>
 
-				{/* Related Products */}
 				{relatedProducts.length > 0 && (
 					<section className='animate-in'>
 						<h2 className='section-heading'>Related Products</h2>

package/_/store/src/client/routes/products/index.tsx

@@ -54,7 +54,6 @@ function ProductsPage() {
 	const [loading, setLoading] = useState(!routeData);
 	const [error, setError] = useState<string | null>(routeData?.error || null);
 
-	// Load categories on mount (if not provided by SSR)
 	useEffect(() => {
 		if (categories.length > 0) return;
 		getCategories()
@@ -65,9 +64,7 @@ function ProductsPage() {
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [categories.length]);
 
-	// Load products based on category (skip initial when SSR provided for 'all')
 	useEffect(() => {
-		// When SSR provided initial products just stop loading
 		if (products.length > 0) {
 			setFilteredProducts(products);
 			setLoading(false);
@@ -96,11 +93,9 @@ function ProductsPage() {
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [selectedCategory, products]);
 
-	// Filter and sort products
 	useEffect(() => {
 		let result = [...products];
 
-		// Apply search filter
 		if (searchQuery.trim()) {
 			const query = searchQuery.toLowerCase();
 			result = result.filter(
@@ -111,7 +106,6 @@ function ProductsPage() {
 			);
 		}
 
-		// Apply sorting
 		switch (sortBy) {
 			case 'price-asc':
 				result.sort((a, b) => a.price - b.price);
@@ -123,7 +117,6 @@ function ProductsPage() {
 				result.sort((a, b) => a.title.localeCompare(b.title));
 				break;
 			default:
-				// Keep default order
 				break;
 		}
 
@@ -134,26 +127,22 @@ function ProductsPage() {
 		<>
 			<Header />
 
-			<main className='container-custom py-8'>
-				<div className='mb-8'>
+			<main className='page-main'>
+				<div className='page-intro'>
 					<h1 className='section-heading'>All Products</h1>
 					<p className='section-subheading'>
 						Browse our complete collection of quality products
 					</p>
 				</div>
 
-				{/* Filters */}
-				<div className='flex flex-wrap items-center gap-4 mb-8 p-6 bg-white rounded-xl shadow-card'>
-					<div className='flex items-center gap-2'>
-						<label
-							className='font-semibold text-gray-700'
-							htmlFor='category-filter'
-						>
+				<div className='filter-bar'>
+					<div className='filter-group'>
+						<label className='filter-label' htmlFor='category-filter'>
 							Category:
 						</label>
 						<select
 							id='category-filter'
-							className='select min-w-[200px]'
+							className='select select-min'
 							value={selectedCategory}
 							onChange={(e) => setSelectedCategory(e.target.value)}
 						>
@@ -169,54 +158,38 @@ function ProductsPage() {
 					<input
 						type='search'
 						placeholder='Search products...'
-						className='input flex-1 min-w-[250px]'
+						className='input input-grow'
 						value={searchQuery}
 						onChange={(e) => setSearchQuery(e.target.value)}
 					/>
 
-					<div className='flex items-center gap-2'>
-						<span className='font-semibold text-gray-700'>Sort:</span>
-						<div className='flex gap-2'>
+					<div className='filter-group'>
+						<span className='filter-label'>Sort:</span>
+						<div className='filter-sort-group'>
 							<button
 								type='button'
-								className={`btn-sm transition-all ${
-									sortBy === 'default'
-										? 'bg-primary-600 text-white border-primary-600'
-										: 'bg-white text-gray-700 border border-gray-300 hover:bg-gray-50'
-								}`}
+								className={`sort-btn${sortBy === 'default' ? ' is-active' : ''}`}
 								onClick={() => setSortBy('default')}
 							>
 								Default
 							</button>
 							<button
 								type='button'
-								className={`btn-sm transition-all ${
-									sortBy === 'price-asc'
-										? 'bg-primary-600 text-white border-primary-600'
-										: 'bg-white text-gray-700 border border-gray-300 hover:bg-gray-50'
-								}`}
+								className={`sort-btn${sortBy === 'price-asc' ? ' is-active' : ''}`}
 								onClick={() => setSortBy('price-asc')}
 							>
 								Price: Low to High
 							</button>
 							<button
 								type='button'
-								className={`btn-sm transition-all ${
-									sortBy === 'price-desc'
-										? 'bg-primary-600 text-white border-primary-600'
-										: 'bg-white text-gray-700 border border-gray-300 hover:bg-gray-50'
-								}`}
+								className={`sort-btn${sortBy === 'price-desc' ? ' is-active' : ''}`}
 								onClick={() => setSortBy('price-desc')}
 							>
 								Price: High to Low
 							</button>
 							<button
 								type='button'
-								className={`btn-sm transition-all ${
-									sortBy === 'name-asc'
-										? 'bg-primary-600 text-white border-primary-600'
-										: 'bg-white text-gray-700 border border-gray-300 hover:bg-gray-50'
-								}`}
+								className={`sort-btn${sortBy === 'name-asc' ? ' is-active' : ''}`}
 								onClick={() => setSortBy('name-asc')}
 							>
 								Name: A-Z
@@ -225,24 +198,21 @@ function ProductsPage() {
 					</div>
 
 					{!loading && (
-						<div className='ml-auto text-sm text-gray-600'>
+						<div className='filter-count'>
 							Showing {filteredProducts.length} of {products.length} products
 						</div>
 					)}
 				</div>
 
-				{/* Products Grid */}
 				{loading ? (
-					<div className='text-center py-16 text-gray-600 text-lg'>
-						<div className='animate-pulse'>Loading products...</div>
+					<div className='state-loading'>
+						<div className='state-loading-pulse'>Loading products...</div>
 					</div>
 				) : error ? (
-					<div className='text-center py-16 bg-red-50 text-red-600 text-lg rounded-xl'>
-						{error}
-					</div>
+					<div className='state-error'>{error}</div>
 				) : filteredProducts.length === 0 ? (
-					<div className='text-center py-16 text-gray-600 text-lg'>
-						<div className='text-6xl mb-4'>🔍</div>
+					<div className='state-empty'>
+						<div className='state-empty-icon'>🔍</div>
 						<div>No products found matching your criteria</div>
 					</div>
 				) : (