Add components for Act management and integrate Electron setup
This commit is contained in:
natreex
213
components/rightbar/ComposerRightBar.tsx
Normal file
213
components/rightbar/ComposerRightBar.tsx
Normal file
@@ -0,0 +1,213 @@
|
||||
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
|
||||
import {faFeather, faGlobe, faInfoCircle, faMapMarkerAlt, faUsers} from "@fortawesome/free-solid-svg-icons";
|
||||
import React, {RefObject, useContext, useRef, useState} from "react";
|
||||
import {BookContext} from "@/context/BookContext";
|
||||
import {ChapterContext} from "@/context/ChapterContext";
|
||||
import {PanelComponent} from "@/lib/models/Editor";
|
||||
import PanelHeader from "@/components/PanelHeader";
|
||||
import AboutEditors from "@/components/rightbar/AboutERitors";
|
||||
import {faDiscord, faFacebook} from "@fortawesome/free-brands-svg-icons";
|
||||
import WorldSetting from "@/components/book/settings/world/WorldSetting";
|
||||
import LocationComponent from "@/components/book/settings/locations/LocationComponent";
|
||||
import CharacterComponent from "@/components/book/settings/characters/CharacterComponent";
|
||||
import QuillSense from "@/components/quillsense/QuillSenseComponent";
|
||||
import {useTranslations} from "next-intl";
|
||||
|
||||
export default function ComposerRightBar() {
|
||||
const {book} = useContext(BookContext);
|
||||
const {chapter} = useContext(ChapterContext);
|
||||
|
||||
const t = useTranslations();
|
||||
|
||||
const [panelHidden, setPanelHidden] = useState<boolean>(false);
|
||||
const [currentPanel, setCurrentPanel] = useState<PanelComponent | undefined>()
|
||||
|
||||
const [showAbout, setShowAbout] = useState<boolean>(false);
|
||||
|
||||
const worldRef: RefObject<{ handleSave: () => Promise<void> } | null> = useRef<{
|
||||
handleSave: () => Promise<void>
|
||||
}>(null);
|
||||
const locationRef: RefObject<{ handleSave: () => Promise<void> } | null> = useRef<{
|
||||
handleSave: () => Promise<void>
|
||||
}>(null);
|
||||
const characterRef: RefObject<{ handleSave: () => Promise<void> } | null> = useRef<{
|
||||
handleSave: () => Promise<void>
|
||||
}>(null);
|
||||
|
||||
async function handleSaveClick(): Promise<void> {
|
||||
switch (currentPanel?.id) {
|
||||
case 2:
|
||||
worldRef.current?.handleSave();
|
||||
break;
|
||||
case 3:
|
||||
locationRef.current?.handleSave();
|
||||
break;
|
||||
case 4:
|
||||
characterRef.current?.handleSave();
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
function togglePanel(component: PanelComponent): void {
|
||||
if (panelHidden) {
|
||||
if (currentPanel?.id === component.id) {
|
||||
setPanelHidden(!panelHidden);
|
||||
return;
|
||||
}
|
||||
} else {
|
||||
setPanelHidden(true);
|
||||
}
|
||||
}
|
||||
|
||||
const editorComponents: PanelComponent[] = [
|
||||
{
|
||||
id: 1,
|
||||
title: t("composerRightBar.editorComponents.quillSense.title"),
|
||||
description: t("composerRightBar.editorComponents.quillSense.description"),
|
||||
badge: t("composerRightBar.editorComponents.quillSense.badge"),
|
||||
icon: faFeather
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: t("composerRightBar.editorComponents.worlds.title"),
|
||||
description: t("composerRightBar.editorComponents.worlds.description"),
|
||||
badge: t("composerRightBar.editorComponents.worlds.badge"),
|
||||
icon: faGlobe
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: t("composerRightBar.editorComponents.locations.title"),
|
||||
description: t("composerRightBar.editorComponents.locations.description"),
|
||||
badge: t("composerRightBar.editorComponents.locations.badge"),
|
||||
icon: faMapMarkerAlt
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: t("composerRightBar.editorComponents.characters.title"),
|
||||
description: t("composerRightBar.editorComponents.characters.description"),
|
||||
badge: t("composerRightBar.editorComponents.characters.badge"),
|
||||
icon: faUsers
|
||||
},
|
||||
/*{
|
||||
id: 5,
|
||||
title: t("composerRightBar.editorComponents.items.title"),
|
||||
description: t("composerRightBar.editorComponents.items.description"),
|
||||
badge: t("composerRightBar.editorComponents.items.badge"),
|
||||
icon: faCube,
|
||||
}*/
|
||||
]
|
||||
|
||||
const homeComponents: PanelComponent[] = [
|
||||
{
|
||||
id: 1,
|
||||
title: t("composerRightBar.homeComponents.about.title"),
|
||||
description: t("composerRightBar.homeComponents.about.description"),
|
||||
badge: t("composerRightBar.homeComponents.about.badge"),
|
||||
icon: faInfoCircle,
|
||||
action: () => setShowAbout(true)
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: t("composerRightBar.homeComponents.facebook.title"),
|
||||
description: t("composerRightBar.homeComponents.facebook.description"),
|
||||
badge: t("composerRightBar.homeComponents.facebook.badge"),
|
||||
icon: faFacebook,
|
||||
action: () => window.open('https://www.facebook.com/profile.php?id=61562628720878', '_blank')
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: t("composerRightBar.homeComponents.discord.title"),
|
||||
description: t("composerRightBar.homeComponents.discord.description"),
|
||||
badge: t("composerRightBar.homeComponents.discord.badge"),
|
||||
icon: faDiscord,
|
||||
action: () => window.open('https://discord.gg/CHXRPvmaXm', '_blank')
|
||||
}
|
||||
]
|
||||
|
||||
function disabled(componentId: number): boolean {
|
||||
switch (componentId) {
|
||||
case 1:
|
||||
return book === null;
|
||||
default:
|
||||
return book === null;
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div id="right-panel-container" className="flex transition-all duration-300">
|
||||
{panelHidden && (
|
||||
<div id="right-panel"
|
||||
className="bg-tertiary/95 backdrop-blur-sm border-l border-secondary/50 min-w-[450px] max-w-[450px] h-full transition-all duration-300 overflow-hidden shadow-2xl">
|
||||
<div className="flex flex-col h-full">
|
||||
<PanelHeader title={currentPanel?.title ?? ''}
|
||||
description={currentPanel?.description ?? ''}
|
||||
badge={currentPanel?.badge ?? ''}
|
||||
icon={currentPanel?.icon}
|
||||
secondActionCallback={currentPanel?.id === 2 || currentPanel?.id === 3 || currentPanel?.id === 4 ? handleSaveClick : undefined}
|
||||
callBackAction={async () => setPanelHidden(!panelHidden)}
|
||||
/>
|
||||
<div className="flex-grow overflow-auto">
|
||||
{currentPanel?.id === 1 && (
|
||||
<QuillSense/>
|
||||
)}
|
||||
{currentPanel?.id === 2 && (
|
||||
<WorldSetting ref={worldRef}/>
|
||||
)}
|
||||
{currentPanel?.id === 3 && (
|
||||
<LocationComponent ref={locationRef}/>
|
||||
)}
|
||||
{currentPanel?.id === 4 && (
|
||||
<CharacterComponent ref={characterRef}/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="bg-tertiary border-l border-secondary/50 p-3 flex flex-col space-y-3 shadow-xl">
|
||||
{book ? editorComponents.map((component: PanelComponent) => (
|
||||
<button
|
||||
key={component.id}
|
||||
disabled={disabled(component.id)}
|
||||
onClick={() => {
|
||||
togglePanel(component);
|
||||
setCurrentPanel(component);
|
||||
}}
|
||||
className={`group relative p-3 rounded-xl transition-all duration-200 ${
|
||||
disabled(component.id)
|
||||
? 'bg-secondary/10 text-muted cursor-not-allowed opacity-40'
|
||||
: panelHidden && currentPanel?.id === component.id
|
||||
? 'bg-primary text-text-primary shadow-lg shadow-primary/30 scale-105'
|
||||
: 'bg-secondary/30 text-muted hover:text-text-primary hover:bg-secondary hover:shadow-md hover:scale-105'
|
||||
}`}
|
||||
title={component.title}
|
||||
>
|
||||
<FontAwesomeIcon icon={component.icon}
|
||||
className={'w-5 h-5 transition-transform duration-200 group-hover:scale-110'}/>
|
||||
{panelHidden && currentPanel?.id === component.id && (
|
||||
<div
|
||||
className="absolute -left-1 top-1/2 -translate-y-1/2 w-1 h-8 bg-primary rounded-r-full"></div>
|
||||
)}
|
||||
</button>
|
||||
)) : homeComponents.map((component: PanelComponent) => (
|
||||
<button
|
||||
key={component.id}
|
||||
onClick={component.action ?? (() => {
|
||||
})}
|
||||
className={`group relative p-3 rounded-xl transition-all duration-200 ${panelHidden && currentPanel?.id === component.id
|
||||
? 'bg-primary text-text-primary shadow-lg shadow-primary/30 scale-105'
|
||||
: 'bg-secondary/30 text-muted hover:text-text-primary hover:bg-secondary hover:shadow-md hover:scale-105'}`}
|
||||
title={component.title}
|
||||
>
|
||||
<FontAwesomeIcon icon={component.icon}
|
||||
className={'w-5 h-5 transition-transform duration-200 group-hover:scale-110'}/>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
{
|
||||
showAbout && <AboutEditors onClose={() => setShowAbout(false)}/>
|
||||
}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user