Replaced old UI translation naming scheme
This commit is contained in:
DrMint
parent
4c7d7231e3
commit
9b42a4f59f
|
|
@ -88,7 +88,7 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {
|
|||
|
||||
const metaDescription = props.description
|
||||
? props.description
|
||||
: "Accord's Library aims at gathering and archiving all of Yoko Taro’s work. Yoko Taro is a Japanese video game director and scenario writer.";
|
||||
: props.langui.default_description;
|
||||
|
||||
return (
|
||||
<div className={appLayout.darkMode ? "set-theme-dark" : "set-theme-light"}>
|
||||
|
|
|
|||
|
|
@ -55,7 +55,7 @@ export default function ThumbnailHeader(
|
|||
<div className="grid grid-flow-col gap-8">
|
||||
{content.type ? (
|
||||
<div className="grid place-items-center place-content-start gap-2">
|
||||
<h3 className="text-xl">{langui.global_type}</h3>
|
||||
<h3 className="text-xl">{langui.type}</h3>
|
||||
<Button>
|
||||
{content.type.data.attributes.titles.length > 0
|
||||
? content.type.data.attributes.titles[0].title
|
||||
|
|
@ -68,7 +68,7 @@ export default function ThumbnailHeader(
|
|||
|
||||
{content.categories.data.length > 0 ? (
|
||||
<div className="grid place-items-center place-content-start gap-2">
|
||||
<h3 className="text-xl">{langui.global_categories}</h3>
|
||||
<h3 className="text-xl">{langui.categories}</h3>
|
||||
{content.categories.data.map((category) => (
|
||||
<Button key={category.id}>{category.attributes.name}</Button>
|
||||
))}
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ export default function ReturnButton(props: ReturnButtonProps): JSX.Element {
|
|||
|
||||
return (
|
||||
<Button onClick={() => appLayout.setSubPanelOpen(false)} href={props.href}>
|
||||
❮ {props.langui.global_return_label} {props.title}
|
||||
❮ {props.langui.return_to} {props.title}
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
import Link from "next/link";
|
||||
import NavOption from "components/PanelComponents/NavOption";
|
||||
import SVG from "components/SVG";
|
||||
import { useRouter } from "next/router";
|
||||
import Button from "components/Button";
|
||||
import HorizontalLine from "components/HorizontalLine";
|
||||
|
|
@ -84,8 +83,8 @@ export default function MainPanel(props: MainPanelProps): JSX.Element {
|
|||
<NavOption
|
||||
url="/library"
|
||||
icon="library_books"
|
||||
title={langui.main_library}
|
||||
subtitle={langui.main_library_description}
|
||||
title={langui.library}
|
||||
subtitle={langui.library_short_description}
|
||||
tooltipId="MainPanelTooltip"
|
||||
reduced={appLayout.mainPanelReduced && isDesktop}
|
||||
onClick={() => appLayout.setMainPanelOpen(false)}
|
||||
|
|
@ -94,8 +93,8 @@ export default function MainPanel(props: MainPanelProps): JSX.Element {
|
|||
<NavOption
|
||||
url="/contents"
|
||||
icon="workspaces"
|
||||
title="Contents"
|
||||
subtitle="Explore all content and filter by type or category"
|
||||
title={langui.contents}
|
||||
subtitle={langui.contents_short_description}
|
||||
tooltipId="MainPanelTooltip"
|
||||
reduced={appLayout.mainPanelReduced && isDesktop}
|
||||
onClick={() => appLayout.setMainPanelOpen(false)}
|
||||
|
|
@ -104,8 +103,8 @@ export default function MainPanel(props: MainPanelProps): JSX.Element {
|
|||
<NavOption
|
||||
url="/wiki"
|
||||
icon="travel_explore"
|
||||
title={langui.main_wiki}
|
||||
subtitle={langui.main_wiki_description}
|
||||
title={langui.wiki}
|
||||
subtitle={langui.wiki_short_description}
|
||||
tooltipId="MainPanelTooltip"
|
||||
reduced={appLayout.mainPanelReduced && isDesktop}
|
||||
onClick={() => appLayout.setMainPanelOpen(false)}
|
||||
|
|
@ -114,8 +113,8 @@ export default function MainPanel(props: MainPanelProps): JSX.Element {
|
|||
<NavOption
|
||||
url="/chronicles"
|
||||
icon="watch_later"
|
||||
title={langui.main_chronicles}
|
||||
subtitle={langui.main_chronicles_description}
|
||||
title={langui.chronicles}
|
||||
subtitle={langui.chronicles_short_description}
|
||||
tooltipId="MainPanelTooltip"
|
||||
reduced={appLayout.mainPanelReduced && isDesktop}
|
||||
onClick={() => appLayout.setMainPanelOpen(false)}
|
||||
|
|
@ -126,7 +125,7 @@ export default function MainPanel(props: MainPanelProps): JSX.Element {
|
|||
<NavOption
|
||||
url="/news"
|
||||
icon="feed"
|
||||
title={langui.main_news}
|
||||
title={langui.news}
|
||||
tooltipId="MainPanelTooltip"
|
||||
reduced={appLayout.mainPanelReduced && isDesktop}
|
||||
onClick={() => appLayout.setMainPanelOpen(false)}
|
||||
|
|
@ -135,7 +134,7 @@ export default function MainPanel(props: MainPanelProps): JSX.Element {
|
|||
<NavOption
|
||||
url="/merch"
|
||||
icon="store"
|
||||
title={langui.main_merch}
|
||||
title={langui.merch}
|
||||
tooltipId="MainPanelTooltip"
|
||||
reduced={appLayout.mainPanelReduced && isDesktop}
|
||||
onClick={() => appLayout.setMainPanelOpen(false)}
|
||||
|
|
@ -144,7 +143,7 @@ export default function MainPanel(props: MainPanelProps): JSX.Element {
|
|||
<NavOption
|
||||
url="/gallery"
|
||||
icon="collections"
|
||||
title={langui.main_gallery}
|
||||
title={langui.gallery}
|
||||
tooltipId="MainPanelTooltip"
|
||||
reduced={appLayout.mainPanelReduced && isDesktop}
|
||||
onClick={() => appLayout.setMainPanelOpen(false)}
|
||||
|
|
@ -153,7 +152,7 @@ export default function MainPanel(props: MainPanelProps): JSX.Element {
|
|||
<NavOption
|
||||
url="/archives"
|
||||
icon="inventory"
|
||||
title={langui.main_archives}
|
||||
title={langui.archives}
|
||||
tooltipId="MainPanelTooltip"
|
||||
reduced={appLayout.mainPanelReduced && isDesktop}
|
||||
onClick={() => appLayout.setMainPanelOpen(false)}
|
||||
|
|
@ -162,7 +161,7 @@ export default function MainPanel(props: MainPanelProps): JSX.Element {
|
|||
<NavOption
|
||||
url="/about-us"
|
||||
icon="info"
|
||||
title={langui.main_about_us}
|
||||
title={langui.about_us}
|
||||
tooltipId="MainPanelTooltip"
|
||||
reduced={appLayout.mainPanelReduced && isDesktop}
|
||||
onClick={() => appLayout.setMainPanelOpen(false)}
|
||||
|
|
@ -176,8 +175,8 @@ export default function MainPanel(props: MainPanelProps): JSX.Element {
|
|||
}`}
|
||||
>
|
||||
<p>
|
||||
{langui.main_licensing ? (
|
||||
<Markdown>{langui.main_licensing}</Markdown>
|
||||
{langui.licensing_notice ? (
|
||||
<Markdown>{langui.licensing_notice}</Markdown>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
|
|
@ -194,8 +193,8 @@ export default function MainPanel(props: MainPanelProps): JSX.Element {
|
|||
</div>
|
||||
</a>
|
||||
<p>
|
||||
{langui.main_copyright ? (
|
||||
<Markdown>{langui.main_copyright}</Markdown>
|
||||
{langui.copyright_notice ? (
|
||||
<Markdown>{langui.copyright_notice}</Markdown>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -3,18 +3,13 @@ import { Dispatch, SetStateAction, useState } from "react";
|
|||
export type SelectProps = {
|
||||
setState: Dispatch<SetStateAction<number>>;
|
||||
state: number;
|
||||
options: SelectOption[];
|
||||
options: string[];
|
||||
selected?: number;
|
||||
allowEmpty?: boolean;
|
||||
className?: string;
|
||||
onChange?: Function;
|
||||
};
|
||||
|
||||
export type SelectOption = {
|
||||
name: string;
|
||||
label: string;
|
||||
};
|
||||
|
||||
export default function Select(props: SelectProps): JSX.Element {
|
||||
const [opened, setOpened] = useState(false);
|
||||
|
||||
|
|
@ -30,7 +25,7 @@ export default function Select(props: SelectProps): JSX.Element {
|
|||
}`}
|
||||
>
|
||||
<p onClick={() => setOpened(!opened)} className="w-full">
|
||||
{props.state === -1 ? "—" : props.options[props.state].label}
|
||||
{props.state === -1 ? "—" : props.options[props.state]}
|
||||
</p>
|
||||
{props.state >= 0 && props.allowEmpty && (
|
||||
<span
|
||||
|
|
@ -54,14 +49,14 @@ export default function Select(props: SelectProps): JSX.Element {
|
|||
{index !== props.state && (
|
||||
<div
|
||||
className="bg-light hover:bg-mid transition-colors cursor-pointer p-1 last-of-type:rounded-b-[1em]"
|
||||
key={option.name}
|
||||
id={option.name}
|
||||
key={option}
|
||||
id={option}
|
||||
onClick={() => {
|
||||
setOpened(false);
|
||||
props.setState(index);
|
||||
}}
|
||||
>
|
||||
{option.label}
|
||||
{option}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -1,72 +1,86 @@
|
|||
query getWebsiteInterface($language_code: String) {
|
||||
websiteInterfaces(filters: { language: { code: { eq: $language_code } } }) {
|
||||
websiteInterfaces(
|
||||
filters: { ui_language: { code: { eq: $language_code } } }
|
||||
) {
|
||||
data {
|
||||
attributes {
|
||||
main_library
|
||||
main_library_description
|
||||
main_news
|
||||
main_merch
|
||||
main_gallery
|
||||
main_archives
|
||||
main_about_us
|
||||
main_licensing
|
||||
main_copyright
|
||||
library
|
||||
contents
|
||||
wiki
|
||||
chronicles
|
||||
library_short_description
|
||||
contents_short_description
|
||||
wiki_short_description
|
||||
chronicles_short_description
|
||||
news
|
||||
merch
|
||||
gallery
|
||||
archives
|
||||
about_us
|
||||
licensing_notice
|
||||
copyright_notice
|
||||
contents_description
|
||||
type
|
||||
category
|
||||
categories
|
||||
size
|
||||
release_date
|
||||
release_year
|
||||
details
|
||||
price
|
||||
width
|
||||
height
|
||||
thickness
|
||||
subitem
|
||||
subitems
|
||||
subitem_of
|
||||
variant
|
||||
variants
|
||||
variant_of
|
||||
summary
|
||||
audio
|
||||
video
|
||||
textual
|
||||
game
|
||||
other
|
||||
return_to
|
||||
left_to_right
|
||||
right_to_left
|
||||
page
|
||||
pages
|
||||
page_order
|
||||
binding
|
||||
type_information
|
||||
front_matter
|
||||
back_matter
|
||||
open_content
|
||||
read_content
|
||||
watch_content
|
||||
listen_content
|
||||
view_scans
|
||||
paperback
|
||||
hardcover
|
||||
languages
|
||||
select_language
|
||||
language
|
||||
library_description
|
||||
library_item_summary
|
||||
library_item_gallery
|
||||
library_item_details
|
||||
library_item_subitems
|
||||
library_item_variants
|
||||
library_item_content
|
||||
global_return_label
|
||||
global_subitem_of
|
||||
global_type
|
||||
global_width
|
||||
global_height
|
||||
global_thickness
|
||||
global_binding
|
||||
global_language
|
||||
global_languages
|
||||
global_page
|
||||
global_pages
|
||||
global_page_order
|
||||
global_release_date
|
||||
global_price
|
||||
library_item_physical_size
|
||||
library_item_type_information
|
||||
library_item_front_matter
|
||||
library_item_back_matter
|
||||
library_item_type_textual
|
||||
library_item_type_audio
|
||||
library_item_type_game
|
||||
library_item_type_video
|
||||
library_item_type_other
|
||||
library_item_open_content
|
||||
library_item_view_scans
|
||||
content_read_content
|
||||
content_watch_content
|
||||
content_listen_content
|
||||
global_category
|
||||
global_categories
|
||||
global_paperback
|
||||
global_hardcover
|
||||
global_left_to_right
|
||||
global_right_to_left
|
||||
main_wiki
|
||||
main_wiki_description
|
||||
main_chronicles
|
||||
main_chronicles_description
|
||||
library_items
|
||||
library_items_description
|
||||
library_content
|
||||
library_content_description
|
||||
wiki_description
|
||||
news_description
|
||||
chronicles_description
|
||||
news_description
|
||||
merch_description
|
||||
gallery_description
|
||||
archives_description
|
||||
about_us_description
|
||||
merch_description
|
||||
page_not_found
|
||||
default_description
|
||||
name
|
||||
show_subitems
|
||||
show_primary_items
|
||||
show_secondary_items
|
||||
no_type
|
||||
no_year
|
||||
order_by
|
||||
group_by
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -125,9 +139,7 @@ query getChronologyItems($language_code: String) {
|
|||
}
|
||||
|
||||
query getLibraryItemsPreview($language_code: String) {
|
||||
libraryItems(
|
||||
pagination: { limit: -1 }
|
||||
) {
|
||||
libraryItems(pagination: { limit: -1 }) {
|
||||
data {
|
||||
id
|
||||
attributes {
|
||||
|
|
|
|||
|
|
@ -86,71 +86,83 @@ export type GetWebsiteInterfaceQuery = {
|
|||
__typename: "WebsiteInterfaceEntity";
|
||||
attributes: {
|
||||
__typename: "WebsiteInterface";
|
||||
main_library: string;
|
||||
main_library_description: string;
|
||||
main_news: string;
|
||||
main_merch: string;
|
||||
main_gallery: string;
|
||||
main_archives: string;
|
||||
main_about_us: string;
|
||||
main_licensing: string;
|
||||
main_copyright: string;
|
||||
library: string;
|
||||
contents: string;
|
||||
wiki: string;
|
||||
chronicles: string;
|
||||
library_short_description: string;
|
||||
contents_short_description: string;
|
||||
wiki_short_description: string;
|
||||
chronicles_short_description: string;
|
||||
news: string;
|
||||
merch: string;
|
||||
gallery: string;
|
||||
archives: string;
|
||||
about_us: string;
|
||||
licensing_notice: string;
|
||||
copyright_notice: string;
|
||||
contents_description: string;
|
||||
type: string;
|
||||
category: string;
|
||||
categories: string;
|
||||
size: string;
|
||||
release_date: string;
|
||||
release_year: string;
|
||||
details: string;
|
||||
price: string;
|
||||
width: string;
|
||||
height: string;
|
||||
thickness: string;
|
||||
subitem: string;
|
||||
subitems: string;
|
||||
subitem_of: string;
|
||||
variant: string;
|
||||
variants: string;
|
||||
variant_of: string;
|
||||
summary: string;
|
||||
audio: string;
|
||||
video: string;
|
||||
textual: string;
|
||||
game: string;
|
||||
other: string;
|
||||
return_to: string;
|
||||
left_to_right: string;
|
||||
right_to_left: string;
|
||||
page: string;
|
||||
pages: string;
|
||||
page_order: string;
|
||||
binding: string;
|
||||
type_information: string;
|
||||
front_matter: string;
|
||||
back_matter: string;
|
||||
open_content: string;
|
||||
read_content: string;
|
||||
watch_content: string;
|
||||
listen_content: string;
|
||||
view_scans: string;
|
||||
paperback: string;
|
||||
hardcover: string;
|
||||
languages: string;
|
||||
select_language: string;
|
||||
language: string;
|
||||
library_description: string;
|
||||
library_item_summary: string;
|
||||
library_item_gallery: string;
|
||||
library_item_details: string;
|
||||
library_item_subitems: string;
|
||||
library_item_variants: string;
|
||||
library_item_content: string;
|
||||
global_return_label: string;
|
||||
global_subitem_of: string;
|
||||
global_type: string;
|
||||
global_width: string;
|
||||
global_height: string;
|
||||
global_thickness: string;
|
||||
global_binding: string;
|
||||
global_language: string;
|
||||
global_languages: string;
|
||||
global_page: string;
|
||||
global_pages: string;
|
||||
global_page_order: string;
|
||||
global_release_date: string;
|
||||
global_price: string;
|
||||
library_item_physical_size: string;
|
||||
library_item_type_information: string;
|
||||
library_item_front_matter: string;
|
||||
library_item_back_matter: string;
|
||||
library_item_type_textual: string;
|
||||
library_item_type_audio: string;
|
||||
library_item_type_game: string;
|
||||
library_item_type_video: string;
|
||||
library_item_type_other: string;
|
||||
library_item_open_content: string;
|
||||
library_item_view_scans: string;
|
||||
content_read_content: string;
|
||||
content_watch_content: string;
|
||||
content_listen_content: string;
|
||||
global_category: string;
|
||||
global_categories: string;
|
||||
global_paperback: string;
|
||||
global_hardcover: string;
|
||||
global_left_to_right: string;
|
||||
global_right_to_left: string;
|
||||
main_wiki: string;
|
||||
main_wiki_description: string;
|
||||
main_chronicles: string;
|
||||
main_chronicles_description: string;
|
||||
library_items: string;
|
||||
library_items_description: string;
|
||||
library_content: string;
|
||||
library_content_description: string;
|
||||
wiki_description: string;
|
||||
news_description: string;
|
||||
chronicles_description: string;
|
||||
news_description: string;
|
||||
merch_description: string;
|
||||
gallery_description: string;
|
||||
archives_description: string;
|
||||
about_us_description: string;
|
||||
merch_description: string;
|
||||
page_not_found: string;
|
||||
default_description: string;
|
||||
name: string;
|
||||
show_subitems: string;
|
||||
show_primary_items: string;
|
||||
show_secondary_items: string;
|
||||
no_type: string;
|
||||
no_year: string;
|
||||
order_by: string;
|
||||
group_by: string;
|
||||
};
|
||||
}>;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -13,13 +13,15 @@ export default function FourOhFour(props: FourOhFourProps): JSX.Element {
|
|||
const langui = props.langui.websiteInterfaces.data[0].attributes;
|
||||
const contentPanel = (
|
||||
<ContentPanel>
|
||||
<h1>404 - Page Not Found</h1>
|
||||
<h1>404 - {langui.page_not_found}</h1>
|
||||
<Link href="/">
|
||||
<a>Go back home</a>
|
||||
</Link>
|
||||
</ContentPanel>
|
||||
);
|
||||
return <AppLayout navTitle="404" langui={langui} contentPanel={contentPanel} />;
|
||||
return (
|
||||
<AppLayout navTitle="404" langui={langui} contentPanel={contentPanel} />
|
||||
);
|
||||
}
|
||||
|
||||
export const getStaticProps: GetStaticProps = async (context) => {
|
||||
|
|
|
|||
|
|
@ -15,14 +15,14 @@ export default function AboutUs(props: AboutUsProps): JSX.Element {
|
|||
<SubPanel>
|
||||
<PanelHeader
|
||||
icon="info"
|
||||
title={langui.main_about_us}
|
||||
title={langui.about_us}
|
||||
description={langui.about_us_description}
|
||||
/>
|
||||
</SubPanel>
|
||||
);
|
||||
return (
|
||||
<AppLayout
|
||||
navTitle={langui.main_about_us}
|
||||
navTitle={langui.about_us}
|
||||
langui={langui}
|
||||
subPanel={subPanel}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -15,14 +15,14 @@ export default function Archives(props: ArchivesProps): JSX.Element {
|
|||
<SubPanel>
|
||||
<PanelHeader
|
||||
icon="inventory"
|
||||
title={langui.main_archives}
|
||||
title={langui.archives}
|
||||
description={langui.archives_description}
|
||||
/>
|
||||
</SubPanel>
|
||||
);
|
||||
return (
|
||||
<AppLayout
|
||||
navTitle={langui.main_archives}
|
||||
navTitle={langui.archives}
|
||||
langui={langui}
|
||||
subPanel={subPanel}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -15,14 +15,14 @@ export default function Chronicles(props: ChroniclesProps): JSX.Element {
|
|||
<SubPanel>
|
||||
<PanelHeader
|
||||
icon="watch_later"
|
||||
title={langui.main_chronicles}
|
||||
title={langui.chronicles}
|
||||
description={langui.chronicles_description}
|
||||
/>
|
||||
</SubPanel>
|
||||
);
|
||||
return (
|
||||
<AppLayout
|
||||
navTitle={langui.main_chronicles}
|
||||
navTitle={langui.chronicles}
|
||||
langui={langui}
|
||||
subPanel={subPanel}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@ export default function ContentIndex(props: ContentIndexProps): JSX.Element {
|
|||
|
||||
{content.text_set.length > 0 ? (
|
||||
<Button href={`/contents/${content.slug}/read/`}>
|
||||
{langui.content_read_content}
|
||||
{langui.read_content}
|
||||
</Button>
|
||||
) : (
|
||||
""
|
||||
|
|
@ -48,7 +48,7 @@ export default function ContentIndex(props: ContentIndexProps): JSX.Element {
|
|||
|
||||
{content.audio_set.length > 0 ? (
|
||||
<Button href={`/contents/${content.slug}/listen/`}>
|
||||
{langui.content_listen_content}
|
||||
{langui.listen_content}
|
||||
</Button>
|
||||
) : (
|
||||
""
|
||||
|
|
@ -56,7 +56,7 @@ export default function ContentIndex(props: ContentIndexProps): JSX.Element {
|
|||
|
||||
{content.video_set.length > 0 ? (
|
||||
<Button href={`/contents/${content.slug}/watch/`}>
|
||||
{langui.content_watch_content}
|
||||
{langui.watch_content}
|
||||
</Button>
|
||||
) : (
|
||||
""
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ export default function Gallery(props: GalleryProps): JSX.Element {
|
|||
|
||||
return (
|
||||
<AppLayout
|
||||
navTitle={langui.main_gallery}
|
||||
navTitle={langui.gallery}
|
||||
langui={langui}
|
||||
contentPanel={contentPanel}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -58,16 +58,12 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
|
|||
|
||||
const subPanel = (
|
||||
<SubPanel>
|
||||
<ReturnButton
|
||||
href="/library/"
|
||||
title={langui.main_library}
|
||||
langui={langui}
|
||||
/>
|
||||
<ReturnButton href="/library/" title={langui.library} langui={langui} />
|
||||
<HorizontalLine />
|
||||
|
||||
<div className="grid gap-4">
|
||||
<NavOption
|
||||
title={langui.library_item_summary}
|
||||
title={langui.summary}
|
||||
url="#summary"
|
||||
border
|
||||
onClick={() => appLayout.setSubPanelOpen(false)}
|
||||
|
|
@ -75,7 +71,7 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
|
|||
|
||||
{item.gallery.data.length > 0 ? (
|
||||
<NavOption
|
||||
title={langui.library_item_gallery}
|
||||
title={langui.gallery}
|
||||
url="#gallery"
|
||||
border
|
||||
onClick={() => appLayout.setSubPanelOpen(false)}
|
||||
|
|
@ -85,7 +81,7 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
|
|||
)}
|
||||
|
||||
<NavOption
|
||||
title={langui.library_item_details}
|
||||
title={langui.details}
|
||||
url="#details"
|
||||
border
|
||||
onClick={() => appLayout.setSubPanelOpen(false)}
|
||||
|
|
@ -93,11 +89,7 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
|
|||
|
||||
{item.subitems.data.length > 0 ? (
|
||||
<NavOption
|
||||
title={
|
||||
isVariantSet
|
||||
? langui.library_item_variants
|
||||
: langui.library_item_subitems
|
||||
}
|
||||
title={isVariantSet ? langui.variants : langui.subitems}
|
||||
url={isVariantSet ? "#variants" : "#subitems"}
|
||||
border
|
||||
onClick={() => appLayout.setSubPanelOpen(false)}
|
||||
|
|
@ -107,11 +99,7 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
|
|||
)}
|
||||
|
||||
{item.contents.data.length > 0 ? (
|
||||
<NavOption
|
||||
title={langui.library_item_content}
|
||||
url="#content"
|
||||
border
|
||||
/>
|
||||
<NavOption title={langui.contents} url="#contents" border />
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
|
|
@ -140,7 +128,7 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
|
|||
<div className="w-[clamp(0px,100%,42rem)] grid place-items-center gap-8">
|
||||
{item.subitem_of.data.length > 0 ? (
|
||||
<div className="grid place-items-center">
|
||||
<p>{langui.global_subitem_of}</p>
|
||||
<p>{langui.subitem_of}</p>
|
||||
<Button
|
||||
href={`/library/${item.subitem_of.data[0].attributes.slug}`}
|
||||
>
|
||||
|
|
@ -172,7 +160,7 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
|
|||
|
||||
{item.gallery.data.length > 0 ? (
|
||||
<div id="gallery" className="grid place-items-center gap-8 w-full">
|
||||
<h2 className="text-2xl">{langui.library_item_gallery}</h2>
|
||||
<h2 className="text-2xl">{langui.gallery}</h2>
|
||||
<div className="grid w-full gap-8 items-end grid-cols-[repeat(auto-fill,_minmax(15rem,1fr))]">
|
||||
{item.gallery.data.map((galleryItem) => (
|
||||
<div
|
||||
|
|
@ -197,12 +185,12 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
|
|||
<InsetBox id="details" className="grid place-items-center">
|
||||
<div className="w-[clamp(0px,100%,42rem)] grid place-items gap-8">
|
||||
<h2 className="text-2xl text-center">
|
||||
{langui.library_item_details}
|
||||
{langui.details}
|
||||
</h2>
|
||||
<div className="grid grid-flow-col w-full place-content-between">
|
||||
{item.metadata.length > 0 ? (
|
||||
<div className="grid place-items-center">
|
||||
<h3 className="text-xl">{langui.global_type}</h3>
|
||||
<h3 className="text-xl">{langui.type}</h3>
|
||||
<div className="grid grid-flow-col gap-1">
|
||||
<Chip>{prettyItemType(item.metadata[0], langui)}</Chip>
|
||||
{"›"}
|
||||
|
|
@ -215,7 +203,7 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
|
|||
|
||||
{item.release_date ? (
|
||||
<div className="grid place-items-center">
|
||||
<h3 className="text-xl">{langui.global_release_date}</h3>
|
||||
<h3 className="text-xl">{langui.release_date}</h3>
|
||||
<p>{prettyDate(item.release_date)}</p>
|
||||
</div>
|
||||
) : (
|
||||
|
|
@ -224,7 +212,7 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
|
|||
|
||||
{item.price ? (
|
||||
<div className="grid place-items-center">
|
||||
<h3 className="text-xl">{langui.global_price}</h3>
|
||||
<h3 className="text-xl">{langui.price}</h3>
|
||||
<p>{prettyPrice(item.price)}</p>
|
||||
</div>
|
||||
) : (
|
||||
|
|
@ -233,17 +221,17 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
|
|||
</div>
|
||||
{item.size ? (
|
||||
<>
|
||||
<h3 className="text-xl">{langui.library_item_physical_size}</h3>
|
||||
<h3 className="text-xl">{langui.size}</h3>
|
||||
<div className="grid grid-flow-col w-full place-content-between">
|
||||
<div className="flex flex-row flex-wrap place-items-start gap-4">
|
||||
<p className="font-bold">{langui.global_width}:</p>
|
||||
<p className="font-bold">{langui.width}:</p>
|
||||
<div>
|
||||
<p>{item.size.width} mm</p>
|
||||
<p>{convertMmToInch(item.size.width)} in</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-row flex-wrap place-items-start gap-4">
|
||||
<p className="font-bold">{langui.global_height}:</p>
|
||||
<p className="font-bold">{langui.height}:</p>
|
||||
<div>
|
||||
<p>{item.size.height} mm</p>
|
||||
<p>{convertMmToInch(item.size.height)} in</p>
|
||||
|
|
@ -251,7 +239,7 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
|
|||
</div>
|
||||
{item.size.thickness ? (
|
||||
<div className="flex flex-row flex-wrap place-items-start gap-4">
|
||||
<p className="font-bold">{langui.global_thickness}:</p>
|
||||
<p className="font-bold">{langui.thickness}:</p>
|
||||
<div>
|
||||
<p>{item.size.thickness} mm</p>
|
||||
<p>{convertMmToInch(item.size.thickness)} in</p>
|
||||
|
|
@ -269,44 +257,44 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
|
|||
{item.metadata.length > 0 ? (
|
||||
<>
|
||||
<h3 className="text-xl">
|
||||
{langui.library_item_type_information}
|
||||
{langui.type_information}
|
||||
</h3>
|
||||
<div className="grid grid-cols-2 w-full place-content-between">
|
||||
{item.metadata[0].__typename === "ComponentMetadataBooks" ? (
|
||||
<>
|
||||
<div className="flex flex-row place-content-start gap-4">
|
||||
<p className="font-bold">{langui.global_pages}:</p>
|
||||
<p className="font-bold">{langui.pages}:</p>
|
||||
<p>{item.metadata[0].page_count}</p>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-row place-content-start gap-4">
|
||||
<p className="font-bold">{langui.global_binding}:</p>
|
||||
<p className="font-bold">{langui.binding}:</p>
|
||||
<p>
|
||||
{item.metadata[0].binding_type ===
|
||||
Enum_Componentmetadatabooks_Binding_Type.Paperback
|
||||
? langui.global_paperback
|
||||
? langui.paperback
|
||||
: item.metadata[0].binding_type ===
|
||||
Enum_Componentmetadatabooks_Binding_Type.Hardcover
|
||||
? langui.global_hardcover
|
||||
? langui.hardcover
|
||||
: ""}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-row place-content-start gap-4">
|
||||
<p className="font-bold">{langui.global_page_order}:</p>
|
||||
<p className="font-bold">{langui.page_order}:</p>
|
||||
<p>
|
||||
{item.metadata[0].page_order ===
|
||||
Enum_Componentmetadatabooks_Page_Order.LeftToRight
|
||||
? langui.global_left_to_right
|
||||
? langui.left_to_right
|
||||
: item.metadata[0].page_order ===
|
||||
Enum_Componentmetadatabooks_Page_Order.RightToLeft
|
||||
? langui.global_right_to_left
|
||||
? langui.right_to_left
|
||||
: ""}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-row place-content-start gap-4">
|
||||
<p className="font-bold">{langui.global_languages}:</p>
|
||||
<p className="font-bold">{langui.languages}:</p>
|
||||
{item.metadata[0].languages.data.map((lang) => (
|
||||
<p key={lang.attributes.code}>
|
||||
{lang.attributes.name}
|
||||
|
|
@ -327,7 +315,7 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
|
|||
"ComponentMetadataOther" ? (
|
||||
<>
|
||||
<div className="flex flex-row place-content-start gap-4">
|
||||
<p className="font-bold">{langui.global_type}:</p>
|
||||
<p className="font-bold">{langui.type}:</p>
|
||||
<Chip>
|
||||
{item.metadata[0].subtype.data.attributes.titles
|
||||
.length > 0
|
||||
|
|
@ -357,8 +345,8 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
|
|||
>
|
||||
<h2 className="text-2xl">
|
||||
{isVariantSet
|
||||
? langui.library_item_variants
|
||||
: langui.library_item_subitems}
|
||||
? langui.variants
|
||||
: langui.subitems}
|
||||
</h2>
|
||||
<div className="grid gap-8 items-end mobile:grid-cols-2 grid-cols-[repeat(auto-fill,minmax(15rem,1fr))] w-full">
|
||||
{item.subitems.data.map((subitem) => (
|
||||
|
|
@ -374,8 +362,8 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
|
|||
)}
|
||||
|
||||
{item.contents.data.length > 0 ? (
|
||||
<div id="content" className="w-full grid place-items-center gap-8">
|
||||
<h2 className="text-2xl">{langui.library_item_content}</h2>
|
||||
<div id="contents" className="w-full grid place-items-center gap-8">
|
||||
<h2 className="text-2xl">{langui.contents}</h2>
|
||||
<div className="grid gap-4 w-full">
|
||||
{item.contents.data.map((content) => (
|
||||
<div
|
||||
|
|
@ -440,7 +428,7 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
|
|||
<Button
|
||||
href={`/contents/${content.attributes.content.data.attributes.slug}/scans/`}
|
||||
>
|
||||
{langui.library_item_view_scans}
|
||||
{langui.view_scans}
|
||||
</Button>
|
||||
) : (
|
||||
""
|
||||
|
|
@ -450,7 +438,7 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
|
|||
<Button
|
||||
href={`/contents/${content.attributes.content.data.attributes.slug}`}
|
||||
>
|
||||
{langui.library_item_open_content}
|
||||
{langui.open_content}
|
||||
</Button>
|
||||
) : (
|
||||
""
|
||||
|
|
@ -474,7 +462,7 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
|
|||
|
||||
return (
|
||||
<AppLayout
|
||||
navTitle={langui.main_library}
|
||||
navTitle={langui.library}
|
||||
title={prettyinlineTitle("", item.title, item.subtitle)}
|
||||
langui={langui}
|
||||
contentPanel={contentPanel}
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@ export default function Library(props: LibraryProps): JSX.Element {
|
|||
>(sortBy(groupingMethod, filteredItems));
|
||||
|
||||
const [groups, setGroups] = useState<GroupLibraryItems>(
|
||||
getGroups(groupingMethod, sortedItems)
|
||||
getGroups(langui, groupingMethod, sortedItems)
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
|
|
@ -59,26 +59,22 @@ export default function Library(props: LibraryProps): JSX.Element {
|
|||
}, [filteredItems, sortingMethod]);
|
||||
|
||||
useEffect(() => {
|
||||
setGroups(getGroups(groupingMethod, sortedItems));
|
||||
}, [groupingMethod, sortedItems]);
|
||||
setGroups(getGroups(langui, groupingMethod, sortedItems));
|
||||
}, [langui, groupingMethod, sortedItems]);
|
||||
|
||||
const subPanel = (
|
||||
<SubPanel>
|
||||
<PanelHeader
|
||||
icon="library_books"
|
||||
title={langui.main_library}
|
||||
title={langui.library}
|
||||
description={langui.library_description}
|
||||
/>
|
||||
|
||||
<div className="flex flex-row gap-2 place-items-center">
|
||||
<p className="flex-shrink-0">Group by:</p>
|
||||
<p className="flex-shrink-0">{langui.group_by}:</p>
|
||||
<Select
|
||||
className="w-full"
|
||||
options={[
|
||||
{ name: "category", label: "Category" },
|
||||
{ name: "type", label: "Type" },
|
||||
{ name: "releaseYear", label: "Release year" },
|
||||
]}
|
||||
options={[langui.category, langui.type, langui.release_year]}
|
||||
state={groupingMethod}
|
||||
setState={setGroupingMethod}
|
||||
allowEmpty
|
||||
|
|
@ -86,21 +82,17 @@ export default function Library(props: LibraryProps): JSX.Element {
|
|||
</div>
|
||||
|
||||
<div className="flex flex-row gap-2 place-items-center">
|
||||
<p className="flex-shrink-0">Order by:</p>
|
||||
<p className="flex-shrink-0">{langui.order_by}:</p>
|
||||
<Select
|
||||
className="w-full"
|
||||
options={[
|
||||
{ name: "title", label: "Title" },
|
||||
{ name: "price", label: "Price" },
|
||||
{ name: "releaseDate", label: "Release date" },
|
||||
]}
|
||||
options={[langui.name, langui.price, langui.release_date]}
|
||||
state={sortingMethod}
|
||||
setState={setSortingMethod}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-row gap-2 place-items-center">
|
||||
<p className="flex-shrink-0">Show subitems:</p>
|
||||
<p className="flex-shrink-0">{langui.show_subitems}:</p>
|
||||
<Switch state={showSubitems} setState={setShowSubitems} />
|
||||
</div>
|
||||
</SubPanel>
|
||||
|
|
@ -128,7 +120,7 @@ export default function Library(props: LibraryProps): JSX.Element {
|
|||
);
|
||||
return (
|
||||
<AppLayout
|
||||
navTitle={langui.main_library}
|
||||
navTitle={langui.library}
|
||||
langui={langui}
|
||||
subPanel={subPanel}
|
||||
contentPanel={contentPanel}
|
||||
|
|
@ -155,6 +147,7 @@ export const getStaticProps: GetStaticProps = async (context) => {
|
|||
};
|
||||
|
||||
function getGroups(
|
||||
langui: GetWebsiteInterfaceQuery["websiteInterfaces"]["data"][number]["attributes"],
|
||||
groupByType: number,
|
||||
items: LibraryProps["libraryItems"]["libraryItems"]["data"]
|
||||
): GroupLibraryItems {
|
||||
|
|
@ -164,52 +157,52 @@ function getGroups(
|
|||
|
||||
case 1:
|
||||
const groupType: GroupLibraryItems = new Map();
|
||||
groupType.set("Audio", []);
|
||||
groupType.set("Game", []);
|
||||
groupType.set("Textual", []);
|
||||
groupType.set("Video", []);
|
||||
groupType.set("Other", []);
|
||||
groupType.set("No type", []);
|
||||
groupType.set(langui.audio, []);
|
||||
groupType.set(langui.game, []);
|
||||
groupType.set(langui.textual, []);
|
||||
groupType.set(langui.video, []);
|
||||
groupType.set(langui.other, []);
|
||||
groupType.set(langui.no_type, []);
|
||||
items.map((item) => {
|
||||
if (item.attributes.metadata.length > 0) {
|
||||
switch (item.attributes.metadata[0].__typename) {
|
||||
case "ComponentMetadataAudio":
|
||||
groupType.get("Audio")?.push(item);
|
||||
groupType.get(langui.audio)?.push(item);
|
||||
break;
|
||||
case "ComponentMetadataGame":
|
||||
groupType.get("Game")?.push(item);
|
||||
groupType.get(langui.game)?.push(item);
|
||||
break;
|
||||
case "ComponentMetadataBooks":
|
||||
groupType.get("Textual")?.push(item);
|
||||
groupType.get(langui.textual)?.push(item);
|
||||
break;
|
||||
case "ComponentMetadataVideo":
|
||||
groupType.get("Video")?.push(item);
|
||||
groupType.get(langui.video)?.push(item);
|
||||
break;
|
||||
case "ComponentMetadataOther":
|
||||
switch (
|
||||
item.attributes.metadata[0].subtype.data.attributes.slug
|
||||
) {
|
||||
case "audio-case":
|
||||
groupType.get("Audio")?.push(item);
|
||||
groupType.get(langui.audio)?.push(item);
|
||||
break;
|
||||
|
||||
case "video-case":
|
||||
groupType.get("Video")?.push(item);
|
||||
groupType.get(langui.video)?.push(item);
|
||||
break;
|
||||
|
||||
case "game-case":
|
||||
groupType.get("Game")?.push(item);
|
||||
groupType.get(langui.game)?.push(item);
|
||||
break;
|
||||
|
||||
default:
|
||||
groupType.get("Other")?.push(item);
|
||||
groupType.get(langui.other)?.push(item);
|
||||
break;
|
||||
}
|
||||
|
||||
break;
|
||||
}
|
||||
} else {
|
||||
groupType.get("No type")?.push(item);
|
||||
groupType.get(langui.no_type)?.push(item);
|
||||
}
|
||||
});
|
||||
return groupType;
|
||||
|
|
@ -227,14 +220,14 @@ function getGroups(
|
|||
years.map((year) => {
|
||||
groupYear.set(year.toString(), []);
|
||||
});
|
||||
groupYear.set("No year", []);
|
||||
groupYear.set(langui.no_year, []);
|
||||
items.map((item) => {
|
||||
if (item.attributes.release_date) {
|
||||
groupYear
|
||||
.get(item.attributes.release_date.year.toString())
|
||||
?.push(item);
|
||||
} else {
|
||||
groupYear.get("No year")?.push(item);
|
||||
groupYear.get(langui.no_year)?.push(item);
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ export default function Merch(props: MerchProps): JSX.Element {
|
|||
<SubPanel>
|
||||
<PanelHeader
|
||||
icon="store"
|
||||
title={langui.main_merch}
|
||||
title={langui.merch}
|
||||
description={langui.merch_description}
|
||||
/>
|
||||
</SubPanel>
|
||||
|
|
@ -23,7 +23,7 @@ export default function Merch(props: MerchProps): JSX.Element {
|
|||
|
||||
return (
|
||||
<AppLayout
|
||||
navTitle={langui.main_merch}
|
||||
navTitle={langui.merch}
|
||||
langui={langui}
|
||||
subPanel={subPanel}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ export default function News(props: NewsProps): JSX.Element {
|
|||
<SubPanel>
|
||||
<PanelHeader
|
||||
icon="feed"
|
||||
title={langui.main_news}
|
||||
title={langui.news}
|
||||
description={langui.news_description}
|
||||
/>
|
||||
</SubPanel>
|
||||
|
|
@ -23,7 +23,7 @@ export default function News(props: NewsProps): JSX.Element {
|
|||
|
||||
return (
|
||||
<AppLayout
|
||||
navTitle={langui.main_news}
|
||||
navTitle={langui.news}
|
||||
langui={langui}
|
||||
subPanel={subPanel}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ export default function Hubs(props: WikiProps): JSX.Element {
|
|||
<SubPanel>
|
||||
<PanelHeader
|
||||
icon="travel_explore"
|
||||
title={langui.main_wiki}
|
||||
title={langui.wiki}
|
||||
description={langui.wiki_description}
|
||||
/>
|
||||
</SubPanel>
|
||||
|
|
@ -25,7 +25,7 @@ export default function Hubs(props: WikiProps): JSX.Element {
|
|||
|
||||
return (
|
||||
<AppLayout
|
||||
navTitle={langui.main_wiki}
|
||||
navTitle={langui.wiki}
|
||||
langui={langui}
|
||||
contentPanel={contentPanel}
|
||||
subPanel={subPanel}
|
||||
|
|
|
|||
Loading…
Reference in New Issue