56 lines
1.6 KiB
TypeScript
56 lines
1.6 KiB
TypeScript
import React from 'react';
|
|
import { Link } from 'react-router-dom';
|
|
import { useAtom } from 'jotai';
|
|
import { authAtom, updateAuthAtom } from '../atoms/authAtom';
|
|
import { pb } from '../lib/pocketbase';
|
|
|
|
const Header: React.FC = () => {
|
|
const [isAuth] = useAtom(authAtom);
|
|
const [, updateAuth] = useAtom(updateAuthAtom);
|
|
|
|
const handleLogout = () => {
|
|
pb.authStore.clear();
|
|
updateAuth();
|
|
};
|
|
|
|
return (
|
|
<header className="bg-blue-500 p-4">
|
|
<div className="container mx-auto flex justify-between items-center text-center">
|
|
<Link to="/" className="text-white md:text-2xl font-bold">forum-demo</Link>
|
|
|
|
<span className='text-4xl mx-1'>|</span>
|
|
|
|
<Link to="https://gitea.garandplg.com/GarandPLG/forum-demo" className="text-white md:text-xl font-bold">Kod źródłowy</Link>
|
|
|
|
<span className='text-3xl mx-1'>|</span>
|
|
|
|
{isAuth ? (
|
|
<>
|
|
<Link to="/create-post" className="text-white mr-4">Stwórz post</Link>
|
|
|
|
<span className='text-3xl mx-1'>|</span>
|
|
|
|
<Link to="/profile" className="text-white mr-4">Profil</Link>
|
|
|
|
<span className='text-3xl mx-1'>|</span>
|
|
|
|
<button onClick={handleLogout} className="text-white">Wyloguj się</button>
|
|
</>
|
|
) : (
|
|
<>
|
|
<Link to="/login" className="text-white mr-4">Zaloguj się</Link>
|
|
|
|
<span className='text-3xl mx-1'>|</span>
|
|
|
|
<Link to="/register" className="text-white">Zarejestruj się</Link>
|
|
</>
|
|
)}
|
|
</div>
|
|
</header>
|
|
);
|
|
};
|
|
|
|
export default Header;
|
|
|
|
// komponent odpowiedzialny za nagłówek strony
|