AMay/ritmosatx
1
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity

Basic pages,navigation,css implemented

Browse Source
This commit is contained in:
sigonasr2 2026-07-27 20:21:27 -05:00
parent 3adde5d984
commit 2876fea057
7 changed files with 74 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/App.tsx
View File

@ -1,15 +1,27 @@
import "./index.css";
import { BrowserRouter, Routes, Route } from "react-router";
import { EventInfo } from "./Pages/EventInfo";
import { Header } from "./Header";
import { Footer } from "./Footer";
import { Registration } from "./Pages/Registration";
import { Tournament } from "./Pages/Tournament";
import { About } from "./Pages/About";
export function App() {
return (
<BrowserRouter>
<Routes>
<Route index element={<EventInfo/>} />
</Routes>
</BrowserRouter>
<>
<BrowserRouter>
<Header/>
<Routes>
<Route index element={<EventInfo/>} />
<Route path="/event" element={<EventInfo/>} />
<Route path="/register" element={<Registration/>} />
<Route path="/tournament" element={<Tournament/>} />
<Route path="/about" element={<About/>} />
</Routes>
<Footer/>
</BrowserRouter>
</>
);
}

11
src/Components/NavButton.tsx Normal file
View File

@ -0,0 +1,11 @@
import { NavLink } from "react-router"
export function NavButton({label,route}:{label:String,route:any}){
let additionalPrefix="p-4 cursor-pointer shadow-lg rounded-lg bg-orange-100 ";
let additionalSuffix=" transition duration-300 ease-in-out hover:bg-orange-200";
return <NavLink to={route} className={(({ isActive }:{isActive:any}) =>isActive ? additionalPrefix+" bg-linear-to-b from-orange-100 from-51% to-orange-200 to-100% "+additionalSuffix : additionalPrefix+additionalSuffix)}>
<h3 className="text-xl font-bold">
{label}
</h3>
</NavLink>
}

18
src/Header.tsx
View File

@ -1,3 +1,5 @@
import { NavButton } from "./Components/NavButton"
export function Header(){
return <>
<header className="bg-amber-50 text-black text-center py-12">
@ -5,18 +7,10 @@ export function Header(){
<section className="text-center py-12 px-4">
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-8 mt-8">
<div className="p-4 cursor-pointer shadow-lg rounded-lg bg-orange-100 hover:bg-orange-200 transition-colors">
<h3 className="text-xl font-bold">Event Information</h3>
</div>
<div className="p-4 cursor-pointer shadow-lg rounded-lg bg-orange-100 hover:bg-orange-200 transition-colors">
<h3 className="text-xl font-bold">Registration</h3>
</div>
<div className="p-4 cursor-pointer shadow-lg rounded-lg bg-orange-100 hover:bg-orange-200 transition-colors">
<h3 className="text-xl font-bold">Tournament</h3>
</div>
<div className="p-4 cursor-pointer shadow-lg rounded-lg bg-orange-100 hover:bg-orange-200 transition-colors">
<h3 className="text-xl font-bold">About Ritmo SATX</h3>
</div>
<NavButton label="Event Info" route="/event"/>
<NavButton label="Registration" route="/register"/>
<NavButton label="Tournament" route="/tournament"/>
<NavButton label="About" route="/about"/>
</div>
</section>
</header>

13
src/Pages/About.tsx Normal file
View File

@ -0,0 +1,13 @@
export function About(){
return <div className="bg-white">
<section className="text-center py-12 px-4">
<h2 className="text-2xl font-bold">About</h2>
<p className="mt-4 text-gray-700 max-w-2xl mx-auto">
About
</p>
<div className="flex justify-center space-x-8 mt-8 animate-fadeIn">
About
</div>
</section>
</div>
}

13
src/Pages/Registration.tsx Normal file
View File

@ -0,0 +1,13 @@
export function Registration(){
return <div className="bg-white">
<section className="text-center py-12 px-4">
<h2 className="text-2xl font-bold">Registration</h2>
<p className="mt-4 text-gray-700 max-w-2xl mx-auto">
Registration
</p>
<div className="flex justify-center space-x-8 mt-8 animate-fadeIn">
Registration
</div>
</section>
</div>
}

13
src/Pages/Tournament.tsx Normal file
View File

@ -0,0 +1,13 @@
export function Tournament(){
return <div className="bg-white">
<section className="text-center py-12 px-4">
<h2 className="text-2xl font-bold">Tournament</h2>
<p className="mt-4 text-gray-700 max-w-2xl mx-auto">
Tournament
</p>
<div className="flex justify-center space-x-8 mt-8 animate-fadeIn">
Tournament
</div>
</section>
</div>
}

4
src/frontend.tsx
View File

@ -8,16 +8,12 @@
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { App } from "./App";
import { Footer } from "./Footer";
import { Header } from "./Header";
const elem = document.getElementById("root")!;
const app = (
<StrictMode>
<div className="dark">
<Header/>
<App />
<Footer/>
</div>
</StrictMode>
);