eero/WretchedMachines
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Frontend: Improve navbar component

Browse Source
This commit is contained in:
Eero Holmala 2024-06-01 13:55:18 +03:00
parent 570342e715
commit 6c463ed345
2 changed files with 70 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
wretched-machines-frontend/src/app/(auth)/login/page.tsx
View File

@ -13,7 +13,14 @@ const Login = () => {
});
const handleAction = (formData: FormData) => {
console.log(formData.get("email") + " " + formData.get("password"));
const email= formData.get("email")!.toString();
const password = formData.get("password")!.toString();
console.log({
"email": btoa(email),
"password": btoa(password),
});
}
const handleChange = (e: ChangeEvent<HTMLInputElement>) => {

82
wretched-machines-frontend/src/components/ui/navbar.tsx
View File

@ -4,28 +4,70 @@ import { cn } from "@/lib/utils"
const Break = ()=> <hr className={cn("w-100")}></hr>
const Navbar = () => {
return (
// const Navbar = () => {
// return (
// <div className={cn("bg-666666 pt-1 pb-1")}>
// <Break/>
// <div className={cn("flex h-20 text-white justify-around items-center")}>
// <Link href="/">
// <div>Home</div>
// </Link>
// <Link href="/blog">
// <div>Blog</div>
// </Link>
// <Link href="/tools">
// <div>Tools</div>
// </Link>
// <Link href="/demos">
// <div>Demos</div>
// </Link>
// <Link href="/login">
// <div>Login</div>
// </Link>
// <br></br>
// </div>
// <Break/>
// </div>
// );
// }
const Navbar = ()=>{
return(
<div className={cn("bg-666666 pt-1 pb-1")}>
<Break/>
<div className={cn("flex h-20 text-white justify-around items-center")}>
<Link href="/">
<div>Home</div>
</Link>
<Link href="/blog">
<div>Blog</div>
</Link>
<Link href="/tools">
<div>Tools</div>
</Link>
<Link href="/demos">
<div>Demos</div>
</Link>
<Link href="/login">
<div>Login</div>
</Link>
<br></br>
</div>
<nav className="flex items-center justify-between flex-wrap bg-666666 p-6">
<div className="flex items-center flex-shrink-0 text-white mr-6">
<svg className="fill-current h-8 w-8 mr-2" width="54" height="54" viewBox="0 0 110 108" xmlns="http://www.w3.org/2000/svg"><path fill="#817e6f" stroke="#817e6f" d="M44.041 3.733C19.347 8.36 1.002 35.479 4.889 61.612c6.132 41.231 55.737 58.121 86.414 29.423 28.694-26.841 16.128-76.613-21.838-86.502-5.508-1.435-19.66-1.88-25.424-.8" fill-rule="evenodd"/><path fill="#4f4b42" stroke="#4f4b42" d="M29.315 46.985C22.272 49.893 24.796 61 32.5 61c3.81 0 7.5-3.702 7.5-7.524 0-4.839-5.941-8.448-10.685-6.491M77 46.709C69.367 49.516 70.885 61 78.889 61c7.002 0 10.016-8.104 4.712-12.667-2.736-2.354-3.862-2.631-6.601-1.624m-57.403 6.135c-.346.56-.142 1.319.453 1.687 1.538.95 2.53-.351 1.246-1.635-.718-.718-1.277-.735-1.699-.052m23.986.022c-.431.697-.513 1.537-.183 1.867.895.895 1.871-.421 1.387-1.871-.338-1.016-.574-1.016-1.204.004M66 54c0 .55.675 1 1.5 1s1.5-.45 1.5-1-.675-1-1.5-1-1.5.45-1.5 1m23.5 0c.34.55 1.041 1 1.559 1s.941-.45.941-1-.702-1-1.559-1-1.281.45-.941 1" fill-rule="evenodd"/></svg>
<span className="font-semibold text-xl tracking-tight">Wretched Machines</span>
</div>
<div className="block lg:hidden">
<button className="flex items-center px-3 py-2 border rounded text-gray-200 border-gray-400 hover:text-white hover:border-white">
<svg className="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
</button>
</div>
<div className="w-full block flex-grow lg:flex lg:items-center lg:w-auto">
<div className="text-md lg:flex-grow">
<Link href="/" className="block mt-4 lg:inline-block lg:mt-0 text-gray-200 hover:text-white mr-4">
Home
</Link>
<Link href="/blog" className="block mt-4 lg:inline-block lg:mt-0 text-gray-200 hover:text-white mr-4">
Blog
</Link>
<Link href="/tools" className="block mt-4 lg:inline-block lg:mt-0 text-gray-200 hover:text-white mr-4">
Tools
</Link>
<Link href="/demos" className="block mt-4 lg:inline-block lg:mt-0 text-gray-200 hover:text-white mr-4">
Demos
</Link>
</div>
<div>
<Link href="/login" className="inline-block text-sm px-4 py-2 leading-none border rounded text-white border-white hover:border-transparent hover:text-teal-500 hover:bg-white mt-4 lg:mt-0">Login</Link>
<Link href="/register" className="inline-block text-sm px-4 py-2 leading-none border rounded text-white border-white hover:border-transparent hover:text-teal-500 hover:bg-white mt-4 lg:mt-0">Register</Link>
</div>
</div>
</nav>
<Break/>
</div>
);