Debugger toolbar component

app/page.tsx

@@ -1,5 +1,11 @@
 import { HeroJumbotronComponent } from "features/common/components/hero-jumbotron/hero-jumbotron.component";
+import { DebuggerToolbar } from "features/debugger/components/toolbar/debugger-toolbar.component";
 
 export default function Page() {
-    return <HeroJumbotronComponent />
-}
+  return (
+    <>
+      <HeroJumbotronComponent />
+      <DebuggerToolbar />
+    </>
+  );
+}

package.json

@@ -37,6 +37,7 @@
         "react": "^19.2.0",
         "react-dom": "^19.2.0",
         "react-router-dom": "^6.2.1",
+        "react-select": "^5.10.2",
         "sass": "^1.97.2",
         "serverless-http": "^3.2.0",
         "sha1": "^1.1.1",

src/features/common/components/debugger-picker/debugger-picker.component.tsx

@@ -0,0 +1,78 @@
+"use client";
+import React from "react";
+import styles from "./debugger-picker.module.scss";
+import dynamic from "next/dynamic";
+
+interface PickerLabelProps {
+  label: string | null;
+}
+
+const Select = dynamic(() => import("react-select"), { ssr: false });
+
+const PickerLabel: React.FC<PickerLabelProps> = ({ label }) => {
+  return (
+    <div className={styles.picker__label}>
+      <span className={styles.picker__fullName}>{label}</span>
+    </div>
+  );
+};
+
+interface DebuggerPickerComponentProps {
+  label: string | null;
+  options;
+  isGrouped?: boolean;
+  placeholder: string | null;
+  minWidth: string | null;
+}
+
+export const DebuggerPickerComponent: React.FC<
+  DebuggerPickerComponentProps
+> = ({
+  label,
+  options,
+  placeholder,
+  minWidth,
+}) => {
+
+  return (
+    <div className={styles.picker} data-has-label={label !== null}>
+      {label && <PickerLabel label={label} />}
+      <Select
+        aria-label={"Debugger picker"}
+        className="react-select-container"
+        options={options}
+        defaultValue={options[0]}
+        classNamePrefix={"react-select"}
+        isSearchable={false}
+        placeholder={placeholder}
+        styles={{
+          control: (base) => ({
+            ...base,
+            minHeight: "1.75rem",
+            height: "1.75rem",
+            padding: "4px",
+            ...(minWidth ? { minWidth: minWidth } : {}),
+          }),
+
+          valueContainer: (base) => ({
+            ...base,
+            height: "1.75rem",
+            padding: "0 8px",
+          }),
+
+          input: (base) => ({
+            ...base,
+            margin: "0px",
+          }),
+          indicatorSeparator: () => ({
+            display: "none",
+          }),
+          indicatorsContainer: (base) => ({
+            ...base,
+            height: "1.75rem",
+          }),
+        }}
+      ></Select>
+    </div>
+  );
+};

src/features/common/components/debugger-picker/debugger-picker.module.scss

@@ -0,0 +1,61 @@
+@use "libs/theme/styles/variables" as *;
+@use "libs/theme/styles/mixins" as *;
+
+$picker-width-sm: 3.25rem;
+$picker-list-width-sm: 4.75rem;
+$picker-list-offset-sm: calc(($picker-list-width-sm - $picker-width-sm) / 2);
+
+$picker-width-md: 3.25rem;
+$picker-list-width-md: 7rem;
+$picker-list-offset-md: calc(($picker-list-width-md - $picker-width-md) / 2);
+
+$picker-width-lg: 5rem;
+$picker-list-width-lg: 7rem;
+$picker-list-offset-lg: calc(($picker-list-width-lg - $picker-width-lg) / 2);
+
+.picker {
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: transparent;
+  border: none;
+  color: var(--color_fg_bold);
+  cursor: pointer;
+  gap: 0.75rem;
+
+  @media #{$breakpoint-dimension-md} {
+    &[data-has-label="true"] {
+      width: 100%;
+    }
+  }
+}
+
+.picker__label {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  list-style-type: none;
+  margin: 0;
+  gap: 0.5rem;
+  font-size: 0.8125rem;
+  line-height: 1.3125rem;
+  letter-spacing: -0.05px;
+
+
+
+  height: 100%;
+
+  @media #{$breakpoint-dimension-sm} {
+    width: 100%;
+  }
+
+  & svg {
+    stroke: var(--color_fg_bold);
+  }
+}
+
+.picker__fullName {
+  display: flex;
+}

src/features/common/icons/configuration-icon.tsx

@@ -0,0 +1,30 @@
+const ConfigurationIcon = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="18"
+      height="18"
+      viewBox="0 0 18 18"
+      fill="none"
+    >
+      <path
+        d="M9 11.25C10.2426 11.25 11.25 10.2426 11.25 9C11.25 7.75736 10.2426 6.75 9 6.75C7.75736 6.75 6.75 7.75736 6.75 9C6.75 10.2426 7.75736 11.25 9 11.25Z"
+        stroke="#E5E5E5"
+        strokeWidth="1.5"
+        strokeMiterlimit="10"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M1.5 9.6591V8.3391C1.5 7.5591 2.1375 6.9141 2.925 6.9141C4.2825 6.9141 4.8375 5.9541 4.155 4.7766C3.765 4.1016 3.9975 3.2241 4.68 2.8341L5.9775 2.0916C6.57 1.7391 7.335 1.9491 7.6875 2.5416L7.77 2.6841C8.445 3.8616 9.555 3.8616 10.2375 2.6841L10.32 2.5416C10.6725 1.9491 11.4375 1.7391 12.03 2.0916L13.3275 2.8341C14.01 3.2241 14.2425 4.1016 13.8525 4.7766C13.17 5.9541 13.725 6.9141 15.0825 6.9141C15.8625 6.9141 16.5075 7.5516 16.5075 8.3391V9.6591C16.5075 10.4391 15.87 11.0841 15.0825 11.0841C13.725 11.0841 13.17 12.0441 13.8525 13.2216C14.2425 13.9041 14.01 14.7741 13.3275 15.1641L12.03 15.9066C11.4375 16.2591 10.6725 16.0491 10.32 15.4566L10.2375 15.3141C9.5625 14.1366 8.4525 14.1366 7.77 15.3141L7.6875 15.4566C7.335 16.0491 6.57 16.2591 5.9775 15.9066L4.68 15.1641C3.9975 14.7741 3.765 13.8966 4.155 13.2216C4.8375 12.0441 4.2825 11.0841 2.925 11.0841C2.1375 11.0841 1.5 10.4391 1.5 9.6591Z"
+        stroke="#E5E5E5"
+        strokeWidth="1.5"
+        strokeMiterlimit="10"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default ConfigurationIcon;

src/features/debugger/components/toolbar/debugger-toolbar.component.tsx

@@ -0,0 +1,29 @@
+"use client";
+import { DebuggerPickerComponent } from "features/common/components/debugger-picker/debugger-picker.component";
+import styles from "./debugger-toolbar.module.scss";
+import ConfigurationIcon from "features/common/icons/configuration-icon";
+
+export const DebuggerToolbar = () => {
+  return (
+    <div className={styles.container}>
+      <div className={styles.wrapper}>
+        <div className={styles.content}>
+          <p className={styles.title}>Debugger</p>
+          <div className={styles.container_options}>
+            <DebuggerPickerComponent
+              label="Mode"
+              options={[{ value: "OAuth2", label: "OpenID Connect + OAuth2" }]}
+              minWidth={"180px"}
+              placeholder=""
+            />
+            <div className={styles.separator_line} />
+            <div className={styles.button_container}>
+              <ConfigurationIcon />
+              <p>Configuration</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

src/features/debugger/components/toolbar/debugger-toolbar.module.scss

@@ -0,0 +1,82 @@
+@use "libs/theme/styles/variables" as *;
+@use "libs/theme/styles/mixins" as *;
+
+.container {
+  @include Container
+}
+
+.wrapper {
+  @include ExtendedGrid;
+}
+
+.content {
+  margin: 4rem 2rem 0px;
+  padding: 2rem;
+  border-top: 0.5px solid var(--color_border_light);
+  color: var(--color_fg_link);
+  justify-content: space-between;  
+  align-items: center;
+
+  @media #{$breakpoint-dimension-sm} {
+    display: flex;
+    flex-direction: row;
+  }
+
+}
+
+.title {
+  font-size: 14px;
+  font-style: normal;
+  line-height: 20px;
+  font-weight: 500;
+  letter-spacing: 1.5px;
+  text-transform: uppercase;
+  margin-bottom: 2rem;
+  @media #{$breakpoint-dimension-sm} {
+    margin-bottom: 0;
+  }
+}
+
+.container_options {
+  @media #{$breakpoint-dimension-sm} {
+    display: flex;
+    flex-direction: row;
+    gap: 32px;
+  }
+  p { 
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 20px; 
+      letter-spacing: 0.15px;
+   }
+}
+
+.separator_line {
+  border-left: 1px solid var(--color_border_light);
+  height: auto;
+  display: none;
+  @media #{$breakpoint-dimension-sm} {
+    display: block;
+  }
+}
+
+.button_container {
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  align-items: center;
+  cursor: pointer;
+  margin-top: 2rem;
+
+  @media #{$breakpoint-dimension-sm} {
+    margin-top: 0;
+  }
+
+  svg {
+    path {
+      stroke: var(--color_fg_link);
+    }
+  }
+}
+