(READ ONLY) Margin is an open annotation layer for the internet. Powered by the AT Protocol.
Something went wrong. Try again.
JSX
at ui-refactor
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091import { Routes, Route } from "react-router-dom";import { useEffect } from "react";import { AuthProvider, useAuth } from "./context/AuthContext";import TopNav from "./components/TopNav";import MobileNav from "./components/MobileNav";import Feed from "./pages/Feed";import Url from "./pages/Url";import UserUrl from "./pages/UserUrl";import Profile from "./pages/Profile";import Login from "./pages/Login";import New from "./pages/New";import Bookmarks from "./pages/Bookmarks";import Highlights from "./pages/Highlights";import Notifications from "./pages/Notifications";import AnnotationDetail from "./pages/AnnotationDetail";import Collections from "./pages/Collections";import CollectionDetail from "./pages/CollectionDetail";import Privacy from "./pages/Privacy";import Terms from "./pages/Terms";import Landing from "./pages/Landing";import ScrollToTop from "./components/ScrollToTop";import { ThemeProvider } from "./context/ThemeContext";
function AppContent() { const { user } = useAuth();
useEffect(() => { if (user) { fetch("/api/sync", { method: "POST" }).catch(console.error); } }, [user]);
return ( <div className="app"> <ScrollToTop /> <TopNav /> <main className="main-content"> <Routes> <Route path="/home" element={<Feed />} /> <Route path="/url" element={<Url />} /> <Route path="/new" element={<New />} /> <Route path="/bookmarks" element={<Bookmarks />} /> <Route path="/highlights" element={<Highlights />} /> <Route path="/notifications" element={<Notifications />} /> <Route path="/profile" element={<Profile />} /> <Route path="/profile/:handle" element={<Profile />} /> <Route path="/login" element={<Login />} /> <Route path="/at/:did/:rkey" element={<AnnotationDetail />} /> <Route path="/annotation/:uri" element={<AnnotationDetail />} /> <Route path="/collections" element={<Collections />} /> <Route path="/collections/:rkey" element={<CollectionDetail />} /> <Route path="/:handle/collection/:rkey" element={<CollectionDetail />} /> <Route path="/:handle/annotation/:rkey" element={<AnnotationDetail />} /> <Route path="/:handle/highlight/:rkey" element={<AnnotationDetail />} /> <Route path="/:handle/bookmark/:rkey" element={<AnnotationDetail />} /> <Route path="/:handle/url/*" element={<UserUrl />} /> <Route path="/collection/*" element={<CollectionDetail />} /> <Route path="/privacy" element={<Privacy />} /> <Route path="/terms" element={<Terms />} /> </Routes> </main> <MobileNav /> </div> );}
export default function App() { return ( <ThemeProvider> <AuthProvider> <Routes> <Route path="/" element={<Landing />} /> <Route path="/*" element={<AppContent />} /> </Routes> </AuthProvider> </ThemeProvider> );}