profile setting pages done (routing & linking left)

src/components/HpForm/HpDetailPageLinks.tsx

@@ -39,12 +39,12 @@ function HpDetailsPageLinks({page,setPage}:NavProps) {
           <FileInput
             label="Upload Poster Image*"
             placeholder="Upload the event poster image"
-            icon={<IconUpload size={14} />}
+            // icon={<IconUpload size={14} />}
             accept="image/*"
             onChange={(file) => handleImageChange(file as File)}
           />
           {preview && (
-            <Image src={preview} alt="Uploaded Image" mt="md" radius="md" withPlaceholder />
+            <Image src={preview} alt="Uploaded Image" mt="md" radius="md"  />
           )}
         </Grid.Col>
         <Group  >

src/components/PspContactInformation/PspContactInformation.module.css

@@ -0,0 +1,63 @@
+.formContainer {
+    padding: 25px;
+    background-color: white;
+    border-radius: 8px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    padding-top: 85px;
+  }
+
+  .imageUploadCol {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .fileInput {
+    width: 100%;
+  }
+
+  .imagePreview {
+    width: 100%;
+    max-width: 150px;
+    border-radius: 50%;
+    border: 2px dashed #ccc;
+    padding: 10px;
+    margin-top: 10px;
+  }
+
+  .buttonGroup {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 20px;
+  }
+
+  .backButton,
+  .nextButton {
+    flex: 1;
+    margin: 0 10px;
+  }
+
+  @media (max-width: 768px) {
+    .formContainer {
+      padding: 10px;
+    }
+
+    .imageUploadCol {
+      margin-top: 20px;
+    }
+
+    .imagePreview {
+      max-width: 120px;
+    }
+
+    .buttonGroup {
+      flex-direction: column;
+      gap: 10px;
+    }
+
+    .backButton,
+    .nextButton {
+      margin: 0;
+    }
+  }
+

src/components/PspContactInformation/PspContactInformation.tsx

@@ -0,0 +1,52 @@
+import React, { useState } from 'react';
+import { TextInput, Container, Grid, Button, Group } from '@mantine/core';
+import styles from './PspContactInformation.module.css';
+
+interface NavProps {
+  page: string;
+  setPage: React.Dispatch<React.SetStateAction<string>>;
+}
+
+function PspContactInformation({ page, setPage }: NavProps) {
+  return (
+    <Container className={styles.formContainer}>
+      <Grid>
+        <Grid.Col span={12}>
+          <Grid>
+            <Grid.Col span={6}>
+              <TextInput label="Email" placeholder="Email Address" required />
+            </Grid.Col>
+            <Grid.Col span={6}>
+              <TextInput label="Twitter" placeholder="@ username" required />
+            </Grid.Col>
+            <Grid.Col span={6}>
+              <TextInput label="Phone Number" placeholder="Contact Number" required />
+            </Grid.Col>
+            <Grid.Col span={6}>
+              <TextInput label="Facebook" placeholder="Profile Link" required />
+            </Grid.Col>
+            <Grid.Col span={6}>
+              <TextInput label="Location" placeholder="City, Country" required />
+            </Grid.Col>
+            <Grid.Col span={6}>
+              <TextInput label="Instagram" placeholder="Profile Link" required />
+            </Grid.Col>
+            <Grid.Col span={6}>
+              <TextInput label="LinkedIn" placeholder="Profile Link" required />
+            </Grid.Col>
+          </Grid>
+        </Grid.Col>
+      </Grid>
+      <Group mt="md">
+      <Button onClick={() => setPage('SportsProfilePage')} className={styles.nextButton} color='#058A4A'>
+          Jump to Personal info
+        </Button>
+        <Button onClick={() => setPage('SportsProfilePage')} className={styles.nextButton} color='#058A4A'>
+          Jump to Sports Profile
+        </Button>
+      </Group>
+    </Container>
+  );
+}
+
+export default PspContactInformation;

src/components/PspDocumentInfo/PspDocumentInfo.module.css

@@ -0,0 +1,4 @@
+.formContainer{
+    margin: 5%;
+    margin-top: 80px;
+}

src/components/PspDocumentInfo/PspDocumentInfo.tsx

@@ -0,0 +1,74 @@
+import React, { useState } from 'react';
+import { TextInput, Container, Grid, Button, Group } from '@mantine/core';
+import styles from './PspDocumentInfo.module.css';
+
+interface NavProps {
+  page: string;
+  setPage: React.Dispatch<React.SetStateAction<string>>;
+}
+
+function PspDocumentInfo({ page, setPage }: NavProps) {
+  const [AadharData, setAadharData] = useState([{ Aadhar: '' }]);
+
+  const handleInputChange = (index: number, value: string) => {
+    const updatedAadharData = [...AadharData];
+    updatedAadharData[index].Aadhar = value;
+    setAadharData(updatedAadharData);
+  };
+
+  const addAadhar = () => {
+    setAadharData([...AadharData, { Aadhar: '' }]);
+  };
+
+  return (
+    <>
+      <Container className={styles.formContainer}>
+        <Grid>
+          {AadharData.map((AadharEntry, index) => (
+            <Grid.Col key={index} span={12}>
+              <TextInput
+                label="Aadhar Card No"
+                placeholder="0000 0000 0000"
+                type="number"
+                value={AadharEntry.Aadhar}
+                onChange={(event) => {
+                  const value = event.currentTarget.value;
+                  // Allow only numbers and limit the length to 12 digits
+                  if (/^\d{0,12}$/.test(value)) {
+                    handleInputChange(index, value);
+                  }
+                }} required
+              />
+            </Grid.Col>
+          ))}
+        </Grid>
+        <Group mt="md">
+        <Button
+            onClick={() => setPage('DocumentPage')}
+            className={styles.nextButton}
+            color="green"
+          >
+            Jump to Document
+          </Button>
+          <Button
+            onClick={() => setPage('AadharInfo')}
+            className={styles.nextButton}
+            color="green"
+          >
+            Save All
+          </Button>
+
+        </Group>
+        <br />
+        <Button
+          className={styles.nextButton}
+          color="green"
+        >
+          View My Profile
+        </Button>
+      </Container>
+    </>
+  );
+}
+
+export default PspDocumentInfo;

src/components/PspNav/PspNav.module.css

@@ -0,0 +1,91 @@
+/* Existing styles */
+.navbar {
+  height: rem(700px);
+  width: rem(300px);
+  padding: var(--mantine-spacing-md);
+  display: flex;
+  flex-direction: column;
+  background-color: #058a4a;
+  transition: transform 0.3s ease, opacity 0.3s ease;
+}
+
+.navbarOpen {
+  transform: translateX(0);
+  opacity: 1;
+}
+
+.navbarMain {
+  flex: 1;
+  margin-top: 15%;
+}
+
+.header {
+  padding-bottom: var(--mantine-spacing-md);
+  margin-bottom: calc(var(--mantine-spacing-md) * 1.5);
+  border-bottom: rem(1px) solid var(--mantine-color-blue-7);
+}
+
+.footer {
+  padding-top: var(--mantine-spacing-md);
+  margin-top: var(--mantine-spacing-md);
+  border-top: rem(1px) solid #058A4A;
+}
+
+.version {
+  background-color: #fdfffc;
+  color: var(--mantine-color-white);
+}
+
+.link {
+  display: flex;
+  align-items: center;
+  text-decoration: none;
+  font-size: var(--mantine-font-size-sm);
+  color: var(--mantine-color-white);
+  padding: var(--mantine-spacing-xs) var(--mantine-spacing-sm);
+  border-radius: var(--mantine-radius-sm);
+  font-weight: 500;
+  transition: background-color 0.3s ease, color 0.3s ease;
+
+  &:hover {
+    background-color: #058A4A;
+    color: var(--mantine-color-white);
+  }
+
+  &[data-active] {
+    box-shadow: var(--mantine-shadow-sm);
+    background-color: var(--mantine-color-white);
+    color: #058A4A;
+
+    .linkIcon {
+      color: #058A4A;
+    }
+  }
+}
+
+.linkIcon {
+  color: var(--mantine-color-blue-1);
+  margin-right: var(--mantine-spacing-sm);
+  width: rem(25px);
+  height: rem(25px);
+}
+
+/* Mobile styles */
+@media (max-width: 768px) {
+  .navbar {
+    position: fixed;
+    top: 0;
+    right: 0;
+    transform: translateX(100%);
+    opacity: 0;
+  }
+
+  .navbarOpen {
+    transform: translateX(0);
+    opacity: 1;
+  }
+
+  .mobileMenuButton {
+    display: block;
+  }
+}

src/components/PspNav/PspNav.tsx

@@ -0,0 +1,68 @@
+import { useState } from 'react';
+import { Group, Code, Button } from '@mantine/core';
+import {
+  IconUser,
+  IconPhone,
+  IconTrophy,
+  IconMedal,
+  IconFileText,
+  IconSwitchHorizontal,
+  IconLogout,
+  IconMenu, // Icon for mobile menu toggle
+} from '@tabler/icons-react';
+import { MantineLogo } from '@mantinex/mantine-logo';
+
+import classes from './PspNav.module.css';
+
+const data = [
+  { link: '', label: 'Personal Information', icon: IconUser },
+  { link: '', label: 'Contact Information', icon: IconPhone },
+  { link: '', label: 'Sport Profile', icon: IconTrophy },
+  { link: '', label: 'Tournament', icon: IconMedal },
+  { link: '', label: 'Document', icon: IconFileText },
+];
+
+export function PspNav() {
+  const [active, setActive] = useState('Personal Information');
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+
+  const links = data.map((item) => (
+    <a
+      className={classes.link}
+      data-active={item.label === active || undefined}
+      href={item.link}
+      key={item.label}
+      onClick={(event) => {
+        event.preventDefault();
+        setActive(item.label);
+        if (mobileMenuOpen) setMobileMenuOpen(false);
+      }}
+    >
+      <item.icon className={classes.linkIcon} stroke={1.5} />
+      <span>{item.label}</span>
+    </a>
+  ));
+
+  return (
+    <nav className={`${classes.navbar} ${mobileMenuOpen ? classes.navbarOpen : ''}`}>
+      <div className={classes.navbarMain}>
+        <Group className={classes.header}>
+          <MantineLogo size={28} inverted style={{ color: 'white' }} />
+        </Group>
+        {links}
+      </div>
+
+      <div className={classes.footer}>
+        <a href="#" className={classes.link} onClick={(event) => event.preventDefault()}>
+          <IconSwitchHorizontal className={classes.linkIcon} stroke={1.5} />
+          <span>Change account</span>
+        </a>
+
+        <a href="#" className={classes.link} onClick={(event) => event.preventDefault()}>
+          <IconLogout className={classes.linkIcon} stroke={1.5} />
+          <span>Logout</span>
+        </a>
+      </div>
+    </nav>
+  );
+}