Add components for Act management and integrate Electron setup

components/form/SelectBox.tsx

@@ -0,0 +1,43 @@
+import React, {ChangeEvent} from "react";
+import {SelectBoxProps} from "@/shared/interface";
+
+export interface SelectBoxFormProps {
+    onChangeCallBack: (event: ChangeEvent<HTMLSelectElement>) => void,
+    data: SelectBoxProps[],
+    defaultValue: string | null | undefined,
+    placeholder?: string,
+    disabled?: boolean
+}
+
+export default function SelectBox(
+    {
+        onChangeCallBack,
+        data,
+        defaultValue,
+        placeholder,
+        disabled
+    }: SelectBoxFormProps) {
+    return (
+        <select
+            onChange={onChangeCallBack}
+            disabled={disabled}
+            key={defaultValue || 'placeholder'}
+            defaultValue={defaultValue || '0'}
+            className={`w-full text-text-primary bg-secondary/50 hover:bg-secondary px-4 py-2.5 rounded-xl
+                border border-secondary/50
+                focus:border-primary focus:ring-4 focus:ring-primary/20 focus:bg-secondary
+                hover:border-secondary
+                outline-none transition-all duration-200 cursor-pointer
+                ${disabled ? 'opacity-50 cursor-not-allowed' : ''}`}
+        >
+            {placeholder && <option value={'0'}>{placeholder}</option>}
+            {
+                data.map((item: SelectBoxProps) => (
+                    <option key={item.value} value={item.value} className="bg-tertiary text-text-primary">
+                        {item.label}
+                    </option>
+                ))
+            }
+        </select>
+    )
+}