feat: Implement Card Horizontal Bar component (#237)

* Initial commit for card horizontal bar.

* Renamed component to proper name.

* Made some progress on making the... well progress bar.

* Continuing work on the progress bar.

* Some code clean up. Currently having an issue where bar is not showing up when it should.

* Fixed issue if one language is selected. Issue persists with multiple languages.

* Fixing a mistake really quickly.

* Solved issue with bar not showing up.

* Added a color for languages currently not supported by the color scheme.

* Updated story to show not supported language option.

* Put language to color in it's own file so it'll be easy for anyone to add to list.

* Add functionality to sort array based on percentage where highest percentage is first.

* Doing a bit of clean up.

* Made some changes based on code review. Also changed implementation of how colors are displayed because of a bug that came up.

* Updated language to color file using color.json file. Trying to make a decision between which file to ultimately use.

* fix: adjust types for colors json coming in as strings

Co-authored-by: TED Vortex <ted.vortex@gmail.com>

components/molecules/CardHorizontalBarChart/card-horizontal-bar-chart.tsx

@@ -0,0 +1,57 @@
+import { useState } from "react";
+import Text from "components/atoms/Typography/text";
+import colors from "../../../lib/utils/color.json";
+
+interface AllSimpleColors {
+  [key: string]: {
+    color: string | null;
+    url: string;
+  };
+}
+
+const NOTSUPPORTED = "#64748B";
+
+interface LanguageObject {
+  languageName: string;
+  percentageUsed: number;
+}
+
+interface CardHorizontalBarChartProps {
+  languagesUsed: LanguageObject[];
+}
+
+const languageToColor: AllSimpleColors = colors as AllSimpleColors;
+
+const CardHorizontalBarChart = ({ languagesUsed }: CardHorizontalBarChartProps): JSX.Element => {
+  const sortedLangArray = languagesUsed.sort((a, b) => b.percentageUsed - a.percentageUsed);
+
+  const [descriptText, setDescriptText] = useState(sortedLangArray[0].languageName);
+
+  const handleChangeDescriptText = (descriptText: string) => {
+    setDescriptText(descriptText);
+  };
+
+  return (
+    <div className="flex flex-col gap-2">
+      {/* Progress Bar */}
+      <div className="flex items-center w-full rounded-full gap-1 overflow-hidden mt-7">
+        {sortedLangArray.map(({ languageName, percentageUsed }, index) =>
+          <div
+            key={index}
+            onMouseOver={() => handleChangeDescriptText(languageName)}
+            className="h-2 transition-all duration-500 ease-in-out"
+            style={{ width: `${percentageUsed}%`, backgroundColor: languageToColor[languageName].color ?? NOTSUPPORTED }}
+          />
+        )}
+      </div>
+      <div className="flex gap-2 items-center">
+        <div className={"w-2 h-2 rounded-full"} style={{ backgroundColor: languageToColor[descriptText].color ?? NOTSUPPORTED }}/>
+        <Text className="!text-xs !font-semibold !text-light-slate-11">
+          {descriptText}
+        </Text>
+      </div>
+    </div>
+  );
+};
+
+export default CardHorizontalBarChart;