Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 15x 15x 15x 15x 15x 15x 15x 15x 15x 15x 5x 5x 5x 5x 5x 5x 5x 5x 5x 15x 15x 15x 3x 3x 3x 3x 3x 3x 3x 3x 3x 15x 15x 15x 15x 15x 15x 15x 15x 15x 15x 15x 15x 15x 15x 15x | "use client";
import React from "react";
import ProfileForm from "./ProfileForm";
import PasswordForm from "./PasswordForm";
import { UserProfile, UsePasswordChangeReturn, UserMessage } from "@/types/user";
interface AccountDetailsTabProps {
userProfile: UserProfile | null;
savingProfile: boolean;
profileMessage: UserMessage | null;
onProfileSubmit: (name: string, phone: string | null) => Promise<void>;
passwordChangeProps: UsePasswordChangeReturn;
}
export default function AccountDetailsTab({
userProfile,
savingProfile,
profileMessage,
onProfileSubmit,
passwordChangeProps,
}: AccountDetailsTabProps) {
return (
<div className="xl:max-w-[770px] w-full bg-white dark:bg-gray-800 rounded-xl shadow-1 py-9.5 px-4 sm:px-7.5 xl:px-10">
{profileMessage && (
<div
className={`mb-4 p-4 rounded-md ${
profileMessage.type === "success"
? "bg-green-50 dark:bg-green-900/30 text-green-800 dark:text-green-300"
: "bg-red-50 dark:bg-red-900/30 text-red-800 dark:text-red-300"
}`}
>
{profileMessage.text}
</div>
)}
{passwordChangeProps.passwordMessage && (
<div
className={`mb-4 p-4 rounded-md ${
passwordChangeProps.passwordMessage.type === "success"
? "bg-green-50 dark:bg-green-900/30 text-green-800 dark:text-green-300"
: "bg-red-50 dark:bg-red-900/30 text-red-800 dark:text-red-300"
}`}
>
{passwordChangeProps.passwordMessage.text}
</div>
)}
<ProfileForm
userProfile={userProfile}
savingProfile={savingProfile}
onSubmit={onProfileSubmit}
/>
<PasswordForm
savingPassword={passwordChangeProps.savingPassword}
onSubmit={passwordChangeProps.changePassword}
/>
</div>
);
}
|