92 lines
3.0 KiB
TypeScript
92 lines
3.0 KiB
TypeScript
'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>
|
|
)
|
|
}
|