feat: Add user streak display to GeneralSettings component

Author: medyo

src/features/settings/components/GeneralSettings/GeneralSettings.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react'
-import { FaGithub } from 'react-icons/fa'
+import { FaFire, FaGithub } from 'react-icons/fa'
 import { FcGoogle } from 'react-icons/fc'
+import { IoCheckmarkOutline } from 'react-icons/io5'
 import Toggle from 'react-toggle'
 import 'react-toggle/style.css'
 import { Button, ChipsSet, ConfirmModal } from 'src/components/Elements'
@@ -58,6 +59,32 @@ const UserInfo = ({ user }: UserInfoProps) => {
           </Button>
         </div>
       </div>
+
+      <div className="streaks">
+        <p className="title">
+          You're on{' '}
+          <span>
+            {' '}
+            <FaFire color="orange" size={18} /> <b>{user.streak || 1} days streak</b>
+          </span>
+        </p>
+        <div>
+          <ul className="streaksWeek">
+            {Array.from({ length: 5 }, (_, i) => {
+              const streak = user.streak || 1
+              if (i < streak) {
+                return (
+                  <li className="day checked">
+                    <IoCheckmarkOutline />
+                  </li>
+                )
+              } else {
+                return <li className="day"></li>
+              }
+            })}
+          </ul>
+        </div>
+      </div>
     </div>
   )
 }

src/features/settings/components/GeneralSettings/generalSettings.css

@@ -129,3 +129,54 @@ Select styles
   align-items: center;
   column-gap: 4px;
 }
+
+.streaks {
+  display: flex;
+  flex-direction: column;
+  row-gap: 16px;
+  align-self: flex-start;
+}
+.streaks .title {
+  margin: 0;
+  padding: 0;
+  font-size: 0.9em;
+}
+
+.streaks ul.streaksWeek::before {
+  content: '';
+  display: block;
+  width: 100%;
+  height: 1px;
+  background-color: var(--card-content-divider);
+  z-index: 1;
+  position: absolute;
+  margin-top: 9px;
+}
+.streaks ul.streaksWeek {
+  position: relative;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: row;
+  gap: 20px;
+  list-style-type: none;
+  overflow: hidden;
+}
+
+.streaks .day {
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  border-radius: 20px;
+  border: 1px solid var(--card-content-divider);
+  background-color: var(--card-content-divider);
+  z-index: 2;
+}
+
+.streaks .day.checked {
+  border: 2px solid #18bc2d;
+  background-color: #18bc2d;
+}