theis.gaedigk
c35838b034
Also added user table but insecure. (In the next time, going to secure the get all users.) Also noted out the react frontend from the docker compose file - just for development purposes. I have also created some utils to logout the user and to get all users.
35 lines
1017 B
TypeScript
35 lines
1017 B
TypeScript
import { useState } from "react";
|
|
import React from "react";
|
|
import LoginCard from "./LoginCard";
|
|
import { greeting } from "../utils/functions";
|
|
|
|
const Header: React.FC = () => {
|
|
const [loginCardVisible, setLoginCardVisible] = useState(false);
|
|
|
|
const closeLoginCard = () => {
|
|
setLoginCardVisible(false);
|
|
};
|
|
|
|
let loginBtnVal: string = greeting();
|
|
|
|
return (
|
|
<header className="bg-blue-600 text-white p-4 shadow-md">
|
|
<div className="container mx-auto flex justify-between items-center">
|
|
<h1 className="text-xl font-bold">Bikelane <strong>Admin Panel</strong></h1>
|
|
<nav>
|
|
<ul className="flex space-x-4">
|
|
<li>
|
|
<a className="hover:underline">
|
|
<button onClick={() => setLoginCardVisible(true)}>{loginBtnVal ?? "Login"}</button>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
<div>{loginCardVisible && <LoginCard onClose={closeLoginCard} />}</div>
|
|
</header>
|
|
);
|
|
};
|
|
|
|
export default Header;
|