Skip to content

Update user login welcome page and added /login post request #23

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

Open
Jix0u wants to merge 7 commits into
base: main
Choose a base branch
from
Open

Update user login welcome page and added /login post request #23

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
91438ea
Update user login welcome page and added /login post request
Jix0u Dec 28, 2024
a767835
Remove changes for /login post request
Jix0u Dec 30, 2024
92d60d4
Revert "Remove changes for /login post request"
Jix0u Dec 30, 2024
44bcf08
Update curly bracket
Jix0u Dec 30, 2024
9e29929
Add new line
Jix0u Dec 30, 2024
a26aceb
Remove React.FC
Jix0u Dec 30, 2024
e3da004
Update user call to remove React.FC
Jix0u Dec 30, 2024
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
104 changes: 66 additions & 38 deletions frontend/src/components/NavBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,62 +5,90 @@ import UserDropdown from "./UserDropdown";
import useAuth from "@/hooks/useAuth";
import { Button } from "@/shadcn-components/ui/button";



const NavBar = () => {

const navigate = useNavigate();
const { currentUser } = useAuth();
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);


const displayName =
currentUser?.displayName || currentUser?.email || "User";

return (

<nav className="bg-lime-200 bg-opacity-50 shadow-md">
<div className="container mx-auto px-6 py-8 flex justify-between items-center">
<Link to="/" className="flex items-center text-gray-800 text-xl font-bold gap-2">
<img src="../../Debate_Dino_Logo.svg" alt="Logo" className="h-8"/>
<span className="self-center whitespace-nowrap">DebateDino</span>
{/* Left side: Logo */}
<Link
to="/"
className="flex items-center text-gray-800 text-xl font-bold gap-2"
>
<img
src="../../Debate_Dino_Logo.svg"
alt="Logo"
className="h-8"
/>
<span className="self-center whitespace-nowrap">DebateDino</span>
</Link>

<div className="flex md:order-2">


{ currentUser ? <UserDropdown/> : <Button onClick={() => navigate("/login")}>Log In</Button>}

{/* Right side: User + Mobile Menu Toggle */}
<div className="flex md:order-2 items-center gap-4">
{/* If user is signed in, show greeting + UserDropdown; otherwise show Log In button */}
{currentUser ? (
<div className="flex items-center gap-3">
<span className="font-semibold text-gray-700">
Hi, {displayName}!
</span>
<UserDropdown />
</div>
) : (
<Button onClick={() => navigate("/login")}>Log In</Button>
)}

<button type="button" className="text-gray-800 hover:text-gray-600 md:hidden ml-3" onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}>
{/* Mobile Menu Toggle Button */}
<button
type="button"
className="text-gray-800 hover:text-gray-600 md:hidden ml-2"
onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
>
{isMobileMenuOpen ? <div>X</div> : <div>Menu</div>}
{/* <XIcon className="h-6 w-6" /> : <MenuIcon className="h-6 w-6" /> */}
</button>
</div>

<div className={`md:flex items-center ${isMobileMenuOpen ? 'block' : 'hidden'}`}>
{/* Expanded/Collapsed Nav Links & Search */}
<div
className={`md:flex items-center ${
isMobileMenuOpen ? "block" : "hidden"
}`}
>
{/* Nav Links */}
<div className="flex flex-col md:flex-row md:ml-6">
<Link to="/" className="navbar-link">
Home
</Link>
<Link to="/about" className="navbar-link">
About
</Link>
<Link to="/tournaments" className="navbar-link">
Tournaments
</Link>
</div>

{/* links */}
<div className="flex flex-col md:flex-row md:ml-6">
<Link to="/" className="navbar-link">Home</Link>
<Link to="/about" className="navbar-link">About</Link>
<Link to="/tournaments" className="navbar-link">Tournaments</Link>
{/* Search Bar */}
<div className="md:flex md:justify-end mt-2 md:mt-0 md:w-1/2 lg:w-1/4">
<div className="relative">
<input
type="text"
className="search-bar"
placeholder="Search"
/>
<div className="absolute top-0 left-0 inline-flex items-center p-2">
{/* search icon placeholder */}
</div>
</div>

{/* search */}
<div className="md:flex md:justify-end mt-2 md:mt-0 md:w-1/2 lg:w-1/4">
<div className="relative">
<input type="text" className="search-bar" placeholder="Search" />
<div className="absolute top-0 left-0 inline-flex items-center p-2">
{/* <SearchIcon className="h-6 w-6 text-gray-500" /> */}
</div>
</div>
</div>


</div>
</div>
</div>
</nav>


)
}
);
};

export default NavBar
export default NavBar;
128 changes: 116 additions & 12 deletions frontend/src/pages/About.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,125 @@


const About = () => {
return (
<div className="min-h-screen flex flex-col">
{/* Hero / Header section */}
<div
className="relative h-[40vh] bg-center bg-cover flex justify-center items-center"
style={{
backgroundImage:
'url("../../Debate_Dino_Logo.svg")',
}}
>
<div className="absolute inset-0 bg-black bg-opacity-40"></div>
<div className="z-10 text-center text-white">
<h1 className="text-5xl font-bold mb-2">About Debate Dino</h1>
<p className="text-xl">We sure love debating!</p>
</div>
</div>

return (
<div className="container mx-auto flex items-center justify-center min-h-screen">
<div className="flex flex-col justify-center">
<h1 className="text-5xl font-bold">About Debate Dino</h1>
<p className="text-xl">We sure love debating!</p>
</div>
{/* Main content */}
<section className="container mx-auto py-12 px-4 md:px-8">
{/* Intro paragraph */}
<div className="mb-8">
<h2 className="text-3xl font-bold mb-4">Who We Are</h2>
<p className="text-lg leading-relaxed">
At <strong>Debate Dino</strong>, our mission is to be a dinosaur.
</p>
</div>
)

{/* Mission / Vision section */}
<div className="grid md:grid-cols-2 gap-8 mb-12">
<div>
<h3 className="text-2xl font-semibold mb-3">Our Mission</h3>
<p className="text-base leading-relaxed">
Our mission is to bring debaters of all backgrounds together to
learn, compete, and have fun. We believe that debate fosters
critical thinking, empathy, and effective communication—skills
that empower people to make positive changes in their lives
and communities.
</p>
</div>
<div>
<h3 className="text-2xl font-semibold mb-3">Our Vision</h3>
<p className="text-base leading-relaxed">
We envision a world where thoughtful discussion is accessible
to everyone—no matter their location, experience, or skill
level. From friendly online forums to prestigious, in-person
tournaments, we aim to create an inclusive environment where
participants can explore new perspectives and grow together.
</p>
</div>
</div>

}
{/* Fun Fact / Stats / Highlight section (optional) */}
<div className="bg-lime-100 rounded-lg p-6 mb-12 shadow-md">
<h3 className="text-2xl font-semibold mb-3">Why “Dino”?</h3>
<p className="text-base leading-relaxed">
Dinosaurs spark curiosity, imagination, and a sense of wonder
about the past—and that’s what we want for debates: a place
that ignites curiosity, respectful exploration, and excitement
for the next new idea. Plus, who doesn’t love a friendly T-Rex
as a mascot?
</p>
</div>

{/* Team / Values / “Timeline” section (optional) */}
<div className="mb-8">
<h3 className="text-2xl font-semibold mb-4">Our Journey</h3>
<ul className="space-y-4">
<li>
<div className="flex items-center mb-1">
<span className="font-bold text-lime-600 mr-2">2021</span>
<span className="text-gray-800 font-medium">
Debate Dino was hatched
</span>
</div>
<p className="ml-6 text-gray-600 text-sm">
Began as a small group of enthusiastic debaters on campus.
</p>
</li>
<li>
<div className="flex items-center mb-1">
<span className="font-bold text-lime-600 mr-2">2022</span>
<span className="text-gray-800 font-medium">
First official tournament
</span>
</div>
<p className="ml-6 text-gray-600 text-sm">
We welcomed debaters from around the globe in our first big
online event.
</p>
</li>
<li>
<div className="flex items-center mb-1">
<span className="font-bold text-lime-600 mr-2">2023+</span>
<span className="text-gray-800 font-medium">
Expanding our footprint
</span>
</div>
<p className="ml-6 text-gray-600 text-sm">
Partnering with more institutions and clubs to bring debate
to new audiences.
</p>
</li>
</ul>
</div>

{/* Call to Action */}
<div className="text-center mt-12">
<h3 className="text-2xl font-semibold mb-4">
Ready to Join the Discussion?
</h3>
<p className="text-base mb-6">
Sign up for our next tournament or explore our forums to jump
into a debate that sparks your interest.
</p>
<button className="px-6 py-3 bg-black text-white rounded font-semibold">
Get Started
</button>
</div>
</section>
</div>
);
};

export default About;


Loading