Move streakblock to separate component

tristanhollman · Feb 3, 2024 · 5ac2c5c · 5ac2c5c
1 parent 067daaa
commit 5ac2c5c
Show file tree

Hide file tree

Showing 4 changed files with 111 additions and 108 deletions.
diff --git a/src/components/StreakView/User/StreakBlock/StreakBlock.less b/src/components/StreakView/User/StreakBlock/StreakBlock.less
@@ -0,0 +1,52 @@
+.streak-block {
+  position: relative;
+  width: 200px;
+  color: rgb(255, 255, 255);
+
+  .container {
+    border-radius: 16px;
+    display: flex;
+    overflow: hidden;
+    padding: 10px 5px;
+
+    background-color: rgb(255, 200, 0);
+    background-image: url("https://d35aaqx5ub95lt.cloudfront.net/images/profile/92bd1526f88a4bea08ff2d5ad9783311.svg");
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    border-color: rgb(255, 200, 0);
+    border-style: solid solid none;
+
+    .icon {
+      border-style: none;
+    }
+
+    .star-position-a {
+      position: absolute;
+      bottom: 8px;
+      height: 21px;
+      left: 18px;
+      width: 21px;
+    }
+    .star-position-b {
+      position: absolute;
+      height: 27px;
+      right: 12px;
+      top: 12px;
+      width: 27px;
+    }
+
+    .flame-position {
+      align-self: start;
+      margin-left: 10px;
+      width: 21px;
+      height: 40px;
+      width: 40px;
+    }
+
+    .streak-number-wrapper {
+      align-self: center;
+      flex: 1 0 auto;
+      text-align: left;
+    }
+  }
+}
diff --git a/src/components/StreakView/User/StreakBlock/StreakBlock.tsx b/src/components/StreakView/User/StreakBlock/StreakBlock.tsx
@@ -0,0 +1,57 @@
+import "./StreakBlock.less";
+
+type StreakBlockProps = {
+  days: number;
+};
+export const StreakBlock = (props: StreakBlockProps) => {
+  const isActive = props.days > 0;
+
+  return (
+    <div className="streak-block">
+      <div className="container">
+        {isActive && (
+          <>
+            <Star positionClass="star-position-a" />
+            <Star positionClass="star-position-b" />
+          </>
+        )}
+        {isActive ? (
+          <Flame positionClass="flame-position" />
+        ) : (
+          <DisabledFlame positionClass="flame-position" />
+        )}
+        <div className="streak-number-wrapper">
+          <h1>{props.days}</h1>
+          <span>Day streak</span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const Star = (props: { positionClass: string }) => {
+  return (
+    <img
+      className={`icon ${props.positionClass}`}
+      src="https://d35aaqx5ub95lt.cloudfront.net/images/profile/f68d647fdc1536870945a5c84f3b3b82.svg"
+    />
+  );
+};
+
+const Flame = (props: { positionClass: string }) => {
+  return (
+    <img
+      className={`icon ${props.positionClass}`}
+      src="https://d35aaqx5ub95lt.cloudfront.net/images/profile/8a6dca76019d059a81c4c7c1145aa7a4.svg"
+    />
+  );
+};
+
+const DisabledFlame = (props: { positionClass: string }) => {
+  return (
+    <img
+      className={`icon ${props.positionClass}`}
+      src="https://d35aaqx5ub95lt.cloudfront.net/images/icons/ba95e6081679d9d7e8c132da5cfce1ec.svg"
+    />
+  );
+};
diff --git a/src/components/StreakView/User/User.less b/src/components/StreakView/User/User.less
@@ -10,56 +10,3 @@
     border-radius: 16px;
   }
 }
-
-.streak-block {
-  position: relative;
-  width: 200px;
-  color: rgb(255, 255, 255);
-
-  .container {
-    border-radius: 16px;
-    display: flex;
-    overflow: hidden;
-    padding: 10px 5px;
-
-    background-color: rgb(255, 200, 0);
-    background-image: url("https://d35aaqx5ub95lt.cloudfront.net/images/profile/92bd1526f88a4bea08ff2d5ad9783311.svg");
-    background-repeat: no-repeat;
-    background-size: 100% 100%;
-    border-color: rgb(255, 200, 0);
-    border-style: solid solid none;
-
-    .icon {
-      border-style: none;
-    }
-
-    .star-position-a {
-      position: absolute;
-      bottom: 8px;
-      height: 21px;
-      left: 18px;
-      width: 21px;
-    }
-    .star-position-b {
-      position: absolute;
-      height: 27px;
-      right: 12px;
-      top: 12px;
-      width: 27px;
-    }
-
-    .flame-position {
-      align-self: start;
-      margin-left: 10px;
-      width: 21px;
-      height: 40px;
-      width: 40px;
-    }
-
-    .streak-number-wrapper {
-      align-self: center;
-      flex: 1 0 auto;
-      text-align: left;
-    }
-  }
-}
diff --git a/src/components/StreakView/User/User.tsx b/src/components/StreakView/User/User.tsx
@@ -1,6 +1,7 @@
 import { useUserData } from "../../../hooks/useUserData";
 import { proxyify } from "../../../utilities";
 import { FireBorder } from "./FireBorder/FireBorder";
+import { StreakBlock } from "./StreakBlock/StreakBlock";
 import "./User.less";
 
 type UserProps = {
@@ -27,62 +28,8 @@ export const User = (props: UserProps) => {
           alt={user.name}
           src={proxyify(user.pictureUrl)}
         />
-        <StreakBlock streak={user.streak.days} />
+        <StreakBlock days={user.streak.days} />
       </div>
     </FireBorder>
   );
 };
-
-type StreakBlockProps = {
-  streak: number;
-};
-const StreakBlock = (props: StreakBlockProps) => {
-  return (
-    <div className="streak-block">
-      <div className="container">
-        {props.streak > 0 && (
-          <>
-            <Star positionClass="star-position-a" />
-            <Star positionClass="star-position-b" />
-          </>
-        )}
-        {props.streak > 0 ? (
-          <Flame positionClass="flame-position" />
-        ) : (
-          <DisabledFlame positionClass="flame-position" />
-        )}
-        <div className="streak-number-wrapper">
-          <h1>{props.streak}</h1>
-          <span>Day streak</span>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-const Star = (props: { positionClass: string }) => {
-  return (
-    <img
-      className={`icon ${props.positionClass}`}
-      src="https://d35aaqx5ub95lt.cloudfront.net/images/profile/f68d647fdc1536870945a5c84f3b3b82.svg"
-    />
-  );
-};
-
-const Flame = (props: { positionClass: string }) => {
-  return (
-    <img
-      className={`icon ${props.positionClass}`}
-      src="https://d35aaqx5ub95lt.cloudfront.net/images/profile/8a6dca76019d059a81c4c7c1145aa7a4.svg"
-    />
-  );
-};
-
-const DisabledFlame = (props: { positionClass: string }) => {
-  return (
-    <img
-      className={`icon ${props.positionClass}`}
-      src="https://d35aaqx5ub95lt.cloudfront.net/images/icons/ba95e6081679d9d7e8c132da5cfce1ec.svg"
-    />
-  );
-};