diff --git a/src/app/page.tsx b/src/app/page.tsx index 5c23df7..9475ce1 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -40,6 +40,7 @@ export default function HomePage() { const [category, setCategory] = useState('all'); const [compareIds, setCompareIds] = useState>(new Set()); const [compareOpen, setCompareOpen] = useState(false); + const handleCloseCompare = useCallback(() => setCompareOpen(false), []); const toggleCompare = useCallback((product: Product) => { setCompareIds((prev) => { @@ -264,7 +265,7 @@ export default function HomePage() { {compareOpen && compareProducts.length >= 2 && ( setCompareOpen(false)} + onClose={handleCloseCompare} /> )} diff --git a/src/components/CategoryFilter.tsx b/src/components/CategoryFilter.tsx index 7eeb6f5..ff854d9 100644 --- a/src/components/CategoryFilter.tsx +++ b/src/components/CategoryFilter.tsx @@ -52,6 +52,7 @@ export function CategoryFilter({ value, onChange, className }: CategoryFilterPro ref={(el) => { tabRefs.current[i] = el; }} role="tab" aria-selected={value === cat} + aria-pressed={value === cat} tabIndex={value === cat ? 0 : -1} onClick={() => onChange(cat)} onKeyDown={(e) => handleKeyDown(e, i)} diff --git a/src/components/CompareModal.tsx b/src/components/CompareModal.tsx index 56ad2e0..72b3080 100644 --- a/src/components/CompareModal.tsx +++ b/src/components/CompareModal.tsx @@ -1,6 +1,7 @@ import type { Product } from '@/types'; import { basisPointsToPercent, formatUSDC } from '@/lib/format'; import { CATEGORY_ICONS } from '@/lib/constants'; +import { memo } from 'react'; import { Modal } from './Modal'; interface Props { @@ -18,7 +19,7 @@ const FIELDS = [ { label: 'Status', getValue: (p: Product) => p.status }, ]; -export function CompareModal({ products, onClose }: Props) { +function CompareModalComponent({ products, onClose }: Props) { return (
@@ -52,3 +53,5 @@ export function CompareModal({ products, onClose }: Props) { ); } + +export const CompareModal = memo(CompareModalComponent); diff --git a/src/components/ProductCard.tsx b/src/components/ProductCard.tsx index e51b6ca..ac2c73f 100644 --- a/src/components/ProductCard.tsx +++ b/src/components/ProductCard.tsx @@ -76,13 +76,17 @@ function ProductCardComponent({ product, compareSelected, onCompareToggle }: Pro
-
+
Premium
{basisPointsToPercent(product.premiumRate)}
+
+
Min Coverage
+
{formatUSDC(product.coverageMin)}
+
Max Coverage
{formatUSDC(product.coverageMax)}
diff --git a/src/components/SearchBar.tsx b/src/components/SearchBar.tsx index a40ce4c..18f85d0 100644 --- a/src/components/SearchBar.tsx +++ b/src/components/SearchBar.tsx @@ -1,6 +1,7 @@ 'use client'; import { useState, useEffect } from 'react'; +import { usePathname } from 'next/navigation'; import { useDebounce } from '@/hooks/useDebounce'; interface SearchBarProps { @@ -19,6 +20,14 @@ export function SearchBar({ }: SearchBarProps) { const [query, setQuery] = useState(''); const debouncedQuery = useDebounce(query, debounceMs); + const pathname = usePathname(); + + useEffect(() => { + if (pathname === '/') { + setQuery(''); + onSearch(''); + } + }, [pathname, onSearch]); useEffect(() => { onSearch(debouncedQuery);