Remove unused components and models for improved maintainability
- Deleted redundant components (`AddActionButton`, `AlertBox`, `AlertStack`, `BackButton`, `CancelButton`, and `CollapsableArea`) and related files. - Removed unused models (`Book`, `BookSerie`, `BookTables`, `Character`, and `Chapter`) to reduce codebase clutter. - Updated project structure and references to reflect these removals.
This commit is contained in:
natreex
@@ -1,9 +1,11 @@
|
||||
'use client';
|
||||
import {useEffect, useRef} from "react";
|
||||
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
|
||||
import {faCode, faCopyright, faInfo, faLaptopCode, faTag, faX} from "@fortawesome/free-solid-svg-icons";
|
||||
import React from "react";
|
||||
import {Code2, Copyright, Info, Laptop, Tag} from 'lucide-react';
|
||||
import {configs} from "@/lib/configs";
|
||||
import {useTranslations} from "next-intl";
|
||||
import {useTranslations} from '@/lib/i18n';
|
||||
import Modal from "@/components/ui/Modal";
|
||||
import DetailField from "@/components/ui/DetailField";
|
||||
import Badge from "@/components/ui/Badge";
|
||||
|
||||
interface AboutEditorsProps {
|
||||
onClose: () => void;
|
||||
@@ -11,15 +13,7 @@ interface AboutEditorsProps {
|
||||
|
||||
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,
|
||||
@@ -30,83 +24,43 @@ export default function AboutEditors({onClose}: AboutEditorsProps) {
|
||||
"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>
|
||||
return (
|
||||
<Modal icon={Info} title={t("aboutEditors.title")} onClose={onClose} size="sm">
|
||||
<div className="flex flex-col items-center mb-2">
|
||||
<h3 className="text-2xl font-['ADLaM_Display'] text-primary">{appInfo.name}</h3>
|
||||
</div>
|
||||
|
||||
<DetailField icon={Tag} label={t("aboutEditors.version")} value={appInfo.version}
|
||||
preserveWhitespace={false}/>
|
||||
<DetailField icon={Copyright} label={t("aboutEditors.copyrightLabel")} value={appInfo.copyright}
|
||||
preserveWhitespace={false}/>
|
||||
<DetailField icon={Info} label={t("aboutEditors.descriptionLabel")} value={appInfo.description}
|
||||
preserveWhitespace={false}/>
|
||||
|
||||
<div className="p-5 bg-secondary rounded-xl">
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
<Laptop className="w-4 h-4 text-primary" strokeWidth={1.75}/>
|
||||
<h3 className="text-text-primary font-semibold">{t("aboutEditors.teamLabel")}</h3>
|
||||
</div>
|
||||
<ul className="text-text-primary">
|
||||
{appInfo.developers.map((dev: string, index: number) => (
|
||||
<li key={index}>{dev}</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="p-5 bg-secondary rounded-xl">
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
<Code2 className="w-4 h-4 text-primary" strokeWidth={1.75}/>
|
||||
<h3 className="text-text-primary font-semibold">{t("aboutEditors.techLabel")}</h3>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{appInfo.technologies.map((tech: string, index: number) => (
|
||||
<Badge key={index} variant="primary" size="md">{tech}</Badge>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user