src/App.tsx - master - durovcode/Frontend

src/App.tsx
90 строк3 KB
Alch3m1st
Add themes
22 сен 2024, 01:48
22 сен 2024, 01:48603fd2b
"use client"

import commandLogo from '/logo.png'
import './App.css'
import styles from "./index.css"

import { BrowserRouter as Router, Route, Routes, Link } from 'react-router-dom';
import { CSSTransition, TransitionGroup } from 'react-transition-group';

import { Toaster } from "@/components/ui/sonner"

import { Landing } from '@/pages/landing';
import { Button } from './components/ui/button';
import { LogIn, User } from 'lucide-react';
import { Auth } from './pages/auth';
import { Profile } from './pages/profile';
import React from 'react';
import { Chat } from './pages/chat';
import { ThemeProvider } from '@/components/theme-provider';
import { ToggleTheme } from '@/components/toggleTheme';


function App() {
  const [authorized, setAuthorized] = React.useState(false);

  React.useEffect(() => {
    if (localStorage.getItem("jwt")) {
      setAuthorized(true);
    }
  }, []);

  return (
    <>
      <ThemeProvider defaultTheme="white" storageKey="vite-ui-theme">
        <Router>
          <div>
            <div className='flex w-full justify-between p-4 z-10'>
              <Link to="/">
                <img className='w-[140px]' src={commandLogo} alt="" />
              </Link>
              <ToggleTheme></ToggleTheme>

              {authorized ? (
                <>
                  <Link to="/profile/">
                    <Button variant='outline'>
                      <User className="mr-2 h-4 w-4" /> Профиль
                    </Button>
                  </Link>
                </>

              ) : (
                <>
                  <Link to="/auth/">
                    <Button variant='outline'>
                      <LogIn className="mr-2 h-4 w-4" /> Исследовать!
                    </Button>
                  </Link>
                </>
              )}

            </div>

            <div className='flex items-center justify-center'>
              <div className='flex items-center justify-center max-w-[400px]'>
                <TransitionGroup>
                  <CSSTransition
                    key={location.key}
                    classNames="fade"
                    timeout={{ enter: 300, exit: 300 }}
                  >
                    <Routes location={location}>
                      <Route path="/chat/" element={<Chat />} />
                      <Route path="/" element={<Landing />} />
                      <Route path="/auth/" element={<Auth />} />
                      <Route path="/profile/" element={<Profile />} />
                    </Routes>
                  </CSSTransition>
                </TransitionGroup>
              </div>
            </div>
          </div>
        </Router>
        <Toaster />
      </ThemeProvider>
    </>
  )
}

export default App