110 lines
3.2 KiB
TypeScript
110 lines
3.2 KiB
TypeScript
import Image from "next/image";
|
|
import {
|
|
Accordion,
|
|
AccordionControl,
|
|
AccordionItem,
|
|
AccordionPanel,
|
|
Center,
|
|
Group,
|
|
List,
|
|
ListItem,
|
|
Stack,
|
|
Text,
|
|
Title,
|
|
} from "@mantine/core";
|
|
import { IconLanguage, IconLibrary, IconUsers } from "@tabler/icons-react";
|
|
import { setStaticParamsLocale } from "next-international/server";
|
|
|
|
import { getScopedI18n, getStaticParams } from "@homarr/translation/server";
|
|
|
|
import { getPackageAttributesAsync } from "~/versions/package-reader";
|
|
import logo from "../../../../../public/logo/logo.png";
|
|
import classes from "./accordion.module.css";
|
|
|
|
export async function generateMetadata() {
|
|
const t = await getScopedI18n("management");
|
|
const metaTitle = `${t("metaTitle")} • Homarr`;
|
|
|
|
return {
|
|
title: metaTitle,
|
|
};
|
|
}
|
|
|
|
interface PageProps {
|
|
params: {
|
|
locale: string;
|
|
};
|
|
}
|
|
|
|
export default async function AboutPage({ params: { locale } }: PageProps) {
|
|
setStaticParamsLocale(locale);
|
|
const t = await getScopedI18n("management.page.about");
|
|
const attributes = await getPackageAttributesAsync();
|
|
return (
|
|
<div>
|
|
<Center w="100%">
|
|
<Group py="lg">
|
|
<Image src={logo} width={100} height={100} alt="" />
|
|
<Stack gap={0}>
|
|
<Title order={1} tt="uppercase">
|
|
Homarr
|
|
</Title>
|
|
<Title order={2}>
|
|
{t("version", { version: attributes.version })}
|
|
</Title>
|
|
</Stack>
|
|
</Group>
|
|
</Center>
|
|
<Text mb="xl">{t("text")}</Text>
|
|
|
|
<Accordion classNames={classes}>
|
|
<AccordionItem value="contributors">
|
|
<AccordionControl icon={<IconUsers size="1rem" />}>
|
|
{t("accordion.contributors.title")}
|
|
</AccordionControl>
|
|
<AccordionPanel></AccordionPanel>
|
|
</AccordionItem>
|
|
<AccordionItem value="translators">
|
|
<AccordionControl icon={<IconLanguage size="1rem" />}>
|
|
{t("accordion.translators.title")}
|
|
</AccordionControl>
|
|
<AccordionPanel></AccordionPanel>
|
|
</AccordionItem>
|
|
<AccordionItem value="libraries">
|
|
<AccordionControl icon={<IconLibrary size="1rem" />}>
|
|
<Stack gap={0}>
|
|
<Text>{t("accordion.libraries.title")}</Text>
|
|
<Text size="sm" c="dimmed">
|
|
{t("accordion.libraries.subtitle", {
|
|
count: Object.keys(attributes.dependencies).length,
|
|
})}
|
|
</Text>
|
|
</Stack>
|
|
</AccordionControl>
|
|
<AccordionPanel>
|
|
<List>
|
|
{Object.entries(attributes.dependencies)
|
|
.sort(([key1], [key2]) => key1.localeCompare(key2))
|
|
.map(([key, value]) => (
|
|
<ListItem key={key}>
|
|
{value.includes("workspace:") ? (
|
|
<Text>{key}</Text>
|
|
) : (
|
|
<a href={`https://www.npmjs.com/package/${key}`}>{key}</a>
|
|
)}
|
|
</ListItem>
|
|
))}
|
|
</List>
|
|
</AccordionPanel>
|
|
</AccordionItem>
|
|
</Accordion>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function generateStaticParams() {
|
|
return getStaticParams();
|
|
}
|
|
|
|
export const dynamic = "force-static";
|