component switcher changes

components/ComponentSwitcher.module.css

@@ -17,6 +17,9 @@
   font-family: "Inconsolata", monospace;
   transition: .15s background-color, .15s border-color, .15s color, .15s fill;
   font-weight: 600;
+  cursor: pointer;
+  margin: auto;
+  text-align: center;
 }
 
 .btn:hover {
@@ -30,4 +33,12 @@
 .btnContainer {
   display: flex;
   justify-content: space-evenly;
+}
+
+.selectedBtn {
+  --button-color: #CA634D;
+  --border-color: #FFBC9F;
+
+  background-color: var(--button-color);
+  border: 3px solid var(--border-color);
 }

components/ComponentSwitcher.tsx

@@ -11,7 +11,7 @@ export function ComponentSwitcher({
   buttonList,
   graphList,
 }: ComponentSwitcherProps) {
-  const [selectedButton, setSelectedButton] = useState("1A");
+  const [selectedButton, setSelectedButton] = useState(buttonList[0]);
   const [currentGraph, setCurrentGraph] = useState(graphList[0]);
 
   const handleSwitch = (buttonName: string) => {
@@ -32,7 +32,10 @@ export function ComponentSwitcher({
           // we may also apply style if currently selected button === buttonName
           <button
             key={idx}
-            className={styles.btn}
+            className={`${styles.btn} ${
+              // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
+              selectedButton === buttonName && styles.selectedBtn
+            }`}
             onClick={() => handleSwitch(buttonName)}
           >
             {buttonName}

pages/samplePage.tsx

@@ -82,8 +82,71 @@ export default function SamplePage() {
               colorRange={[Color.primaryAccent, Color.secondaryAccentLight]}
               key={1}
             />,
+            <BarGraphHorizontal
+              className={styles.barGraphDemo}
+              data={mockCategoricalData}
+              width={defaultGraphWidth}
+              height={defaultGraphHeight}
+              margin={defaultHorizontalBarGraphMargin}
+              key={1}
+            />,
+            <LineGraph
+              data={mockLineData}
+              width={defaultGraphWidth}
+              height={417}
+              margin={{
+                top: 20,
+                bottom: 80,
+                left: 30,
+                right: 20,
+              }}
+              colorRange={[Color.primaryAccent, Color.secondaryAccentLight]}
+              key={1}
+            />,
+            <BarGraphHorizontal
+              className={styles.barGraphDemo}
+              data={mockCategoricalData}
+              width={defaultGraphWidth}
+              height={defaultGraphHeight}
+              margin={defaultHorizontalBarGraphMargin}
+              key={1}
+            />,
+            <LineGraph
+              data={mockLineData}
+              width={defaultGraphWidth}
+              height={417}
+              margin={{
+                top: 20,
+                bottom: 80,
+                left: 30,
+                right: 20,
+              }}
+              colorRange={[Color.primaryAccent, Color.secondaryAccentLight]}
+              key={1}
+            />,
+            <BarGraphHorizontal
+              className={styles.barGraphDemo}
+              data={mockCategoricalData}
+              width={defaultGraphWidth}
+              height={defaultGraphHeight}
+              margin={defaultHorizontalBarGraphMargin}
+              key={1}
+            />,
+            <LineGraph
+              data={mockLineData}
+              width={defaultGraphWidth}
+              height={417}
+              margin={{
+                top: 20,
+                bottom: 80,
+                left: 30,
+                right: 20,
+              }}
+              colorRange={[Color.primaryAccent, Color.secondaryAccentLight]}
+              key={1}
+            />,
           ]}
-          buttonList={["1A", "1B"]}
+          buttonList={["1A", "1B", "2A", "2B", "3A", "3B", "4A", "4B"]}
         />
       </ComponentWrapper>
       <ComponentWrapper