Files
HKSingleParty/03_source/mobile/src/pages/DemoSlidingProfile/AppPages/Profile.jsx
2025-06-08 19:08:01 +08:00

156 lines
4.7 KiB
JavaScript

import {
IonCard,
IonCardContent,
IonCardSubtitle,
IonCardTitle,
IonCol,
IonContent,
IonGrid,
IonHeader,
IonIcon,
IonNote,
IonPage,
IonRow,
useIonRouter,
useIonViewWillEnter,
} from '@ionic/react';
import { chevronBack } from 'ionicons/icons';
import { useEffect } from 'react';
import { useRef, useState } from 'react';
import { useParams } from 'react-router';
import { Swiper, SwiperSlide } from 'swiper/react';
// import 'swiper/swiper.scss';
import 'swiper/css';
import { collections, people, tags } from '../data';
import styles from './Profile.module.scss';
const Profile = () => {
const { id } = useParams();
const router = useIonRouter();
const headingRef = useRef(null);
const [slideSpace, setSlideSpace] = useState(0);
const [profile, setProfile] = useState([]);
useIonViewWillEnter(() => {
setSlideSpace(5);
});
useEffect(() => {
headingRef.current.classList.add('animate__slideInLeft');
headingRef.current.style.display = '';
}, []);
useEffect(() => {
const getProfile = async () => {
const person = await people.filter((person) => parseInt(person.id) === parseInt(id))[0];
setProfile(person);
};
getProfile();
}, [id]);
return (
<IonPage>
<IonHeader>
<div className={styles.customHeader}>
<img src={profile.cover} className="animate__animated" alt="header" />
<div className="ion-justify-content-between">
<div className={styles.customBackButton} onClick={() => router.goBack()}>
<IonIcon icon={chevronBack} />
</div>
</div>
<div
className={`${styles.mainContent} animate__animated`}
ref={headingRef}
style={{ display: 'none' }}
>
<IonGrid>
<IonRow>
<IonCol size="12" className={styles.profileHeaderContainer}>
<img src={profile.image} className={styles.avatar} alt="avatar" />
<IonCard className={styles.profileHeader}>
<IonCardContent className={styles.profileDetails}>
<IonCardTitle>{profile.name}</IonCardTitle>
<p>{profile.location}</p>
<IonRow className={styles.profileStats}>
<IonCol size="4">
<IonCardSubtitle>Purchased</IonCardSubtitle>
<IonNote>{profile.purchased}</IonNote>
</IonCol>
<IonCol size="4">
<IonCardSubtitle>Wished</IonCardSubtitle>
<IonNote>{profile.wished}</IonNote>
</IonCol>
<IonCol size="4">
<IonCardSubtitle>Likes</IonCardSubtitle>
<IonNote>{profile.likes}</IonNote>
</IonCol>
</IonRow>
</IonCardContent>
</IonCard>
</IonCol>
</IonRow>
</IonGrid>
</div>
</div>
</IonHeader>
<IonContent fullscreen>
<IonGrid className="animate__animated animate__fadeIn">
<IonRow>
<IonCol size="12">
<IonCardTitle className={styles.title}>Collection</IonCardTitle>
</IonCol>
</IonRow>
</IonGrid>
<div className={` ${styles.collections} animate__animated animate__slideInRight`}>
<Swiper spaceBetween={slideSpace} slidesPerView={2.5}>
{collections.map((collection, index) => {
return (
<SwiperSlide>
<IonCard className={styles.collectionCard}>
<img src={collection.image} alt="collection" />
<div className={styles.collectionDetails}>
<IonCardTitle>{collection.name}</IonCardTitle>
<IonNote>{collection.no} wardrobes</IonNote>
</div>
</IonCard>
</SwiperSlide>
);
})}
</Swiper>
</div>
<IonGrid>
<IonRow>
<IonCol size="12">
<IonCardTitle className={styles.title}>Tags</IonCardTitle>
</IonCol>
</IonRow>
<IonRow className="animate__animated animate__slideInLeft">
{tags.map((tag, index) => {
return (
<IonCol className={styles.tag} key={`tag_${index}`} size="4">
{tag}
</IonCol>
);
})}
</IonRow>
</IonGrid>
</IonContent>
</IonPage>
);
};
export default Profile;