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
.gitignore
+3
View File
@@ -36,3 +36,6 @@ yarn-error.log*
next-env.d.ts
.env
# Android build
android/
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;
}
}
}
}
assets/ArrowRightIcon.jsx
+20
View File
@@ -0,0 +1,20 @@
const ArrowRightIcon = (props) => {
return (
<svg
xmlns='http://www.w3.org/2000/svg'
viewBox='0 0 512 512'
{...props}
>
<path
fill='none'
stroke='currentColor'
strokeLinecap='round'
strokeLinejoin='round'
strokeWidth='48'
d='M184 112l144 144-144 144'
/>
</svg>
);
};
export default ArrowRightIcon;
assets/SettingsIcon.jsx
+20
View File
@@ -0,0 +1,20 @@
const SettingsIcon = (props) => {
return (
<svg
xmlns='http://www.w3.org/2000/svg'
viewBox='0 0 512 512'
{...props}
>
<path
d='M262.29 192.31a64 64 0 1057.4 57.4 64.13 64.13 0 00-57.4-57.4zM416.39 256a154.34 154.34 0 01-1.53 20.79l45.21 35.46a10.81 10.81 0 012.45 13.75l-42.77 74a10.81 10.81 0 01-13.14 4.59l-44.9-18.08a16.11 16.11 0 00-15.17 1.75A164.48 164.48 0 01325 400.8a15.94 15.94 0 00-8.82 12.14l-6.73 47.89a11.08 11.08 0 01-10.68 9.17h-85.54a11.11 11.11 0 01-10.69-8.87l-6.72-47.82a16.07 16.07 0 00-9-12.22 155.3 155.3 0 01-21.46-12.57 16 16 0 00-15.11-1.71l-44.89 18.07a10.81 10.81 0 01-13.14-4.58l-42.77-74a10.8 10.8 0 012.45-13.75l38.21-30a16.05 16.05 0 006-14.08c-.36-4.17-.58-8.33-.58-12.5s.21-8.27.58-12.35a16 16 0 00-6.07-13.94l-38.19-30A10.81 10.81 0 0149.48 186l42.77-74a10.81 10.81 0 0113.14-4.59l44.9 18.08a16.11 16.11 0 0015.17-1.75A164.48 164.48 0 01187 111.2a15.94 15.94 0 008.82-12.14l6.73-47.89A11.08 11.08 0 01213.23 42h85.54a11.11 11.11 0 0110.69 8.87l6.72 47.82a16.07 16.07 0 009 12.22 155.3 155.3 0 0121.46 12.57 16 16 0 0015.11 1.71l44.89-18.07a10.81 10.81 0 0113.14 4.58l42.77 74a10.8 10.8 0 01-2.45 13.75l-38.21 30a16.05 16.05 0 00-6.05 14.08c.33 4.14.55 8.3.55 12.47z'
fill='none'
stroke='currentColor'
strokeLinecap='round'
strokeLinejoin='round'
strokeWidth='32'
/>
</svg>
);
};
export default SettingsIcon;
capacitor.config.ts
+13
View File
@@ -0,0 +1,13 @@
import type { CapacitorConfig } from '@capacitor/cli';
const config: CapacitorConfig = {
appId: 'fr.lovemap.app',
appName: 'Lovemap ❤️',
webDir: 'out',
server: {
androidScheme: 'https',
},
backgroundColor: '#d94253',
};
export default config;
components/Navbar/config.js
+1 -1
View File
@@ -20,7 +20,7 @@ const config = [
icon: PeopleIcon,
},
{
title: 'Compte',
title: 'Profil',
link: '/account',
icon: AccountIcon,
},
next.config.mjs
+1
View File
@@ -1,5 +1,6 @@
/** @type {import('next').NextConfig} */
const nextConfig = {
output: 'export',
env: {
MAPBOX_TOKEN: process.env.MAPBOX_TOKEN,
},
package-lock.json
Generated
+927 -21
View File
File diff suppressed because it is too large Load Diff
package.json
+5 -1
View File
@@ -9,12 +9,16 @@
"lint": "next lint"
},
"dependencies": {
"@capacitor/android": "^6.1.2",
"@capacitor/cli": "^6.1.2",
"@capacitor/core": "^6.1.2",
"deck.gl": "^9.0.28",
"mapbox-gl": "^3.6.0",
"next": "14.2.7",
"react": "^18",
"react-dom": "^18",
"react-map-gl": "^7.1.7"
"react-map-gl": "^7.1.7",
"react-slot-counter": "^3.0.1"
},
"devDependencies": {
"eslint": "^8",