New Layout (#22)

New layout

apps/web/app/home/(user)/settings/layout.tsx

@@ -0,0 +1,21 @@
+import { Trans } from '@kit/ui/trans';
+
+import { withI18n } from '~/lib/i18n/with-i18n';
+
+// local imports
+import { HomeLayoutPageHeader } from '../_components/home-page-header';
+
+function UserSettingsLayout(props: React.PropsWithChildren) {
+  return (
+    <>
+      <HomeLayoutPageHeader
+        title={<Trans i18nKey={'account:accountTabLabel'} />}
+        description={<Trans i18nKey={'account:accountTabDescription'} />}
+      />
+
+      {props.children}
+    </>
+  );
+}
+
+export default withI18n(UserSettingsLayout);

apps/web/app/home/(user)/settings/page.tsx

@@ -0,0 +1,36 @@
+import { PersonalAccountSettingsContainer } from '@kit/accounts/personal-account-settings';
+import { PageBody } from '@kit/ui/page';
+
+import featureFlagsConfig from '~/config/feature-flags.config';
+import pathsConfig from '~/config/paths.config';
+import { createI18nServerInstance } from '~/lib/i18n/i18n.server';
+import { withI18n } from '~/lib/i18n/with-i18n';
+
+const features = {
+  enableAccountDeletion: featureFlagsConfig.enableAccountDeletion,
+};
+
+const paths = {
+  callback: pathsConfig.auth.callback + `?next=${pathsConfig.app.accountHome}`,
+};
+
+export const generateMetadata = async () => {
+  const i18n = await createI18nServerInstance();
+  const title = i18n.t('account:settingsTab');
+
+  return {
+    title,
+  };
+};
+
+function PersonalAccountSettingsPage() {
+  return (
+    <PageBody>
+      <div className={'flex w-full flex-1 flex-col lg:max-w-2xl'}>
+        <PersonalAccountSettingsContainer features={features} paths={paths} />
+      </div>
+    </PageBody>
+  );
+}
+
+export default withI18n(PersonalAccountSettingsPage);