diff --git a/src/components/HpForm/HpDetailPageLinks.tsx b/src/components/HpForm/HpDetailPageLinks.tsx index 6ee9e0b..369ca00 100644 --- a/src/components/HpForm/HpDetailPageLinks.tsx +++ b/src/components/HpForm/HpDetailPageLinks.tsx @@ -39,12 +39,12 @@ function HpDetailsPageLinks({page,setPage}:NavProps) { } + // icon={} accept="image/*" onChange={(file) => handleImageChange(file as File)} /> {preview && ( - Uploaded Image + Uploaded Image )} diff --git a/src/components/PspContactInformation/PspContactInformation.module.css b/src/components/PspContactInformation/PspContactInformation.module.css new file mode 100644 index 0000000..41227b4 --- /dev/null +++ b/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; + } + } + \ No newline at end of file diff --git a/src/components/PspContactInformation/PspContactInformation.tsx b/src/components/PspContactInformation/PspContactInformation.tsx new file mode 100644 index 0000000..db96554 --- /dev/null +++ b/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>; +} + +function PspContactInformation({ page, setPage }: NavProps) { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} + +export default PspContactInformation; diff --git a/src/components/PspDocumentInfo/PspDocumentInfo.module.css b/src/components/PspDocumentInfo/PspDocumentInfo.module.css new file mode 100644 index 0000000..b195b18 --- /dev/null +++ b/src/components/PspDocumentInfo/PspDocumentInfo.module.css @@ -0,0 +1,4 @@ +.formContainer{ + margin: 5%; + margin-top: 80px; +} \ No newline at end of file diff --git a/src/components/PspDocumentInfo/PspDocumentInfo.tsx b/src/components/PspDocumentInfo/PspDocumentInfo.tsx new file mode 100644 index 0000000..c2478b4 --- /dev/null +++ b/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>; +} + +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 ( + <> + + + {AadharData.map((AadharEntry, index) => ( + + { + 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 + /> + + ))} + + + + + + +
+ + + + ); +} + +export default PspDocumentInfo; diff --git a/src/components/PspNav/PspNav.module.css b/src/components/PspNav/PspNav.module.css new file mode 100644 index 0000000..972ee14 --- /dev/null +++ b/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; + } +} diff --git a/src/components/PspNav/PspNav.tsx b/src/components/PspNav/PspNav.tsx new file mode 100644 index 0000000..ec3bae7 --- /dev/null +++ b/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) => ( + { + event.preventDefault(); + setActive(item.label); + if (mobileMenuOpen) setMobileMenuOpen(false); + }} + > + + {item.label} + + )); + + return ( + + ); +} diff --git a/src/components/PspPersonalInformation/PspPersonalInformation.module.css b/src/components/PspPersonalInformation/PspPersonalInformation.module.css new file mode 100644 index 0000000..41227b4 --- /dev/null +++ b/src/components/PspPersonalInformation/PspPersonalInformation.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; + } + } + \ No newline at end of file diff --git a/src/components/PspPersonalInformation/PspPersonalInformation.tsx b/src/components/PspPersonalInformation/PspPersonalInformation.tsx new file mode 100644 index 0000000..6e817c6 --- /dev/null +++ b/src/components/PspPersonalInformation/PspPersonalInformation.tsx @@ -0,0 +1,74 @@ +import React, { useState } from 'react'; +import { TextInput, FileInput, Container, Grid, Image, Button, Group, Select } from '@mantine/core'; +import styles from './PspPersonalInformation.module.css'; + +interface NavProps { + page: string; + setPage: React.Dispatch>; +} + +function PspPersonalInformation({ page, setPage }: NavProps) { + const [image, setImage] = useState(null); + const [preview, setPreview] = useState(null); + + const handleImageChange = (file: File) => { + setImage(file); + const objectUrl = URL.createObjectURL(file); + setPreview(objectUrl); + }; + + return ( + + + + + + + + + + + + + + + + + + handleInputChange(index, 'sport', value!)} + required + className={styles.selectInput} // Apply CSS class + /> + + + handleInputChange(index, 'team', event.currentTarget.value)} + required + className={styles.selectInput} // Apply CSS class + /> + + + handleInputChange(index, 'experience', value!)} + required + className={styles.selectInput} // Apply CSS class + /> + + + + ))} + +
+ + + + {/* */} + + + + + ); +} + +export default PspSportsInformation; diff --git a/src/components/PspTournamentparticipation/PspTournamentInfo.module.css b/src/components/PspTournamentparticipation/PspTournamentInfo.module.css new file mode 100644 index 0000000..3ca6c91 --- /dev/null +++ b/src/components/PspTournamentparticipation/PspTournamentInfo.module.css @@ -0,0 +1,4 @@ +.formContainer{ + margin: 3%; + margin-top: 100px; +} \ No newline at end of file diff --git a/src/components/PspTournamentparticipation/PspTournamentInfo.tsx b/src/components/PspTournamentparticipation/PspTournamentInfo.tsx new file mode 100644 index 0000000..1d8ccc9 --- /dev/null +++ b/src/components/PspTournamentparticipation/PspTournamentInfo.tsx @@ -0,0 +1,113 @@ +import React, { useState } from 'react'; +import { TextInput, Container, Grid, Button, Group, Select } from '@mantine/core'; +import styles from './PspTournamentInfo.module.css'; + +interface NavProps { + page: string; + setPage: React.Dispatch>; +} + +function PspTournamentInfo({ page, setPage }: NavProps) { + const [sportsData, setSportsData] = useState([ + { sport: '', team: '', role: '', experience: '' } + ]); + + const handleInputChange = (index: number, field: string, value: string) => { + const updatedSportsData = [...sportsData]; + updatedSportsData[index][field as keyof typeof updatedSportsData[0]] = value; + setSportsData(updatedSportsData); + }; + + const addSport = () => { + setSportsData([...sportsData, { sport: '', team: '', role: '', experience: '' }]); + }; + + const removeSport = (index: number) => { + const updatedSportsData = sportsData.filter((_, i) => i !== index); + setSportsData(updatedSportsData); + }; + + return ( + <> + + + {sportsData.map((sportEntry, index) => ( + + + + handleInputChange(index, 'team', event.currentTarget.value)} + + /> + + + handleInputChange(index, 'role', value!)} + + /> + + + handleInputChange(index, 'experience', value!)} + + /> + + + + + + + ))} + + + + + + + + + + + ); +} + +export default PspTournamentInfo; diff --git a/src/pages/ProfileSettingPage.module.css b/src/pages/ProfileSettingPage.module.css new file mode 100644 index 0000000..21fe1fe --- /dev/null +++ b/src/pages/ProfileSettingPage.module.css @@ -0,0 +1,3 @@ +.container{ + display: flex; +} \ No newline at end of file diff --git a/src/pages/ProfileSettingPage.tsx b/src/pages/ProfileSettingPage.tsx new file mode 100644 index 0000000..147ded7 --- /dev/null +++ b/src/pages/ProfileSettingPage.tsx @@ -0,0 +1,25 @@ +import { PspNav } from '@/components/PspNav/PspNav' +import PspPersonalInformation from '@/components/PspPersonalInformation/PspPersonalInformation' +import React from 'react' +import classes from './ProfileSettingPage.module.css'; +import PspContactInformation from '@/components/PspContactInformation/PspContactInformation'; +import PspSportsInformation from '@/components/PspSportsInformation/PspSportsInformation'; +import PspTournamentInfo from '@/components/PspTournamentparticipation/PspTournamentInfo'; +import PspDocumentInfo from '@/components/PspDocumentInfo/PspDocumentInfo'; + + +function ProfileSettingPage() { + return ( +
+ + {/* */} + {/* */} + {/* */} + {/* */} + +
+ ) +} + +export default ProfileSettingPage +