alexis/Lovemap
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨ Design of profile page

Browse Source
This commit is contained in:
alexis
2024-09-05 19:23:11 +02:00
parent aebde116b2
commit 3b90f9acd2
10 changed files with 1215 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/account/page.jsx
+113
View File
@@ -0,0 +1,113 @@
// ---------------------------------------------------------------------------------------------------------------------
//! Imports
// ---------------------------------------------------------------------------------------------------------------------
// --------------------------------------------------- Components ------------------------------------------------------
import Link from 'next/link';
import SlotCounter from 'react-slot-counter';
// ---------------------------------------------------------------------------------------------------------------------
// ------------------------------------------------- Assets & Styles ---------------------------------------------------
import SettingsIcon from '@/assets/SettingsIcon';
import ArrowRightIcon from '@/assets/ArrowRightIcon';
import './styles.scss';
// ---------------------------------------------------------------------------------------------------------------------
const Account = () => {
return (
<div className='accountContainer'>
<div className='header'>
<div className='infosContainer'>
<p className='username'>Un Épicier</p>
<p className='sinceDate'>Créé le: 02/09/2024</p>
</div>
<Link
href={'/settings'}
className='settingsButton'
>
<SettingsIcon />
</Link>
</div>
<div className='separator' />
<div className='statistics'>
<div className='statistic'>
<SlotCounter
value={'00'}
startValue={'00'}
startValueOnce
dummyCharacterCount={10}
direction='top-bottom'
containerClassName='slotCounter'
/>
<p className='statName'>Followers</p>
</div>
<div className='statistic'>
<SlotCounter
value={'00'}
startValue={'00'}
startValueOnce
dummyCharacterCount={10}
direction='top-bottom'
containerClassName='slotCounter'
/>
<p className='statName'>Suivis</p>
</div>
<div className='statistic'>
<SlotCounter
value={'00'}
startValue={'00'}
startValueOnce
dummyCharacterCount={10}
direction='top-bottom'
containerClassName='slotCounter'
/>
<p className='statName'>Loves par semaine</p>
</div>
<div className='statistic'>
<SlotCounter
value={'00'}
startValue={'00'}
startValueOnce
dummyCharacterCount={10}
direction='top-bottom'
containerClassName='slotCounter'
/>
<p className='statName'>Loves par mois</p>
</div>
<div className='statistic'>
<SlotCounter
value={'00'}
startValue={'00'}
startValueOnce
dummyCharacterCount={10}
direction='top-bottom'
containerClassName='slotCounter'
/>
<p className='statName'>Loves par an</p>
</div>
<div className='statistic'>
<SlotCounter
value={'00'}
startValue={'00'}
startValueOnce
dummyCharacterCount={10}
direction='top-bottom'
containerClassName='slotCounter'
/>
<p className='statName'>Loves total</p>
</div>
</div>
<div className='buttonsContainer'>
<button className='button'>
Followers <ArrowRightIcon />
</button>
<button className='button'>
Suivis <ArrowRightIcon />
</button>
</div>
</div>
);
};
export default Account;
app/account/styles.scss
+111
View File
@@ -0,0 +1,111 @@
.accountContainer {
display: flex;
flex-direction: column;
align-items: center;
& > .header {
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
gap: 20px;
padding: 20px;
width: 100%;
& > .infosContainer {
display: flex;
flex-direction: column;
gap: 10px;
& > .username {
font-size: 1.1rem;
color: #ffffff;
}
& > .sinceDate {
font-size: 0.9rem;
font-weight: 300;
color: #eee;
}
}
& > .settingsButton {
$size: 25px;
width: $size;
height: $size;
color: #ffffff;
}
}
& > .separator {
display: block;
width: 90%;
height: 1px;
background-color: rgb(254, 254, 250);
background: linear-gradient(
90deg,
rgba(254, 254, 250, 0) 0%,
rgba(254, 254, 250, 1) 10%,
rgba(254, 254, 250, 1) 90%,
rgba(254, 254, 250, 0) 100%
);
}
& > .statistics {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
gap: 20px;
justify-items: center;
align-items: center;
padding: 40px 20px;
width: 100%;
& > .statistic {
display: flex;
flex-direction: column;
align-items: center;
font-weight: 300;
color: #ffffff;
& > .slotCounter {
font-size: 3rem;
}
& > .statName {
color: #eee;
}
}
}
& > .buttonsContainer {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 2px;
width: 100%;
box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
& > .button {
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
gap: 20px;
padding: 15px 20px;
border: none;
background-color: #d94253;
font-size: 1rem;
color: #ffffff;
filter: brightness(1.1);
transition: filter 0.3s ease;
&:hover {
filter: brightness(1.3);
}
& > svg {
width: 1.2em;
}
}
}
}