import {
Box,
Card,
Group,
Image,
SimpleGrid,
Stack,
Text,
Title,
UnstyledButton,
createStyles,
} from '@mantine/core';
import { IconArrowRight } from '@tabler/icons-react';
import { GetServerSideProps } from 'next';
import { useSession } from 'next-auth/react';
import { useTranslation } from 'next-i18next';
import Head from 'next/head';
import Link from 'next/link';
import { ManageLayout } from '~/components/layout/Templates/ManageLayout';
import { useScreenLargerThan } from '~/hooks/useScreenLargerThan';
import { getServerAuthSession } from '~/server/auth';
import { getServerSideTranslations } from '~/tools/server/getServerSideTranslations';
import { OnlyKeysWithStructure } from '~/types/helpers';
import { type quickActions } from '../../../public/locales/en/manage/index.json';
const ManagementPage = () => {
const { t } = useTranslation('manage/index');
const { classes } = useStyles();
const largerThanMd = useScreenLargerThan('md');
const { data: sessionData } = useSession();
const metaTitle = `${t('metaTitle')} • Homarr`;
return (
{metaTitle}
{t('hero.title', {
username: sessionData?.user?.name ?? t('hero.fallbackUsername'),
})}
{t('hero.subtitle')}
{t('quickActions.title')}
);
};
type QuickActionType = OnlyKeysWithStructure<
typeof quickActions,
{
title: string;
subtitle: string;
}
>;
type QuickActionCardProps = {
type: QuickActionType;
href: string;
};
const QuickActionCard = ({ type, href }: QuickActionCardProps) => {
const { t } = useTranslation('manage/index');
const { classes } = useStyles();
return (
{t(`quickActions.${type}.title`)}
{t(`quickActions.${type}.subtitle`)}
);
};
export const getServerSideProps: GetServerSideProps = async (ctx) => {
const session = await getServerAuthSession(ctx);
if (!session?.user) {
return {
notFound: true,
};
}
const translations = await getServerSideTranslations(
['layout/manage', 'manage/index'],
ctx.locale,
ctx.req,
ctx.res
);
return {
props: {
...translations,
},
};
};
export default ManagementPage;
const useStyles = createStyles((theme) => ({
box: {
borderRadius: theme.radius.md,
backgroundColor:
theme.colorScheme === 'dark' ? theme.fn.rgba(theme.colors.red[8], 0.1) : theme.colors.red[1],
},
boxTitle: {
color: theme.colors.red[6],
},
quickActionCard: {
height: '100%',
backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[2],
'&:hover': {
backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[3],
},
},
}));