136 lines
4.7 KiB
TypeScript
136 lines
4.7 KiB
TypeScript
import { PreviewCard } from "./PreviewCard";
|
|
import { PreviewLine } from "./PreviewLine";
|
|
import { ScanSet } from "./Library/ScanSet";
|
|
import { NavOption } from "./PanelComponents/NavOption";
|
|
import { AppStaticProps } from "graphql/getAppStaticProps";
|
|
import { useSmartLanguage } from "hooks/useSmartLanguage";
|
|
|
|
type TranslatedProps<P, K extends keyof P> = Omit<P, K> & {
|
|
translations: (Pick<P, K> & { language: string })[];
|
|
fallback: Pick<P, K>;
|
|
languages: AppStaticProps["languages"];
|
|
};
|
|
|
|
// ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─
|
|
|
|
type TranslatedPreviewCardProps = TranslatedProps<
|
|
Parameters<typeof PreviewCard>[0],
|
|
"description" | "pre_title" | "subtitle" | "title"
|
|
>;
|
|
|
|
// ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─
|
|
|
|
export const TranslatedPreviewCard = ({
|
|
translations,
|
|
languages,
|
|
fallback,
|
|
...otherProps
|
|
}: TranslatedPreviewCardProps): JSX.Element => {
|
|
const [selectedTranslation] = useSmartLanguage({
|
|
items: translations,
|
|
languages: languages,
|
|
languageExtractor: (item) => item.language,
|
|
});
|
|
|
|
return (
|
|
<PreviewCard
|
|
pre_title={selectedTranslation?.pre_title ?? fallback.pre_title}
|
|
title={selectedTranslation?.title ?? fallback.title}
|
|
subtitle={selectedTranslation?.subtitle ?? fallback.subtitle}
|
|
description={selectedTranslation?.description ?? fallback.description}
|
|
{...otherProps}
|
|
/>
|
|
);
|
|
};
|
|
|
|
// ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─
|
|
|
|
type TranslatedPreviewLineProps = TranslatedProps<
|
|
Parameters<typeof PreviewLine>[0],
|
|
"pre_title" | "subtitle" | "title"
|
|
>;
|
|
|
|
// ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─
|
|
|
|
export const TranslatedPreviewLine = ({
|
|
translations,
|
|
languages,
|
|
fallback,
|
|
...otherProps
|
|
}: TranslatedPreviewLineProps): JSX.Element => {
|
|
const [selectedTranslation] = useSmartLanguage({
|
|
items: translations,
|
|
languages: languages,
|
|
languageExtractor: (item) => item.language,
|
|
});
|
|
|
|
return (
|
|
<PreviewLine
|
|
pre_title={selectedTranslation?.pre_title ?? fallback.pre_title}
|
|
title={selectedTranslation?.title ?? fallback.title}
|
|
subtitle={selectedTranslation?.subtitle ?? fallback.subtitle}
|
|
{...otherProps}
|
|
/>
|
|
);
|
|
};
|
|
|
|
// ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─
|
|
|
|
type TranslatedScanSetProps = TranslatedProps<
|
|
Parameters<typeof ScanSet>[0],
|
|
"title"
|
|
>;
|
|
|
|
// ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─
|
|
|
|
export const TranslatedScanSet = ({
|
|
translations,
|
|
languages,
|
|
fallback,
|
|
...otherProps
|
|
}: TranslatedScanSetProps): JSX.Element => {
|
|
const [selectedTranslation] = useSmartLanguage({
|
|
items: translations,
|
|
languages: languages,
|
|
languageExtractor: (item) => item.language,
|
|
});
|
|
|
|
return (
|
|
<ScanSet
|
|
title={selectedTranslation?.title ?? fallback.title}
|
|
languages={languages}
|
|
{...otherProps}
|
|
/>
|
|
);
|
|
};
|
|
|
|
// ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─
|
|
|
|
type TranslatedNavOptionProps = TranslatedProps<
|
|
Parameters<typeof NavOption>[0],
|
|
"subtitle" | "title"
|
|
>;
|
|
|
|
// ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─
|
|
|
|
export const TranslatedNavOption = ({
|
|
translations,
|
|
languages,
|
|
fallback,
|
|
...otherProps
|
|
}: TranslatedNavOptionProps): JSX.Element => {
|
|
const [selectedTranslation] = useSmartLanguage({
|
|
items: translations,
|
|
languages: languages,
|
|
languageExtractor: (item) => item.language,
|
|
});
|
|
|
|
return (
|
|
<NavOption
|
|
title={selectedTranslation?.title ?? fallback.title}
|
|
subtitle={selectedTranslation?.subtitle ?? fallback.subtitle}
|
|
{...otherProps}
|
|
/>
|
|
);
|
|
};
|