refactor: improve header component layout and button styling
This commit is contained in:
@@ -10,17 +10,24 @@ const Header: React.FC = () => {
|
|||||||
setLoginCardVisible(false);
|
setLoginCardVisible(false);
|
||||||
};
|
};
|
||||||
|
|
||||||
let loginBtnVal: string = greeting();
|
let loginBtnVal: string = "Hello, " + greeting() + "!";
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<header className="bg-blue-600 text-white p-4 shadow-md">
|
<header className="bg-blue-600 text-white p-4 shadow-md">
|
||||||
<div className="container mx-auto flex justify-between items-center">
|
<div className="container mx-auto flex justify-between items-center">
|
||||||
<h1 className="text-xl font-bold">Bikelane <strong>Admin Panel</strong></h1>
|
<h1 className="text-xl font-bold">
|
||||||
|
Bikelane <strong>Admin Panel</strong>
|
||||||
|
</h1>
|
||||||
<nav>
|
<nav>
|
||||||
<ul className="flex space-x-4">
|
<ul className="flex space-x-4">
|
||||||
<li>
|
<li>
|
||||||
<a className="hover:underline">
|
<a className="hover:underline">
|
||||||
<button onClick={() => setLoginCardVisible(true)}>{loginBtnVal ?? "Login"}</button>
|
<button
|
||||||
|
onClick={() => setLoginCardVisible(true)}
|
||||||
|
className="bg-blue-700 shadow-md hover:bg-blue-800 transition padding px-4 py-2 rounded-md text-white font-semibold"
|
||||||
|
>
|
||||||
|
{loginBtnVal ?? "Login"}
|
||||||
|
</button>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
Reference in New Issue
Block a user