File size: 3,906 Bytes
c9dda84 8aff8b0 c9dda84 8aff8b0 c9dda84 8aff8b0 c9dda84 8aff8b0 c9dda84 8aff8b0 c9dda84 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 |
import React, { useState, useEffect } from 'react';
import { X } from 'lucide-react';
import Navbar from './components/Navbar';
import Hero from './components/Hero';
import TrustedBy from './components/TrustedBy';
import ProductOverview from './components/ProductOverview';
import InteractiveDemo from './components/InteractiveDemo';
import UseCases from './components/UseCases';
import HowItWorks from './components/HowItWorks';
import Accuracy from './components/Accuracy';
import Documentation from './components/Documentation';
import FAQ from './components/FAQ';
import Footer from './components/Footer';
import SimulationPage from './components/SimulationPage';
import ChatPage from './components/ChatPage';
import ProductGuide from './components/ProductGuide';
import ApiTabsPage from './components/ApiTabsPage';
function App() {
const [currentView, setCurrentView] = useState<'landing' | 'simulation' | 'chat' | 'guide' | 'apiTabs'>('simulation');
const [user, setUser] = useState<any>(null);
const [simulationResult, setSimulationResult] = useState<any>(null);
useEffect(() => {
const fetchUser = async () => {
try {
const response = await fetch('/api/user');
if (response.ok) {
const data = await response.json();
setUser(data);
}
} catch (error) {
console.error("Failed to fetch user:", error);
}
};
fetchUser();
// Listen for storage changes in case of popup login
const handleStorage = () => fetchUser();
window.addEventListener('storage', handleStorage);
return () => window.removeEventListener('storage', handleStorage);
}, []);
const loginWithHF = () => {
// Open in a new tab to pop out of iframe
window.open('/login', '_blank');
};
const handleLogout = async () => {
await fetch('/api/logout');
setUser(null);
};
const startSimulation = () => {
setCurrentView('simulation');
window.scrollTo(0,0);
};
const goBackToLanding = () => {
setCurrentView('landing');
};
const openChat = () => {
setCurrentView('chat');
};
const openGuide = () => {
setCurrentView('guide');
};
const openApiTabs = () => {
setCurrentView('apiTabs');
};
const goBackToSimulation = () => {
setCurrentView('simulation');
};
if (currentView === 'apiTabs') {
return <ApiTabsPage onBack={goBackToSimulation} />;
}
if (currentView === 'guide') {
return (
<div className="bg-black min-h-screen relative">
<button
onClick={goBackToSimulation}
className="absolute top-8 left-8 p-3 bg-gray-900 border border-gray-800 rounded-full text-white hover:bg-gray-800 transition-colors z-50"
>
<X size={24} />
</button>
<ProductGuide />
</div>
);
}
if (currentView === 'simulation') {
return (
<SimulationPage
onBack={goBackToLanding}
onOpenChat={openChat}
onOpenGuide={openGuide}
onOpenApiTabs={openApiTabs}
user={user}
onLogin={loginWithHF}
onLogout={handleLogout}
simulationResult={simulationResult}
setSimulationResult={setSimulationResult}
/>
);
}
if (currentView === 'chat') {
return (
<ChatPage
onBack={goBackToSimulation}
simulationResult={simulationResult}
setSimulationResult={setSimulationResult}
/>
);
}
return (
<div className="bg-black min-h-screen text-white selection:bg-teal-500/30">
<Navbar onStart={startSimulation} onLogin={loginWithHF} user={user} />
<main>
<Hero onStart={startSimulation} />
<TrustedBy />
<ProductOverview />
<InteractiveDemo />
<UseCases />
<HowItWorks />
<Accuracy />
<Documentation />
<FAQ />
</main>
<Footer />
</div>
);
}
export default App; |