louiscklaw/lettersoup-online
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

"refactor settings pages, add translation support and implement side navigation component"

Browse Source
This commit is contained in:
louiscklaw
2025-05-11 16:31:32 +08:00
parent ec12ca3bdf
commit 1003fa699c
8 changed files with 185 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
002_source/cms/src/app/dashboard/settings/account/page.tsx
View File

@@ -1,7 +1,10 @@
'use client';
import * as React from 'react';
import type { Metadata } from 'next';
// import type { Metadata } from 'next';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
import { useTranslation } from 'react-i18next';
import { config } from '@/config';
import { AccountDetails } from '@/components/dashboard/settings/account-details';
@@ -9,13 +12,15 @@ import { DeleteAccount } from '@/components/dashboard/settings/delete-account';
import { Privacy } from '@/components/dashboard/settings/privacy';
import { ThemeSwitch } from '@/components/dashboard/settings/theme-switch';
export const metadata = { title: `Account | Settings | Dashboard | ${config.site.name}` } satisfies Metadata;
// export const metadata = { title: `Account | Settings | Dashboard | ${config.site.name}` } satisfies Metadata;
export default function Page(): React.JSX.Element {
const { t } = useTranslation();
return (
<Stack spacing={4}>
<div>
<Typography variant="h4">Account</Typography>
<Typography variant="h4">{t('account')}</Typography>
</div>
<Stack spacing={4}>
<AccountDetails />

6
002_source/cms/src/app/dashboard/settings/layout.tsx
View File

@@ -18,7 +18,11 @@ export default function Layout({ children }: LayoutProps): React.JSX.Element {
width: 'var(--Content-width)',
}}
>
<Stack direction={{ xs: 'column', md: 'row' }} spacing={4} sx={{ position: 'relative' }}>
<Stack
direction={{ xs: 'column', md: 'row' }}
spacing={4}
sx={{ position: 'relative' }}
>
<SideNav />
<Box sx={{ flex: '1 1 auto', minWidth: 0 }}>{children}</Box>
</Stack>

3
002_source/cms/src/app/dashboard/settings/notifications/page.tsx
View File

@@ -14,10 +14,11 @@ import { PhoneNotifications } from '@/components/dashboard/settings/phone-notifi
export default function Page(): React.JSX.Element {
const { t } = useTranslation();
return (
<Stack spacing={4}>
<div>
<Typography variant="h4">{t('Notifications')}</Typography>
<Typography variant="h4">{t('notifications')}</Typography>
</div>
<Stack spacing={4}>
<EmailNotifications />

9
002_source/cms/src/app/dashboard/settings/security/page.tsx
View File

@@ -1,7 +1,10 @@
'use client';
import * as React from 'react';
import type { Metadata } from 'next';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
import { useTranslation } from 'react-i18next';
import { config } from '@/config';
import { dayjs } from '@/lib/dayjs';
@@ -9,13 +12,15 @@ import { LoginHistory } from '@/components/dashboard/settings/login-history';
import { MultiFactor } from '@/components/dashboard/settings/multi-factor';
import { PasswordForm } from '@/components/dashboard/settings/password-form';
export const metadata = { title: `Security | Settings | Dashboard | ${config.site.name}` } satisfies Metadata;
// export const metadata = { title: `Security | Settings | Dashboard | ${config.site.name}` } satisfies Metadata;
export default function Page(): React.JSX.Element {
const { t } = useTranslation();
return (
<Stack spacing={4}>
<div>
<Typography variant="h4">Security</Typography>
<Typography variant="h4">{t('security')}</Typography>
</div>
<Stack spacing={4}>
<PasswordForm />

19
002_source/cms/src/app/dashboard/settings/team/page.tsx
View File

@@ -1,33 +1,38 @@
'use client';
import * as React from 'react';
import type { Metadata } from 'next';
// import type { Metadata } from 'next';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
import { useTranslation } from 'react-i18next';
import { config } from '@/config';
import { Members } from '@/components/dashboard/settings/members';
export const metadata = { title: `Team | Settings | Dashboard | ${config.site.name}` } satisfies Metadata;
// export const metadata = { title: `Team | Settings | Dashboard | ${config.site.name}` } satisfies Metadata;
export default function Page(): React.JSX.Element {
const { t } = useTranslation();
return (
<Stack spacing={4}>
<div>
<Typography variant="h4">Team</Typography>
<Typography variant="h4">{t('team')}</Typography>
</div>
<Members
members={[
{
id: 'USR-000',
name: 'Sofia Rivers',
name: 'team member1',
avatar: '/assets/avatar.png',
email: 'sofia@devias.io',
email: 'teamMember1@devias.io',
role: 'Owner',
},
{
id: 'USR-002',
name: 'Siegbert Gottfried',
name: 'team member2',
avatar: '/assets/avatar-2.png',
email: 'siegbert.gottfried@domain.com',
email: 'teamMember2@domain.com',
role: 'Standard',
},
]}