diff --git a/assets/components/AppAppBar.tsx b/assets/components/AppAppBar.tsx index f321a93..1440ea4 100644 --- a/assets/components/AppAppBar.tsx +++ b/assets/components/AppAppBar.tsx @@ -1,47 +1,23 @@ import * as React from 'react'; -import {PaletteMode} from '@mui/material'; import Box from '@mui/material/Box'; import AppBar from '@mui/material/AppBar'; import Toolbar from '@mui/material/Toolbar'; import Button from '@mui/material/Button'; -import IconButton from '@mui/material/IconButton'; import Container from '@mui/material/Container'; -import Divider from '@mui/material/Divider'; -import MenuItem from '@mui/material/MenuItem'; -import Drawer from '@mui/material/Drawer'; -import MenuIcon from '@mui/icons-material/Menu'; -import CloseRoundedIcon from '@mui/icons-material/CloseRounded'; -import ToggleColorMode from './ToggleColorMode'; import Sitemark from './SitemarkIcon'; import {NavLink} from "react-router-dom"; +import ToggleColorMode from "./ToggleColorMode"; +import {PaletteMode} from "@mui/material"; +import Link from "@mui/material/Link"; interface AppAppBarProps { mode: PaletteMode; toggleColorMode: () => void; + isAuthenticated: boolean } -export default function AppAppBar({mode, toggleColorMode}: AppAppBarProps) { - const [open, setOpen] = React.useState(false); - - const toggleDrawer = (newOpen: boolean) => () => { - setOpen(newOpen); - }; - - const scrollToSection = (sectionId: string) => { - const sectionElement = document.getElementById(sectionId); - const offset = 128; - if (sectionElement) { - const targetScroll = sectionElement.offsetTop - offset; - sectionElement.scrollIntoView({behavior: 'smooth'}); - window.scrollTo({ - top: targetScroll, - behavior: 'smooth', - }); - setOpen(false); - } - }; - +export default function AppAppBar({mode, toggleColorMode, isAuthenticated}: AppAppBarProps) { return ( - - + + + + + + + + - - - - - - - - - - - - - - - - - - scrollToSection('highlights')}> - Highlights - - scrollToSection('faq')}>FAQ - - - - - + + : + + + } diff --git a/assets/components/Footer.tsx b/assets/components/Footer.tsx index 19b1ab0..4d0e4ae 100644 --- a/assets/components/Footer.tsx +++ b/assets/components/Footer.tsx @@ -5,8 +5,7 @@ import IconButton from '@mui/material/IconButton'; import Link from '@mui/material/Link'; import Stack from '@mui/material/Stack'; import Typography from '@mui/material/Typography'; - -import FacebookIcon from '@mui/icons-material/GitHub'; +import {NavLink} from "react-router-dom"; function Copyright() { return ( @@ -41,15 +40,19 @@ export default function Footer() { }} >
- - Privacy Policy - + + + Privacy Policy + +  •  - - Terms of Service - + + + Terms of Service + +
- diff --git a/assets/content/.gitignore b/assets/content/.gitignore new file mode 100644 index 0000000..2e1fa2d --- /dev/null +++ b/assets/content/.gitignore @@ -0,0 +1 @@ +*.md \ No newline at end of file diff --git a/assets/declaration.d.ts b/assets/declaration.d.ts new file mode 100644 index 0000000..dc003b7 --- /dev/null +++ b/assets/declaration.d.ts @@ -0,0 +1,4 @@ +declare module "*.md" { + const content: string; + export default content; +} diff --git a/assets/index.tsx b/assets/index.tsx index ad2810c..5784855 100644 --- a/assets/index.tsx +++ b/assets/index.tsx @@ -1,18 +1,54 @@ -import React from "react"; +import React, {useEffect, useState} from "react"; import ReactDOM from "react-dom/client"; import LandingPage from "./pages/LandingPage"; -import {Route, Routes, HashRouter} from "react-router-dom"; -import FAQ from "./components/FAQ"; +import TextPage from "./pages/TextPage"; +import {HashRouter, Route, Routes} from "react-router-dom"; + +import tosContent from "./content/tos.md" +import privacyContent from "./content/privacy.md" +import LoginPage from "./pages/LoginPage"; +import {createTheme, PaletteMode, ThemeProvider} from "@mui/material"; +import CssBaseline from "@mui/material/CssBaseline"; +import AppAppBar from "./components/AppAppBar"; +import DashboardPage from "./pages/DashboardPage"; +import {getUser} from "./utils/api"; const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement); -root.render( - - - - }/> - - + + +function App() { + const [mode, setMode] = React.useState('dark') + const [isAuthenticated, setIsAuthenticated] = useState(false); + + const toggleColorMode = () => { + setMode((prev) => (prev === 'dark' ? 'light' : 'dark')); + } + + useEffect(() => { + getUser().then(() => setIsAuthenticated(true)).catch(() => setIsAuthenticated(false)) + }, []); + + return + + + + + + }/> + }/> + }/> + {isAuthenticated ? + }/> + : + }/> + } + + + -); +} + +root.render() diff --git a/assets/pages/DashboardPage.tsx b/assets/pages/DashboardPage.tsx new file mode 100644 index 0000000..80d1688 --- /dev/null +++ b/assets/pages/DashboardPage.tsx @@ -0,0 +1,12 @@ +import React from 'react'; + + +const DashboardPage = () => { + return ( + <> +

Dashboard

+ + ); +}; + +export default DashboardPage; diff --git a/assets/pages/LandingPage.tsx b/assets/pages/LandingPage.tsx index 0b6bea6..ec94fec 100644 --- a/assets/pages/LandingPage.tsx +++ b/assets/pages/LandingPage.tsx @@ -1,32 +1,14 @@ import * as React from 'react'; -import {PaletteMode} from '@mui/material'; -import CssBaseline from '@mui/material/CssBaseline'; import Box from '@mui/material/Box'; import Divider from '@mui/material/Divider'; -import {createTheme, ThemeProvider} from '@mui/material/styles'; -import AppAppBar from '../components/AppAppBar'; import Hero from '../components/Hero'; import Highlights from '../components/Highlights'; import FAQ from '../components/FAQ'; import Footer from '../components/Footer'; -interface ToggleCustomThemeProps { - showCustomTheme: Boolean; - toggleCustomTheme: () => void; -} - export default function Index() { - const [mode, setMode] = React.useState('light'); - const defaultTheme = createTheme({palette: {mode}}); - - const toggleColorMode = () => { - setMode((prev) => (prev === 'dark' ? 'light' : 'dark')); - }; - return ( - - - + <> @@ -36,6 +18,6 @@ export default function Index() {