natgitadm/ERitors-Scribe-Desktop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add components for Act management and integrate Electron setup

Browse Source
This commit is contained in:
natreex
2025-11-16 11:00:04 -05:00
parent e192b6dcc2
commit 8167948881
97 changed files with 25378 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

112
components/rightbar/AboutERitors.tsx Normal file
View 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>
);
}