reroute-js 0.46.0 → 1.0.0-alpha.1

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>
 				) : (

package/cli/bin.d.ts

@@ -1,5 +1,5 @@
 /**
- * reroute-js v0.46.0
+ * reroute-js v1.0.0-alpha.1
  *
  * @license MIT
  * @copyright 2026 stewones <hi@stewan.io>