80f4c92755
- Add /account route with profile form (firstName, lastName, address, IBAN) - Create UserProfile type and MongoDB users collection - Implement server actions for getting and updating user profile - Add Account Circle icon to PageHeader linking to /account - Install Material UI icons for account icon - Add form input disabling during save with loading spinner - Add cancel button to discard changes and return home - Add English and Croatian translations for account page - Update locale names with flag emojis in language selector 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
38 lines
1.1 KiB
TypeScript
38 lines
1.1 KiB
TypeScript
import { FC, Suspense } from 'react';
|
|
import { Main } from '@/app/ui/Main';
|
|
import { AccountForm, AccountFormSkeleton } from '@/app/ui/AccountForm';
|
|
import { getUserProfile } from '@/app/lib/actions/userProfileActions';
|
|
import { useTranslations } from 'next-intl';
|
|
import { getTranslations } from 'next-intl/server';
|
|
|
|
const AccountPage: FC = async () => {
|
|
const profile = await getUserProfile();
|
|
const t = await getTranslations('account-page');
|
|
|
|
return (
|
|
<Main>
|
|
<div className="flex flex-col items-center">
|
|
<h1 className="text-2xl font-bold mb-4">{t('heading')}</h1>
|
|
<AccountForm profile={profile} />
|
|
</div>
|
|
</Main>
|
|
);
|
|
};
|
|
|
|
const Page: FC = () => {
|
|
return (
|
|
<Suspense fallback={
|
|
<Main>
|
|
<div className="flex flex-col items-center">
|
|
<div className="h-8 w-48 skeleton mb-4"></div>
|
|
<AccountFormSkeleton />
|
|
</div>
|
|
</Main>
|
|
}>
|
|
<AccountPage />
|
|
</Suspense>
|
|
);
|
|
};
|
|
|
|
export default Page;
|