Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Fixed Format #27

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Apr 1, 2025
Merged

Fixed Format #27

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
83 changes: 43 additions & 40 deletions src/Home.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,49 +1,52 @@
import { useNavigate } from "react-router-dom";
import { useState } from "react";
import { useNavigate } from "react-router-dom";
import { useState } from "react";

function HomePage() {
const navigate = useNavigate();
const [position, setPosition] = useState({ top: "50%", left: "50%" });
function HomePage() {
const navigate = useNavigate();
const [position, setPosition] = useState({ top: "50%", left: "50%" });

const moveButton = () => {
const newTop = Math.random() * 80 + 10;
const newLeft = Math.random() * 80 + 10;
setPosition({ top: `${newTop}%`, left: `${newLeft}%` });
};
const moveButton = () => {
const newTop = Math.random() * 80 + 10;
const newLeft = Math.random() * 80 + 10;
setPosition({ top: `${newTop}%`, left: `${newLeft}%` });
};

return (
<div className="relative flex flex-col items-center justify-center h-screen bg-gradient-to-r from-blue-500 via-blue-400 to-blue-500 p-[10px]">
<img
src="/images/gear.gif"
alt="User Avatar"
className="w-[200px] h-[200px] animate-fade-in rounded-full shadow-md cursor-pointer"
/>
<h1 className="text-4xl font-bold text-white drop-shadow-lg">
Welcome to My User Management
</h1>
<p className="text-lg text-white mt-2 drop-shadow-md">
Explore and enjoy your stay!
</p>
return (
<div className="relative flex flex-col items-center justify-center h-screen bg-gradient-to-r from-blue-500 via-blue-400 to-blue-500 p-[10px]">
<img
src="/images/gear.gif"
alt="User Avatar"
className="w-[200px] h-[200px] animate-fade-in rounded-full shadow-md cursor-pointer"
/>
<h1 className="text-4xl font-bold text-white drop-shadow-lg">
Welcome to My User Management
</h1>
<p className="text-lg text-white mt-2 drop-shadow-md">
Explore and enjoy your stay!
</p>

<div
className="absolute transition-all duration-300"
style={{ top: position.top, left: position.left, position: "absolute" }}
onMouseEnter={moveButton}
>
<button className="px-5 py-2 bg-yellow-500 rounded-md text-white poppins-bold cursor-pointer" onClick={()=>alert("charot la")}>
WIN A HOUSE!
</button>
</div>

{/* Static button */}
<div
className="absolute transition-all duration-300"
style={{ top: position.top, left: position.left, position: "absolute" }}
onMouseEnter={moveButton}
>
<button
className="min-w-[200px] h-fit p-[10px] mt-5 bg-red-600 rounded-[10px] poppins-bold text-white cursor-pointer hover:bg-red-700"
onClick={() => navigate("/dashboard")}
className="px-5 py-2 bg-yellow-500 rounded-md text-white poppins-bold cursor-pointer"
onClick={() => alert("charot la")}
>
Go to Dashboard
WIN A HOUSE!
</button>
</div>
);
}

export default HomePage;
{/* Static button */}
<button
className="min-w-[200px] h-fit p-[10px] mt-5 bg-red-600 rounded-[10px] poppins-bold text-white cursor-pointer hover:bg-red-700"
onClick={() => navigate("/dashboard")}
>
Go to Dashboard
</button>
</div>
);
}

export default HomePage;
22 changes: 11 additions & 11 deletions src/LandingPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,27 +1,27 @@
import { Link} from "react-router-dom";

import { Link } from "react-router-dom";

function LandingPage() {
return (
<div className="w-full min-h-screen flex flex-col items-center justify-center bg-gradient-to-br from-blue-500 to-purple-600 text-white poppins">

<img
src="/images/usermanager.gif"
alt="Landing Page Illustration"
className="w-[200px] h-[200px] mb-6 animate-fade-in rounded-full shadow-md cursor-pointer"
/>
<img
src="/images/usermanager.gif"
alt="Landing Page Illustration"
className="w-[200px] h-[200px] mb-6 animate-fade-in rounded-full shadow-md cursor-pointer"
/>

<div className="text-center max-w-2xl">
<h1 className="text-5xl font-bold mb-4 animate-fade-in">Welcome User</h1>
<h1 className="text-5xl font-bold mb-4 animate-fade-in">
Welcome User
</h1>
<p className="text-lg mb-8 opacity-90 animate-fade-in delay-150">
Empowering seamless user management with simplicity and security.
Empowering seamless user management with simplicity and security.
</p>
<div className="flex gap-4 justify-center">
<button className="bg-green-500 hover:bg-green-600 px-6 py-3 rounded-lg text-lg transition-all shadow-md">
<Link to="/login">Sign In</Link>
</button>
<button className="bg-red-600 hover:bg-red-700 px-6 py-3 rounded-lg text-lg transition-all shadow-md">
<Link to="/signup">Sign Up</Link>
<Link to="/signup">Sign Up</Link>
</button>
</div>
</div>
Expand Down
23 changes: 18 additions & 5 deletions src/Login.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,11 +46,15 @@ const Login: React.FC<Properties> = ({ users }) => {
});
};

const handleUsernameChange = (e: { target: { value: SetStateAction<string> } }) => {
const handleUsernameChange = (e: {
target: { value: SetStateAction<string> };
}) => {
setUsername(e.target.value);
};

const handlePasswordChange = (e: { target: { value: SetStateAction<string> } }) => {
const handlePasswordChange = (e: {
target: { value: SetStateAction<string> };
}) => {
setPassword(e.target.value);
};

Expand All @@ -62,7 +66,9 @@ const Login: React.FC<Properties> = ({ users }) => {
return;
}

const found = users.find((user) => user.username === username && user.password === password);
const found = users.find(
(user) => user.username === username && user.password === password
);

if (found) {
loginSuccessModal({ username });
Expand Down Expand Up @@ -106,7 +112,11 @@ const Login: React.FC<Properties> = ({ users }) => {
className="absolute right-3 text-gray-600"
onClick={togglePasswordVisibility}
>
{showPassword ? <IoEyeOutline className="text-xl" /> : <IoEyeOffOutline className="text-xl" />}
{showPassword ? (
<IoEyeOutline className="text-xl" />
) : (
<IoEyeOffOutline className="text-xl" />
)}
</button>
</div>
<button className="w-full bg-blue-500 text-white p-3 rounded-lg hover:bg-blue-600 transition">
Expand All @@ -115,7 +125,10 @@ const Login: React.FC<Properties> = ({ users }) => {
<div className="text-center text-sm">
<p>
Don't have an account?{" "}
<Link to="/signup" className="text-blue-700 font-semibold hover:underline">
<Link
to="/signup"
className="text-blue-700 font-semibold hover:underline"
>
Sign Up
</Link>
</p>
Expand Down
14 changes: 12 additions & 2 deletions src/Signup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,13 @@ const Signup: React.FC<Properties> = ({ users, setUsers }) => {
return;
}

const newUser = { username, password, firstname, lastname, date: timestamp };
const newUser = {
username,
password,
firstname,
lastname,
date: timestamp,
};

setUsers([...users, newUser]);

Expand Down Expand Up @@ -145,7 +151,11 @@ const Signup: React.FC<Properties> = ({ users, setUsers }) => {
className="absolute right-3 text-gray-600"
onClick={togglePasswordVisibility}
>
{showPassword ? <IoEyeOutline className="text-xl" /> : <IoEyeOffOutline className="text-xl" />}
{showPassword ? (
<IoEyeOutline className="text-xl" />
) : (
<IoEyeOffOutline className="text-xl" />
)}
</button>
</div>
<input
Expand Down
7 changes: 4 additions & 3 deletions src/components/Footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,13 @@ function Footer() {
<p>Phone: +123 456 78910 (Secret 🤫)</p>
</div>


<div className="text-center mt-4 md:mt-0">
<p>&copy; {new Date().getFullYear()} Christian Barbosa. All Rights Reserved.</p>
<p>
&copy; {new Date().getFullYear()} Christian Barbosa. All Rights
Reserved.
</p>
</div>


<div className="text-center mt-4 md:mt-0 flex flex-col">
<h2 className="text-xl font-semibold">Follow Me</h2>
<a
Expand Down
27 changes: 15 additions & 12 deletions src/components/Navbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,9 @@ function Navbar() {
navigate("/login");
};

const homeNav=()=>{
const homeNav = () => {
navigate("/home");
}
};
const logoutModal = () => {
Swal.fire({
title: "See you Again!",
Expand Down Expand Up @@ -48,17 +48,19 @@ function Navbar() {
"/images/profiles/samplepic4.jpg",
"/images/profiles/bae.gif",
"/images/profiles/kyj.gif",

];

const randomImage = profileImages[Math.floor(Math.random() * profileImages.length)];
const randomImage =
profileImages[Math.floor(Math.random() * profileImages.length)];
setProfileImage(randomImage);
}, []);

return (
<div className="w-full min-h-[40px] flex bg-[#2469c3] text-[16px] poppins-bold text-white items-center content-center p-[10px] gap-[5%] shadow-md fixed">
<ul className="flex gap-[20px] p-[10px] poppins-bold text-[16px]">
<li className="cursor-pointer" onClick={homeNav}>Home</li>
<li className="cursor-pointer" onClick={homeNav}>
Home
</li>
</ul>
{username && (
<div className="ml-auto pr-5 flex gap-[10px] items-center">
Expand All @@ -67,14 +69,15 @@ function Navbar() {
alt="User Avatar"
className="w-[30px] h-[30px] animate-fade-in rounded-full shadow-md border cursor-pointer"
/>
Hello, <span className="font-semibold cursor-pointer">{username}!</span>
Hello,{" "}
<span className="font-semibold cursor-pointer">{username}!</span>
<button
onClick={logout}
className="bg-red-500 text-white px-5 h-[30px] rounded hover:bg-yellow-600 cursor-pointer shadow-md"
>
<BiLogOut className="w-fit h-fit" />
{}
</button>
onClick={logout}
className="bg-red-500 text-white px-5 h-[30px] rounded hover:bg-yellow-600 cursor-pointer shadow-md"
>
<BiLogOut className="w-fit h-fit" />
{}
</button>
</div>
)}
</div>
Expand Down
57 changes: 33 additions & 24 deletions src/components/UserModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,27 +1,36 @@
import {UserModalProps } from "../types";

import { UserModalProps } from "../types";

const UserModal: React.FC<UserModalProps> = ({ user, onClose }) => {
if (!user) return null;

return (
<div className="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center">
<div className="bg-white p-6 rounded-lg shadow-lg w-96">
<h2 className="text-xl font-semibold mb-4">User Details</h2>
<p><b>Username:</b> {user.username}</p>
<p><b>Firstname:</b> {user.firstname}</p>
<p><b>Lastname:</b> {user.lastname}</p>
<p><b>Date:</b> {user.date}</p>
<p><b>Password:</b> {user.password}</p>
<button
onClick={onClose}
className="mt-4 bg-red-500 text-white px-4 py-2 rounded hover:bg-red-600"
>
Close
</button>
</div>
if (!user) return null;

return (
<div className="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center">
<div className="bg-white p-6 rounded-lg shadow-lg w-96">
<h2 className="text-xl font-semibold mb-4">User Details</h2>
<p>
<b>Username:</b> {user.username}
</p>
<p>
<b>Firstname:</b> {user.firstname}
</p>
<p>
<b>Lastname:</b> {user.lastname}
</p>
<p>
<b>Date:</b> {user.date}
</p>
<p>
<b>Password:</b> {user.password}
</p>
<button
onClick={onClose}
className="mt-4 bg-red-500 text-white px-4 py-2 rounded hover:bg-red-600"
>
Close
</button>
</div>
);
};

export default UserModal;
</div>
);
};

export default UserModal;