NavLinks Activation

src/App.tsx

@@ -4,12 +4,23 @@ import { Router } from './Router'
 import { theme } from './theme';
 import { HeaderMegaMenu } from './components/MaidaanLogo/HeaderMegaMenu';
 import { FooterLinks } from './components/LpFooter/FooterLinks';
+import { useState } from 'react';
+import Tournaments from './components/Tournaments/Tournaments';
+import GovtSchemes from './pages/GovtSchemes';
+import Academies from './pages/Academies';
+import PageProvider from './Context';
 export default function App() {
+  // type NL = 'Tournaments' | 'Events' | 'Academies' | 'GovtSheme'| 'Home';
+  const [NavLinks,SetNavLinks]=useState<string>('')
+  // const [Page,SetPage] =useState<string>('')
   return (
     <MantineProvider theme={theme}>
-    <HeaderMegaMenu/>
-      <Router />
+    <PageProvider>
+    <HeaderMegaMenu SetNavLinks={SetNavLinks} NavLinks={NavLinks} />
+     {NavLinks==='Tournaments'?<Tournaments/>:NavLinks==='GovernmentSchemes'?<GovtSchemes/>:NavLinks==='Academies'?<Academies/>:<Router/>
+}
       <FooterLinks/>
+    </PageProvider>
     </MantineProvider>
 
   );

src/Context.tsx

@@ -1,24 +1,33 @@
-// CounterContext.tsx
-import React, { createContext, useState } from 'react';
+import { createContext,useState,Dispatch,SetStateAction, } from "react";
+import { ReactNode } from "react";
 
-// Define the shape of the context data
-interface ContextType {
-  count: boolean;
-  setCount: React.Dispatch<React.SetStateAction<boolean>>;
+
+export interface PageContextInterface{
+Page:[{
+  name:string
+}]
+setPage:Dispatch<SetStateAction<string>>
 }
 
-// Create the context with a default value of undefined
-const Context = createContext<ContextType | undefined>(undefined);
+const defaultState={
+ Page:[{
+name:''
+ }],
+  setPage:(page:string)=>{}
+} as PageContextInterface
+
+export const PagerContext =createContext(defaultState)
 
-export const ContextProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
-  // Create state that will be shared
-  const [count, setCount] = useState<boolean>(true);
+type PagerProviderProps={
+  children:ReactNode
+}
 
-  return (
-    <Context.Provider value={{ count, setCount }}>
-      {children}
-    </Context.Provider>
-  );
-};
+export default function PageProvider({children}:PagerProviderProps){
+const [Page,setPage]=useState<string>('')
 
-export default Context;
+return(
+  <PagerContext.Provider value={{Page,setPage}}>
+{children}
+  </PagerContext.Provider>
+)
+}

src/Router.tsx

@@ -16,28 +16,16 @@ const router = createBrowserRouter([
     path: '/SignUp',
     element: <SignUpPage/>,
   },
-  {
-    path: '/Tournament',
-    element: <TournamentPage />,
-  },
+
   {
     path: '/Tournament/Details',
     element: <TournamentDetailPage />,
   },
-  {
-    path: '/GvtSch',
-    element: <GovtSchemes/>,
-  },
+
   {
     path: '/HostingPage',
     element: <HostingPage/>,
-  },
-  {
-    path: '/Aca',
-    element: <Academi/>,
   }
-
-
 ]);
 
 

src/components/HpForm/HpDetailPageLinks.tsx

@@ -1,9 +1,12 @@
 import React, { useState } from 'react';
-import { TextInput, FileInput, Container, Grid, Image } from '@mantine/core';
+import { TextInput, FileInput, Container, Grid, Image,Button,Group } from '@mantine/core';
 import { IconUpload } from '@tabler/icons-react';
 import styles from './HpDetailsPage.module.css';
-
-const HpDetailsPageLinks: React.FC = () => {
+interface NavProps {
+  page:string;
+ setPage: React.Dispatch<React.SetStateAction<string>>
+}
+function HpDetailsPageLinks({page,setPage}:NavProps) {
   const [image, setImage] = useState<File | null>(null);
   const [preview, setPreview] = useState<string | null>(null);
 
@@ -36,14 +39,18 @@
           <FileInput
             label="Upload Poster Image*"
             placeholder="Upload the event poster image"
             icon={<IconUpload size={14} />}
             accept="image/*"
             onChange={(file) => handleImageChange(file as File)}
           />
           {preview && (
             <Image src={preview} alt="Uploaded Image" mt="md" radius="md" withPlaceholder />
           )}
         </Grid.Col>
+        <Group  >
+        <Button>Back to Home page</Button>
+        <Button onClick={()=>setPage('PrizesPage')}>Next</Button>
+        </Group> 
       </Grid>
     </Container>
   );

src/components/HpForm/HpDetailsPage.tsx

@@ -1,8 +1,11 @@
 import React from 'react';
-import { TextInput, Textarea, Container, Grid } from '@mantine/core';
+import { TextInput, Textarea, Container, Grid,Button,Group} from '@mantine/core';
 import styles from './HpDetailsPage.module.css';
-
-const HpDetailsPage: React.FC = () => {
+interface NavProps {
+  page:string;
+ setPage: React.Dispatch<React.SetStateAction<string>>
+}
+function HpDetailsPage({page,setPage}:NavProps) {
   return (
     <Container mt={30} className={styles.formContainer}>
       <Grid>
@@ -24,7 +27,11 @@ const HpDetailsPage: React.FC = () => {
         <Grid.Col span={12}>
           <Textarea label="Tournament Details" placeholder="Provide details of the tournament" required />
         </Grid.Col>
-      </Grid>
+      <Group  >
+        <Button>Back to Home page</Button>
+        <Button onClick={()=>setPage('LinksPage')}>Next</Button>
+        </Group>    
+       </Grid>
     </Container>
   );
 };

src/components/HpForm/HpDetailsubmit.tsx

@@ -1,8 +1,11 @@
 import { useState } from 'react';
 import { Button, Container, Select, Text } from '@mantine/core';
 import classes from './HpDetailsPage.module.css';
-
-export function HpDetailsubmit() {
+interface NavProps {
+  page:string;
+ setPage: React.Dispatch<React.SetStateAction<string>>
+}
+export function HpDetailsubmit({page,setPage}:NavProps) {
   const [submitted, setSubmitted] = useState(false);
   const [status, setStatus] = useState<string>('');
 

src/components/HpForm/HpFormPrizePage.tsx

@@ -1,8 +1,11 @@
 import React from 'react';
-import { TextInput, Textarea, Container, Grid,Button } from '@mantine/core';
+import { TextInput, Textarea, Container, Grid,Button,Group} from '@mantine/core';
 import styles from './HpDetailsPage.module.css';
-
-const HpFormPrizePage: React.FC = () => {
+interface NavProps {
+  page:string;
+ setPage: React.Dispatch<React.SetStateAction<string>>
+}
+function HpFormPrizePage({page,setPage}:NavProps){
   return (
     <Container mt={30} className={styles.formContainer}>
       <Grid>
@@ -23,6 +26,10 @@ const HpFormPrizePage: React.FC = () => {
         <Button variant='outline' color='red'>Delete Prize</Button>
         </Grid.Col>
       </Grid>
+      <Group  >
+        <Button>Back to Home page</Button>
+        <Button onClick={()=>setPage('SchedulePage')}>Next</Button>
+        </Group> 
     </Container>
   );
 };

src/components/HpForm/HpSchedulePage.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { TextInput, Container, Grid, Button } from '@mantine/core';
+import { TextInput, Container, Grid, Button,Group } from '@mantine/core';
 import styles from './HpDetailsPage.module.css';
 
 interface ScheduleData {
@@ -9,8 +9,11 @@ interface ScheduleData {
   endDate: string;
   endTime: string;
 }
-
-const HpSchdulePage: React.FC = () => {
+interface NavProps {
+  page:string;
+ setPage: React.Dispatch<React.SetStateAction<string>>
+}
+function HpSchdulePage({page,setPage}:NavProps) {
   const [schedules, setSchedules] = useState<ScheduleData[]>([
     { scheduleName: '', startDate: '', startTime: '', endDate: '', endTime: '' },
   ]);
@@ -99,6 +102,7 @@ const HpSchdulePage: React.FC = () => {
                 Delete Schedule
               </Button>
             </Grid.Col>
+
           </Grid>
         </div>
       ))}
@@ -112,6 +116,10 @@ const HpSchdulePage: React.FC = () => {
       >
         Add Schedule
       </Button>
+      <Group  >
+        <Button>Back to Home page</Button>
+        <Button onClick={()=>setPage('SubmitPage')}>Next</Button>
+        </Group> 
     </Container>
   );
 };

src/components/HpNav/HpNav.tsx

@@ -1,20 +1,14 @@
 import {
-    Group,
-    Button,
-    Divider,
-    Box,
-    Burger,
-    Drawer,
-    ScrollArea,
-    rem,
-    useMantineTheme,
-  } from '@mantine/core';
+    Group,Button,Divider,Box,Burger,Drawer,ScrollArea,rem,useMantineTheme,} from '@mantine/core';
   import { MantineLogo } from '@mantinex/mantine-logo';
   import { useDisclosure } from '@mantine/hooks';
   import classes from './HpNav.module.css';
+  interface NavProps {
+    page:string;
+   setPage: React.Dispatch<React.SetStateAction<string>>
+  }
 
-
-  export function HpNav() {
+  export function HpNav({page,setPage}:NavProps) {
     const [drawerOpened, { toggle: toggleDrawer, close: closeDrawer }] = useDisclosure(false);
     const [linksOpened, { toggle: toggleLinks }] = useDisclosure(false);
     const theme = useMantineTheme();

src/components/MaidaanLogo/HeaderMegaMenu.module.css

@@ -5,7 +5,9 @@
     border-bottom: rem(1px) solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
     /* padding-bottom: 0%; */
   }
-
+.active{
+ color: #F1A02F;
+}
 
   .link,.linkbtn {
     display: flex;
@@ -17,7 +19,7 @@
     color: light-dark(var(--mantine-color-black), var(--mantine-color-white));
     font-weight: 500;
     font-size: var(--mantine-font-size-sm);
-
+  cursor: pointer;
     @media (max-width: $mantine-breakpoint-sm) {
       height: rem(42px);
       width: 100%;

src/components/MaidaanLogo/HeaderMegaMenu.tsx

@@ -12,9 +12,12 @@ import {
   import { MantineLogo } from '@mantinex/mantine-logo';
   import { useDisclosure } from '@mantine/hooks';
   import classes from './HeaderMegaMenu.module.css';
+  interface NavProps {
+    NavLinks:string;
+   SetNavLinks: React.Dispatch<React.SetStateAction<string>>
+  }
 
-
-  export function HeaderMegaMenu() {
+  export function HeaderMegaMenu({NavLinks,SetNavLinks}:NavProps) {
     const [drawerOpened, { toggle: toggleDrawer, close: closeDrawer }] = useDisclosure(false);
     const [linksOpened, { toggle: toggleLinks }] = useDisclosure(false);
     const theme = useMantineTheme();
@@ -27,17 +30,17 @@ import {
             <MantineLogo size={30} />
 
             <Group h="100%" gap={0} visibleFrom="sm">
-              <a href="/Tournament" className={classes.link}>
-              Tournaments
+              <a  onClick={()=>SetNavLinks('Tournaments')} className={`${classes.link} `} >
+              <p className={` ${NavLinks==='Tournaments'?classes.active:classes.inactive}`}>Tournaments</p>
               </a>
-              <a href="#" className={classes.link}>
-              Events
+              <a onClick={()=>SetNavLinks('Events')} className={classes.link}>
+              <p className={` ${NavLinks==='Events'?classes.active:classes.inactive}`}>Events</p>
               </a>
-              <a href="/Aca" className={classes.link}>
-              Academies
+              <a onClick={()=>SetNavLinks('Academies')} className={classes.link}>
+              <p className={` ${NavLinks==='Academies'?classes.active:classes.inactive}`}>Academies</p>
               </a>
-              <a href="/GvtSch" className={classes.link}>
-              Government Schemes
+              <a onClick={()=>SetNavLinks('GovernmentSchemes')} className={classes.link}>
+              <p className={` ${NavLinks==='GovernmentSchemes'?classes.active:classes.inactive}`}>Government Schemes</p>
               </a> 
             </Group>
 

src/components/Tournaments/NextUpTcard.tsx

@@ -0,0 +1,46 @@
+import { Card, Group, Button, Text,Badge,SimpleGrid, Divider} from '@mantine/core';
+import classes from './Tournaments.module.css'
+
+function NextUpTcard(){
+    const tournaments= [
+        {
+          title: "Champions Trophy 2024",
+          sport: "Cricket",
+          location: "Mumbai",
+          teamsParticipating: "+1500 Teams Participating",
+          status: "Next Up",
+          fee: "Fees Free",
+          startDate: "Sept 21, 2024",
+        },
+
+        // Add more tournament objects here if needed
+      ];
+
+
+      const card =tournaments.map((tournaments) => (
+    <Card shadow="sm" p="lg">
+      <Card className={classes.card}>
+              <Text className={classes.title}>{tournaments.title}</Text>
+              <Text className={classes.sport}>{tournaments.sport}</Text>
+              <div className={classes.location}>
+                {/* <IconLocation size={18} className={classes.icon} /> */}
+                <Text>{tournaments.location}</Text>
+              </div>
+              <Divider my="md" color='#DDDDDD' size="sm"></Divider>
+              <Badge className={classes.badge}>{tournaments.status}</Badge>
+              <Text className={classes.fee}>{tournaments.fee}</Text>
+              <Text className={classes.teams}>{tournaments.teamsParticipating}</Text>
+              <div className={classes.date}>
+                {/* <IconCalendar size={18} className={classes.icon} /> */}
+                <Text>Kicks Off {tournaments.startDate}</Text>
+              </div>
+              <Button className={classes.registerButton}>Register Now</Button>
+            </Card>
+    </Card>
+  ));
+  return(
+    <SimpleGrid cols={{ base: 1, sm: 1, lg:2, md:2 }}>{card}</SimpleGrid>
+  )
+};
+
+export default NextUpTcard;