✨ Edit profile page
This commit is contained in:
+3
-2
@@ -8,13 +8,14 @@
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
body {
|
||||
--navSize: 60px;
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-rows: calc(100svh - var(--navSize)) var(--navSize);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100svw;
|
||||
height: 100svh;
|
||||
background-color: #d94253;
|
||||
|
||||
+1
-3
@@ -52,9 +52,7 @@ const Home = () => {
|
||||
height: '100%',
|
||||
}}
|
||||
mapboxAccessToken={process.env.MAPBOX_TOKEN}
|
||||
mapStyle={
|
||||
'mapbox://styles/unepicier/cm0o1bhc400gd01qkeubpb2za'
|
||||
}
|
||||
mapStyle={'mapbox://styles/mapbox/standard'}
|
||||
preserveDrawingBuffer
|
||||
></Map>
|
||||
</DeckGL>
|
||||
|
||||
@@ -0,0 +1,73 @@
|
||||
// ---------------------------------------------------------------------------------------------------------------------
|
||||
//! Imports
|
||||
// ---------------------------------------------------------------------------------------------------------------------
|
||||
|
||||
// --------------------------------------------------- Components ------------------------------------------------------
|
||||
import Link from 'next/link';
|
||||
import Input from '@/components/Input/Input';
|
||||
// ---------------------------------------------------------------------------------------------------------------------
|
||||
|
||||
// ------------------------------------------------- Assets & Styles ---------------------------------------------------
|
||||
import ArrowRightIcon from '@/assets/ArrowRightIcon';
|
||||
import './styles.scss';
|
||||
// ---------------------------------------------------------------------------------------------------------------------
|
||||
|
||||
const Settings = () => {
|
||||
return (
|
||||
<div className='settings'>
|
||||
<div className='header'>
|
||||
<Link
|
||||
href={'/statistics'}
|
||||
className='backButton'
|
||||
>
|
||||
<ArrowRightIcon
|
||||
style={{
|
||||
rotate: '180deg',
|
||||
}}
|
||||
/>
|
||||
</Link>
|
||||
<p className='title'>Éditer le profil</p>
|
||||
</div>
|
||||
|
||||
<form className='form'>
|
||||
<Input
|
||||
label="Nom d'utilisateur"
|
||||
type='text'
|
||||
name='username'
|
||||
defaultValue='Un Épicier'
|
||||
autoComplete='off'
|
||||
required
|
||||
/>
|
||||
<Input
|
||||
label='Mot de passe'
|
||||
type='password'
|
||||
name='password'
|
||||
defaultValue='********'
|
||||
autoComplete='off'
|
||||
required
|
||||
/>
|
||||
|
||||
<div className='buttonsContainer'>
|
||||
<button
|
||||
type='reset'
|
||||
className='resetButton'
|
||||
>
|
||||
Annuler
|
||||
</button>
|
||||
<button
|
||||
type='submit'
|
||||
className='submitButton'
|
||||
>
|
||||
Appliquer
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div className='separator' />
|
||||
|
||||
<button className='deleteButton'>Supprimer mon compte</button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Settings;
|
||||
@@ -0,0 +1,93 @@
|
||||
.settings {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
width: 100%;
|
||||
background-color: #d94253;
|
||||
|
||||
& > .header {
|
||||
display: grid;
|
||||
grid-template-columns: 25px 1fr;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
padding: 15px;
|
||||
color: #ffffff;
|
||||
box-shadow: 0 0 6px rgba(255, 255, 255, 0.2);
|
||||
|
||||
& > .backButton {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
& > .title {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
& > .form {
|
||||
display: grid;
|
||||
grid-template-rows: repeat(2, 1fr);
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
padding: 20px;
|
||||
padding-bottom: 0;
|
||||
|
||||
& > .buttonsContainer {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 20px;
|
||||
|
||||
& > .submitButton,
|
||||
& > .resetButton {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
padding: 10px;
|
||||
border: 1px solid #ffffff;
|
||||
border-radius: 5px;
|
||||
background-color: #ffffff;
|
||||
font-size: 1rem;
|
||||
color: #d94253;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
& > .resetButton {
|
||||
background-color: #d94253;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& > .separator {
|
||||
display: block;
|
||||
margin: 20px auto;
|
||||
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%
|
||||
);
|
||||
}
|
||||
|
||||
& > .deleteButton {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
margin: 0 20px;
|
||||
padding: 10px;
|
||||
border: 1px solid #d80135;
|
||||
border-radius: 5px;
|
||||
background-color: #d80135;
|
||||
font-size: 1rem;
|
||||
color: #ffffff;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
import { useState } from 'react';
|
||||
|
||||
export const useData = () => {
|
||||
const [settingsOpened, setSettingsOpened] = useState(false);
|
||||
|
||||
return {
|
||||
settingsOpened,
|
||||
setSettingsOpened,
|
||||
};
|
||||
};
|
||||
@@ -1,3 +1,5 @@
|
||||
'use client';
|
||||
|
||||
// ---------------------------------------------------------------------------------------------------------------------
|
||||
//! Imports
|
||||
// ---------------------------------------------------------------------------------------------------------------------
|
||||
@@ -9,11 +11,10 @@ import SlotCounter from 'react-slot-counter';
|
||||
|
||||
// ------------------------------------------------- Assets & Styles ---------------------------------------------------
|
||||
import SettingsIcon from '@/assets/SettingsIcon';
|
||||
import ArrowRightIcon from '@/assets/ArrowRightIcon';
|
||||
import './styles.scss';
|
||||
// ---------------------------------------------------------------------------------------------------------------------
|
||||
|
||||
const Account = () => {
|
||||
const Statistics = () => {
|
||||
return (
|
||||
<div className='accountContainer'>
|
||||
<div className='header'>
|
||||
@@ -31,28 +32,6 @@ const Account = () => {
|
||||
</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'}
|
||||
@@ -98,16 +77,8 @@ const Account = () => {
|
||||
<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;
|
||||
export default Statistics;
|
||||
@@ -1,4 +1,6 @@
|
||||
.accountContainer {
|
||||
flex-grow: 1;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
@@ -84,7 +86,7 @@
|
||||
align-items: stretch;
|
||||
gap: 2px;
|
||||
width: 100%;
|
||||
box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
|
||||
box-shadow: 0 0 6px rgba(255, 255, 255, 0.2);
|
||||
|
||||
& > .button {
|
||||
display: flex;
|
||||
+2
-1
@@ -1,5 +1,6 @@
|
||||
.mapContainer {
|
||||
position: relative;
|
||||
flex-grow: 1;
|
||||
|
||||
& > .dropLove {
|
||||
z-index: 1;
|
||||
@@ -16,7 +17,7 @@
|
||||
border-radius: 300px;
|
||||
background-color: #d94253;
|
||||
color: #ffffff;
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
|
||||
box-shadow: 0 2px 6px rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user