Add components for Act management and integrate Electron setup

components/book/settings/BookSettingSidebar.tsx

@@ -0,0 +1,91 @@
+'use client'
+import Link from "next/link";
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import {faBook, faGlobe, faListAlt, faMapMarkedAlt, faPencilAlt, faUser} from "@fortawesome/free-solid-svg-icons";
+import React, {Dispatch, SetStateAction} from "react";
+import {IconDefinition} from "@fortawesome/fontawesome-svg-core";
+import {useTranslations} from "next-intl";
+
+interface BookSettingOption {
+    id: string;
+    name: string;
+    icon: IconDefinition;
+}
+
+export default function BookSettingSidebar(
+    {
+        selectedSetting,
+        setSelectedSetting
+    }: {
+        selectedSetting: string,
+        setSelectedSetting: Dispatch<SetStateAction<string>>
+    }) {
+    const t = useTranslations();
+    
+    const settings: BookSettingOption[] = [
+        {
+            id: 'basic-information',
+            name: 'bookSetting.basicInformation',
+            icon: faPencilAlt
+        },
+        {
+            id: 'guide-line',
+            name: 'bookSetting.guideLine',
+            icon: faListAlt
+        },
+        {
+            id: 'story',
+            name: 'bookSetting.story',
+            icon: faBook
+        },
+        {
+            id: 'world',
+            name: 'bookSetting.world',
+            icon: faGlobe
+        },
+        {
+            id: 'locations',
+            name: 'bookSetting.locations',
+            icon: faMapMarkedAlt
+        },
+        {
+            id: 'characters',
+            name: 'bookSetting.characters',
+            icon: faUser
+        },
+        // {
+        //     id: 'objects',
+        //     name: t('bookSetting.objects'),
+        //     icon: faLocationArrow
+        // },
+        // {
+        //     id: 'goals',
+        //     name: t('bookSetting.goals'),
+        //     icon: faCogs
+        // },
+    ]
+
+    return (
+        <div className="py-6 px-3">
+            <nav className="space-y-1">
+                {
+                    settings.map((setting: BookSettingOption) => (
+                        <Link
+                            key={setting.id}
+                            href={''}
+                            onClick={(): void => setSelectedSetting(setting.id)}
+                            className={`flex items-center text-base rounded-xl transition-all duration-200 ${
+                                selectedSetting === setting.id
+                                    ? 'bg-primary/20 text-text-primary border-l-4 border-primary font-semibold shadow-md scale-105'
+                                    : 'text-text-secondary hover:bg-secondary/50 hover:text-text-primary hover:scale-102'
+                            } p-3 mb-1`}>
+                            <FontAwesomeIcon icon={setting.icon}
+                                             className={`mr-3 ${selectedSetting === setting.id ? 'text-primary w-5 h-5' : 'text-text-secondary w-5 h-5'}`}/>
+                            {t(setting.name)}
+                        </Link>
+                    ))
+                }
+            </nav>
+        </div>
+    )
+}