Add components for Act management and integrate Electron setup
This commit is contained in:
natreex
112
components/rightbar/AboutERitors.tsx
Normal file
112
components/rightbar/AboutERitors.tsx
Normal file
@@ -0,0 +1,112 @@
|
||||
'use client';
|
||||
import React, {useEffect, useRef} from "react";
|
||||
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
|
||||
import {faCode, faCopyright, faInfo, faLaptopCode, faTag, faX} from "@fortawesome/free-solid-svg-icons";
|
||||
import {configs} from "@/lib/configs";
|
||||
import {useTranslations} from "next-intl";
|
||||
|
||||
interface AboutEditorsProps {
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
export default function AboutEditors({onClose}: AboutEditorsProps) {
|
||||
const t = useTranslations();
|
||||
const modalRef: React.RefObject<HTMLDivElement | null> = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect((): () => void => {
|
||||
document.body.style.overflow = 'hidden';
|
||||
return (): void => {
|
||||
document.body.style.overflow = 'auto';
|
||||
};
|
||||
}, []);
|
||||
|
||||
const appInfo = {
|
||||
name: configs.appName,
|
||||
version: configs.appVersion,
|
||||
copyright: t("aboutEditors.copyright"),
|
||||
description: t("aboutEditors.description"),
|
||||
developers: [t("aboutEditors.teamMember")],
|
||||
technologies: [
|
||||
"TypeScript", "NextJS", "NodeJS", "Fastify", "TailwindCSS", "TipTap"
|
||||
]
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 flex items-center justify-center bg-overlay z-50 backdrop-blur-sm">
|
||||
<div ref={modalRef}
|
||||
className="bg-tertiary/90 backdrop-blur-sm text-text-primary rounded-2xl border border-secondary/50 shadow-2xl md:w-3/4 xl:w-1/4 lg:w-2/4 sm:w-11/12 max-h-[85vh] flex flex-col">
|
||||
<div className="flex justify-between items-center bg-primary px-5 py-4 rounded-t-2xl shadow-md">
|
||||
<h2 className="font-['ADLaM_Display'] text-xl text-text-primary">
|
||||
{t("aboutEditors.title")}
|
||||
</h2>
|
||||
<button
|
||||
className="text-text-primary hover:text-text-primary p-2 rounded-xl hover:bg-text-primary/10 transition-all duration-200 hover:scale-110"
|
||||
onClick={onClose}>
|
||||
<FontAwesomeIcon icon={faX} className={'w-5 h-5'}/>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="p-5 overflow-y-auto flex-grow custom-scrollbar">
|
||||
<div className="flex flex-col items-center mb-6">
|
||||
<h3 className="text-2xl font-['ADLaM_Display'] text-primary">{appInfo.name}</h3>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="bg-secondary/20 rounded-xl p-4 border border-secondary/30 shadow-sm">
|
||||
<div className="flex items-center mb-2">
|
||||
<FontAwesomeIcon icon={faTag} className="text-primary mr-2 w-5 h-5"/>
|
||||
<h4 className="text-lg font-semibold text-text-primary">{t("aboutEditors.version")}</h4>
|
||||
</div>
|
||||
<p className="text-muted ml-7">{appInfo.version}</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-secondary/20 rounded-xl p-4 border border-secondary/30 shadow-sm">
|
||||
<div className="flex items-center mb-2">
|
||||
<FontAwesomeIcon icon={faCopyright} className="text-primary mr-2 w-5 h-5"/>
|
||||
<h4 className="text-lg font-semibold text-text-primary">{t("aboutEditors.copyrightLabel")}</h4>
|
||||
</div>
|
||||
<p className="text-muted ml-7">{appInfo.copyright}</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-secondary/20 rounded-xl p-4 border border-secondary/30 shadow-sm">
|
||||
<div className="flex items-center mb-2">
|
||||
<FontAwesomeIcon icon={faInfo} className="text-primary mr-2 w-5 h-5"/>
|
||||
<h4 className="text-lg font-semibold text-text-primary">{t("aboutEditors.descriptionLabel")}</h4>
|
||||
</div>
|
||||
<p className="text-muted ml-7 leading-relaxed">{appInfo.description}</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-secondary/20 rounded-xl p-4 border border-secondary/30 shadow-sm">
|
||||
<div className="flex items-center mb-2">
|
||||
<FontAwesomeIcon icon={faLaptopCode} className="text-primary mr-2 w-5 h-5"/>
|
||||
<h4 className="text-lg font-semibold text-text-primary">{t("aboutEditors.teamLabel")}</h4>
|
||||
</div>
|
||||
<ul className="text-muted ml-7">
|
||||
{appInfo.developers.map((dev: string, index: number) => (
|
||||
<li key={index}>{dev}</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="bg-secondary/20 rounded-xl p-4 border border-secondary/30 shadow-sm">
|
||||
<div className="flex items-center mb-2">
|
||||
<FontAwesomeIcon icon={faCode} className="text-primary mr-2 w-5 h-5"/>
|
||||
<h4 className="text-lg font-semibold text-text-primary">{t("aboutEditors.techLabel")}</h4>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-2 ml-7">
|
||||
{appInfo.technologies.map((tech, index) => (
|
||||
<span
|
||||
key={index}
|
||||
className="bg-primary/20 text-primary px-2.5 py-1 rounded-lg text-sm font-medium border border-primary/30"
|
||||
>
|
||||
{tech}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
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