156 lines
4.7 KiB
JavaScript
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;
|