feat: add firmware beta release channel

* updated paths

* organized components

* connected logic for version control

* dropdown modules

* Custom header for modals

* connected custom components

* connected version control

Author: luckmer

src/components/Board/Board/Board.tsx

@@ -2,7 +2,7 @@ import { Component, Show } from 'solid-js'
 
 export interface IProps {
     onClick: () => void
-    board: string
+    label: string
     description?: string
     isActive?: boolean
 }
@@ -24,7 +24,7 @@ export const Board: Component<IProps> = (props) => {
                 props.onClick()
             }}>
             <div class="text-white text-[16px] leading-[20px] font-medium not-italic">
-                <p>{props.board}</p>
+                <p>{props.label}</p>
             </div>
             <Show when={props.description}>
                 <div class="pt-[2px] text-white text-[12px] leading-[20px] font-normal not-italic max-w-[220px]">

src/components/Board/SelectBoard/SelectBoard.tsx

@@ -1,9 +1,11 @@
-import { Component, For, Show } from 'solid-js'
-import { Board } from '../Board/Board'
+import { Component, Show } from 'solid-js'
 import { SelectButton } from '@components/Buttons/SelectButton'
+import Dropdown from '@components/Dropdown/Dropdown/Index'
+import DropdownList from '@components/Dropdown/DropdownList/Index'
+import { type IDropdownList } from '@interfaces/interfaces'
 
 export interface IProps {
-    boards: Array<{ board: string; description: string; debugMode?: boolean }>
+    boards: IDropdownList[]
     onSubmit: (board: string) => void
     selectedBoard: string
     firmwareVersion: string
@@ -13,45 +15,26 @@ export const SelectBoard: Component<IProps> = (props) => {
     return (
         <div class="relative w-[285px] p-[24px] rounded-[12px] border border-solid border-[#192736] bg-[#0D1B26]">
             <div class="flex flex-col gap-[10px]">
-                <div class="flex justify-between">
-                    <div class="text-left text-[14px] text-white font-medium leading-[14px] not-italic">
-                        <p>Select board</p>
-                    </div>
-                </div>
                 <div>
-                    <div class="dropdown w-full">
+                    <Dropdown>
                         <SelectButton
+                            header="Select board"
                             tabIndex={0}
                             type="button"
                             label={!props.selectedBoard ? 'Select board' : props.selectedBoard}
                         />
-                        <div
+                        <DropdownList
+                            isScrollbar
+                            styles="dropdown-content right-[-25px] mt-[38px] p-[12px] rounded-[12px] border border-solid border-[#192736] bg-[#0D1B26] !w-[285px]"
+                            fallbackLabel="Looking for boards!"
+                            activeElement={props.selectedBoard}
+                            data={props.boards}
                             tabIndex={0}
-                            class="dropdown-content right-[-25px]  mt-[58px]  p-[12px] rounded-[12px] border border-solid border-[#192736] bg-[#0D1B26] w-[285px]">
-                            <div class="overflow-y-scroll max-h-[250px] flex flex-col gap-[10px] w-full pr-[12px] scrollbar">
-                                <Show
-                                    when={props.boards.length}
-                                    fallback={
-                                        <div class="flex flex-row gap-[6px]">
-                                            <span class="loading loading-ring loading-md" />
-                                            <p>Looking for boards!</p>
-                                        </div>
-                                    }>
-                                    <For each={props.boards}>
-                                        {(data) => (
-                                            <Board
-                                                isActive={props.selectedBoard === data.board}
-                                                {...data}
-                                                onClick={() => {
-                                                    props.onSubmit(data.board)
-                                                }}
-                                            />
-                                        )}
-                                    </For>
-                                </Show>
-                            </div>
-                        </div>
-                    </div>
+                            onClick={(data) => {
+                                props.onSubmit(data.label)
+                            }}
+                        />
+                    </Dropdown>
                     <div class="pt-[10px] text-left text-[12px] text-white font-normal leading-[16px] not-italic">
                         <div class="flex gap-[4px] items-center">
                             <p>Firmware version:</p>

src/components/Buttons/SelectButton/index.tsx

@@ -5,22 +5,36 @@ export interface IProps {
     label: string
     onClick?: () => void
     tabIndex?: number
+    header: string
 }
 
 export const SelectButton: Component<IProps> = (props) => {
     return (
-        <button
-            tabIndex={props.tabIndex}
-            type={props.type}
-            class="pl-[12px] pr-[12px] h-[39px] bg-[#192736] w-full rounded-[6px] border-solid border-1 border-[#192736] focus:border-817DF7 focus-visible:border-[#9793FD] hover:border-[#817DF7] cursor-pointer"
-            onClick={(e) => {
-                e.preventDefault()
-                props.onClick?.()
-            }}>
-            <p class="text-left text-white text-[12px] font-normal leading-[20px] not-italic">
-                {props.label}
-            </p>
-        </button>
+        <div class="w-full">
+            <div class="flex flex-col gap-[14px]">
+                <div class=" w-full flex flex-col gap-[8px]">
+                    <div>
+                        <p class="text-left text-[14px] text-white font-normal leading-[20px] not-italic">
+                            {props.header}
+                        </p>
+                    </div>
+                    <div>
+                        <button
+                            tabIndex={props.tabIndex}
+                            type={props.type}
+                            class="pl-[12px] pr-[12px] h-[39px] bg-[#192736] w-full rounded-[6px] border-solid border-1 border-[#192736] focus:border-817DF7 focus-visible:border-[#9793FD] hover:border-[#817DF7] cursor-pointer"
+                            onClick={(e) => {
+                                e.preventDefault()
+                                props.onClick?.()
+                            }}>
+                            <p class="text-left text-white text-[12px] font-normal leading-[20px] not-italic">
+                                {props.label}
+                            </p>
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
     )
 }