import { useEffect } from 'react'
import { Link, NavLink, Route, Routes, useLocation } from 'react-router-dom'
import BottomNav from './components/BottomNav'
import SearchBar from './components/SearchBar'
import About from './pages/About'
import Catalog from './pages/Catalog'
import Home from './pages/Home'
import NotFound from './pages/NotFound'
import ProductDetail from './pages/ProductDetail'
import Stats from './pages/Stats'
import StoreDetail from './pages/StoreDetail'
import Stores from './pages/Stores'
const HEADER_SEARCH_ID = 'header-search-input'
function Header() {
const location = useLocation()
// "/" focuses the desktop header search.
useEffect(() => {
function onKey(e: KeyboardEvent) {
if (e.key !== '/' || e.metaKey || e.ctrlKey || e.altKey) return
const target = e.target as HTMLElement | null
const tag = target?.tagName ?? ''
if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT') return
if (target?.isContentEditable) return
const input = document.getElementById(HEADER_SEARCH_ID)
if (input instanceof HTMLInputElement) {
e.preventDefault()
input.focus()
input.select()
}
}
window.addEventListener('keydown', onKey)
return () => window.removeEventListener('keydown', onKey)
}, [])
return (
)
}
function Footer() {
return (
)
}
export default function App() {
return (
} />
} />
} />
} />
} />
} />
} />
} />
)
}