✨ Add a clear leaderboard button in leaderboard component

src/assets/trash.tsx

@@ -0,0 +1,35 @@
+const Trash = (props: any) => {
+	return (
+		<svg
+			xmlns='http://www.w3.org/2000/svg'
+			viewBox='0 0 512 512'
+			{...props}
+		>
+			<path
+				d='M112 112l20 320c.95 18.49 14.4 32 32 32h184c17.67 0 30.87-13.51 32-32l20-320'
+				fill='none'
+				stroke='currentColor'
+				strokeLinecap='round'
+				strokeLinejoin='round'
+				strokeWidth='32'
+			/>
+			<path
+				stroke='currentColor'
+				strokeLinecap='round'
+				strokeMiterlimit='10'
+				strokeWidth='32'
+				d='M80 112h352'
+			/>
+			<path
+				d='M192 112V72h0a23.93 23.93 0 0124-24h80a23.93 23.93 0 0124 24h0v40M256 176v224M184 176l8 224M328 176l-8 224'
+				fill='none'
+				stroke='currentColor'
+				strokeLinecap='round'
+				strokeLinejoin='round'
+				strokeWidth='32'
+			/>
+		</svg>
+	);
+};
+
+export default Trash;

src/components/Leaderboard/leaderboard.tsx

@@ -21,6 +21,7 @@ import CalendarIcon from '../../assets/calendar';
 import Replay from '../../assets/replay';
 import Settings from '../../assets/settings';
 import TimerIcon from '../../assets/timer';
+import Trash from '../../assets/trash';
 import './styles.scss';
 // ---------------------------------------------------------------------------------------------------------------------
 
@@ -90,6 +91,17 @@ const LeaderBoard = () => {
 					Paramètres
 				</button>
 
+				<button
+					className='controlButton clear'
+					onClick={() => {
+						setGameState((prev) => ({ ...prev, status: 'settings', endType: '', placedFlags: 0, bombs: 0, gameTime: '' }));
+						store.setItem('leaderboard', []);
+					}}
+				>
+					<Trash />
+					Supprimer
+				</button>
+
 				<button
 					className='controlButton replay'
 					onClick={() => setGameState((prev) => ({ ...prev, status: 'idle', endType: '', placedFlags: 0, bombs: 0, gameTime: '' }))}

src/components/Leaderboard/styles.scss

@@ -9,7 +9,7 @@
 	display: flex;
 	flex-direction: column;
 	width: 95svw;
-	max-width: 450px;
+	max-width: 500px;
 	border-radius: 5px;
 	background-color: #fff;
 	overflow: hidden;
@@ -73,8 +73,8 @@
 
 .controls {
 	display: grid;
-	grid-template-columns: repeat(2, 1fr);
-	gap: 100px;
+	grid-template-columns: repeat(3, 1fr);
+	gap: 10px;
 	width: 100%;
 
 	& > .controlButton {
@@ -83,7 +83,7 @@
 		justify-content: center;
 		align-items: center;
 		gap: 10px;
-		padding: 10px 20px;
+		padding: 10px;
 		border: none;
 		border-radius: 5px;
 		font-size: 16px;
@@ -97,6 +97,10 @@
 		}
 
 		&.home {
+			background-color: #f39440;
+		}
+
+		&.clear {
 			background-color: #ca5940;
 		}