Add components for Act management and integrate Electron setup

2025-11-16 11:00:04 -05:00
parent e192b6dcc2
commit 8167948881
97 changed files with 25378 additions and 3 deletions
--- a/components/form/RadioBox.tsx
+++ b/components/form/RadioBox.tsx
@@ -0,0 +1,62 @@
+import {storyStates} from "@/lib/models/Story";
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import {faBookOpen, faKeyboard, faMagicWandSparkles, faPalette, faPenNib} from "@fortawesome/free-solid-svg-icons";
+import React, {Dispatch, SetStateAction} from "react";
+
+export interface RadioBoxValue {
+    label: string;
+    value: number;
+}
+
+interface RadioBoxProps {
+    selected: number;
+    setSelected: Dispatch<SetStateAction<number>>;
+    name: string;
+}
+
+export default function RadioBox(
+    {
+        selected,
+        setSelected,
+        name
+    }: RadioBoxProps) {
+    return (
+        <div className="flex flex-wrap gap-2">
+            {storyStates.map((option: RadioBoxValue) => (
+                <div key={option.value} className="flex items-center">
+                    <input
+                        type="radio"
+                        id={option.label}
+                        name={name}
+                        value={option.value}
+                        checked={selected === option.value}
+                        onChange={() => setSelected(option.value)}
+                        className="hidden"
+                    />
+                    <label
+                        htmlFor={option.label}
+                        className={`px-3 lg:px-4 py-2 lg:py-2.5 text-xs lg:text-sm font-medium rounded-xl cursor-pointer transition-all duration-200 flex items-center gap-2 ${
+                            selected === option.value
+                                ? 'bg-primary text-text-primary shadow-lg shadow-primary/30 scale-105 border border-primary-dark'
+                                : 'bg-secondary/50 text-muted hover:bg-secondary hover:text-text-primary hover:scale-105 border border-secondary/50 hover:border-secondary'
+                        }`}
+                    >
+                        <FontAwesomeIcon
+                            icon={
+                                [
+                                    faPenNib,
+                                    faKeyboard,
+                                    faPalette,
+                                    faBookOpen,
+                                    faMagicWandSparkles
+                                ][option.value]
+                            }
+                            className={selected === option.value ? "text-text-primary w-5 h-5" : "text-muted w-5 h-5"}
+                        />
+                        {option.label}
+                    </label>
+                </div>
+            ))}
+        </div>
+    )
+}