Merge pull request #2 from nikkehtine-fm/feature-progressbars

Add progress bars

src/components/SummaryIcon.tsx

@@ -9,7 +9,6 @@ import icon_visual from "../assets/icon-visual.svg";
  * Another hilariously overengineered solution. Just how I like them.
  */
 export default function Icon(props: { source: string }): JSX.Element {
-    console.log(props.source);
     let icon: string;
     let paths: string[] = props.source.split("/");
     let target: string = paths[2].slice(

src/components/SummaryProgessbars.tsx

@@ -10,16 +10,29 @@ type ProgressbarProps = {
     i: number;
 };
 
-const Graph = styled.div<{ $color: string }>`
+const Graph = styled.div<{ $color: string; $value: number }>`
     display: flex;
+    position: relative;
     gap: 0.1rem;
     padding: 0.75rem 1rem;
     border-radius: 0.5rem;
     margin-block: 1rem;
-    background-color: ${(props) => changeAlpha(props.$color, 5)};
+    background-color: ${(props) => changeAlpha(props.$color, 3)};
 
+    &::before {
+        content: "";
+        background-color: ${(props) => changeAlpha(props.$color, 10)};
+        height: 100%;
+        width: ${(props) => props.$value}%;
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: 0;
+        border-radius: inherit;
+    }
     > div {
         display: flex;
+        z-index: 1;
     }
     .category {
         flex-grow: 1;
@@ -58,7 +71,7 @@ export default function Progressbar({
     let color: string = getBarColor(i);
 
     return (
-        <Graph $color={color}>
+        <Graph $color={color} $value={score}>
             <div className="category">
                 <SummaryIcon source={icon} />
                 <span>{category}</span>

src/index.css

@@ -1,6 +1,8 @@
 @import url("https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@500;700;800&display=swap");
 
-* {
+*,
+*::before,
+*::after {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
@@ -11,6 +13,7 @@
     line-height: 1.5;
     font-size: 18px;
     font-weight: 500;
+    -webkit-user-select: none;
     user-select: none;
 
     font-synthesis: none;