Scaffold arrangement demo slice with CompareBar wiring
Add a self-contained demo build target for the Providers → Packages → Comparison flow, deployable as a static SPA at /arrangement/. - vite.demo.config.ts: per-slice build via --mode, base path flips for dev vs prod, output to dist-demo/<slice>/ - src/demo/: shared fixtures (7 providers across verified/tier3/tier2 with real venue photography from brandassets) + Zustand basket store with ?compare= URL persistence - Verified-provider packages now share the nine canonical Essentials line items per FA convention; only Optionals/Extras vary - App-level CompareBar surfaces "Already added" / "Maximum 3" feedback via transient store error - ProviderCard logo objectFit cover→contain so wide logos don't crop - npm scripts demo:dev / demo:build, deps zustand + react-router-dom
This commit is contained in:
38
src/demo/apps/arrangement/routes/Providers.tsx
Normal file
38
src/demo/apps/arrangement/routes/Providers.tsx
Normal file
@@ -0,0 +1,38 @@
|
||||
import { useState } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import {
|
||||
ProvidersStep,
|
||||
EMPTY_FILTER_VALUES,
|
||||
type ProviderFilterValues,
|
||||
type ProviderSortBy,
|
||||
type ListViewMode,
|
||||
} from '../../../../components/pages/ProvidersStep';
|
||||
import { providers } from '../../../shared/fixtures/providers';
|
||||
import { demoNav } from '../DemoNav';
|
||||
|
||||
export function ProvidersRoute() {
|
||||
const navigate = useNavigate();
|
||||
const [query, setQuery] = useState('');
|
||||
const [filters, setFilters] = useState<ProviderFilterValues>(EMPTY_FILTER_VALUES);
|
||||
const [sort, setSort] = useState<ProviderSortBy>('recommended');
|
||||
const [view, setView] = useState<ListViewMode>('list');
|
||||
|
||||
const filtered = providers.filter((p) => p.location.toLowerCase().includes(query.toLowerCase()));
|
||||
|
||||
return (
|
||||
<ProvidersStep
|
||||
providers={filtered}
|
||||
onSelectProvider={(id) => navigate(`/providers/${id}/packages`)}
|
||||
searchQuery={query}
|
||||
onSearchChange={setQuery}
|
||||
filterValues={filters}
|
||||
onFilterChange={setFilters}
|
||||
sortBy={sort}
|
||||
onSortChange={setSort}
|
||||
viewMode={view}
|
||||
onViewModeChange={setView}
|
||||
onBack={() => window.history.back()}
|
||||
navigation={demoNav}
|
||||
/>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user