JOSEPH1456/CollateralIQ

1import React, { useState, useEffect } from 'react'2import './index.css'3import Header from './components/Header'4import HomePage from './pages/HomePage'5import DashboardPage from './pages/DashboardPage'6import ReportPage from './pages/ReportPage'7import CinematicPage from './pages/CinematicPage'8 9const PAGES = ['home', 'dashboard', 'report', 'cinematic']10 11export default function App() {12  const [activePage, setActivePage] = useState(() => {13    const hash = window.location.hash.replace('#', '')14    return PAGES.includes(hash) ? hash : 'home'15  })16 17  useEffect(() => {18    const onHash = () => {19      const hash = window.location.hash.replace('#', '')20      if (PAGES.includes(hash)) setActivePage(hash)21    }22    window.addEventListener('hashchange', onHash)23    return () => window.removeEventListener('hashchange', onHash)24  }, [])25 26  const navigate = (page) => {27    setActivePage(page)28    window.location.hash = page29    window.scrollTo(0, 0)30  }31 32  const isCinematic = activePage === 'cinematic'33 34  return (35    <>36      {!isCinematic && <Header activePage={activePage} navigate={navigate} />}37      <div className="page-enter">38        {activePage === 'home'      && <HomePage navigate={navigate} />}39        {activePage === 'dashboard' && <DashboardPage navigate={navigate} />}40        {activePage === 'report'    && <ReportPage navigate={navigate} />}41        {isCinematic               && <CinematicPage navigate={navigate} />}42      </div>43    </>44  )45}