Refactor account page to use icon in form title
- Remove redundant page heading from account page - Add AccountCircle icon to AccountForm title - Clean up unused account-page translations - Simplify account page component by moving title to form 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -2,17 +2,13 @@ import { FC, Suspense } from 'react';
|
|||||||
import { Main } from '@/app/ui/Main';
|
import { Main } from '@/app/ui/Main';
|
||||||
import { AccountForm, AccountFormSkeleton } from '@/app/ui/AccountForm';
|
import { AccountForm, AccountFormSkeleton } from '@/app/ui/AccountForm';
|
||||||
import { getUserProfile } from '@/app/lib/actions/userProfileActions';
|
import { getUserProfile } from '@/app/lib/actions/userProfileActions';
|
||||||
import { useTranslations } from 'next-intl';
|
|
||||||
import { getTranslations } from 'next-intl/server';
|
|
||||||
|
|
||||||
const AccountPage: FC = async () => {
|
const AccountPage: FC = async () => {
|
||||||
const profile = await getUserProfile();
|
const profile = await getUserProfile();
|
||||||
const t = await getTranslations('account-page');
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Main>
|
<Main>
|
||||||
<div className="flex flex-col items-center">
|
<div className="flex flex-col items-center">
|
||||||
<h1 className="text-2xl font-bold mb-4">{t('heading')}</h1>
|
|
||||||
<AccountForm profile={profile} />
|
<AccountForm profile={profile} />
|
||||||
</div>
|
</div>
|
||||||
</Main>
|
</Main>
|
||||||
|
|||||||
@@ -6,6 +6,7 @@ import { updateUserProfile } from "../lib/actions/userProfileActions";
|
|||||||
import { useFormState, useFormStatus } from "react-dom";
|
import { useFormState, useFormStatus } from "react-dom";
|
||||||
import { useLocale, useTranslations } from "next-intl";
|
import { useLocale, useTranslations } from "next-intl";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
|
import AccountCircleIcon from "@mui/icons-material/AccountCircle";
|
||||||
|
|
||||||
export type AccountFormProps = {
|
export type AccountFormProps = {
|
||||||
profile: UserProfile | null;
|
profile: UserProfile | null;
|
||||||
@@ -161,7 +162,7 @@ export const AccountForm: FC<AccountFormProps> = ({ profile }) => {
|
|||||||
return (
|
return (
|
||||||
<div className="card card-compact card-bordered min-w-[20em] max-w-[90em] bg-base-100 shadow-s my-1">
|
<div className="card card-compact card-bordered min-w-[20em] max-w-[90em] bg-base-100 shadow-s my-1">
|
||||||
<div className="card-body">
|
<div className="card-body">
|
||||||
<h2 className="card-title">{t("title")}</h2>
|
<h2 className="card-title"><AccountCircleIcon className="w-6 h-6" /> {t("title")}</h2>
|
||||||
<form action={dispatch}>
|
<form action={dispatch}>
|
||||||
<FormFields
|
<FormFields
|
||||||
profile={profile}
|
profile={profile}
|
||||||
|
|||||||
@@ -131,9 +131,6 @@
|
|||||||
"location-name-required": "Relaestate name is required"
|
"location-name-required": "Relaestate name is required"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"account-page": {
|
|
||||||
"heading": "Account Settings"
|
|
||||||
},
|
|
||||||
"account-form": {
|
"account-form": {
|
||||||
"title": "Profile Information",
|
"title": "Profile Information",
|
||||||
"first-name-label": "First Name",
|
"first-name-label": "First Name",
|
||||||
|
|||||||
@@ -130,9 +130,6 @@
|
|||||||
"location-name-required": "Ime nekretnine je obavezno"
|
"location-name-required": "Ime nekretnine je obavezno"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"account-page": {
|
|
||||||
"heading": "Postavke Računa"
|
|
||||||
},
|
|
||||||
"account-form": {
|
"account-form": {
|
||||||
"title": "Podaci o profilu",
|
"title": "Podaci o profilu",
|
||||||
"first-name-label": "Ime",
|
"first-name-label": "Ime",
|
||||||
|
|||||||
Reference in New Issue
Block a user