53 lines
1.7 KiB
TypeScript
53 lines
1.7 KiB
TypeScript
import { mdiCheckDecagram } from '@mdi/js';
|
|
import { Field, Form, Formik } from 'formik';
|
|
import { useMemo } from 'react';
|
|
import { useAppSelector } from '../stores/hooks';
|
|
import CardBox from './CardBox';
|
|
import FormCheckRadio from './FormCheckRadio';
|
|
import UserAvatarCurrentUser from './UserAvatarCurrentUser';
|
|
|
|
type Props = {
|
|
className?: string;
|
|
};
|
|
|
|
const UserCard = ({ className }: Props) => {
|
|
// Get user data from authSlice.currentUser (single source of truth)
|
|
const { currentUser } = useAppSelector((state) => state.auth);
|
|
|
|
const userName = useMemo(() => {
|
|
if (!currentUser) return '';
|
|
const firstName = currentUser.firstName || '';
|
|
const lastName = currentUser.lastName || '';
|
|
return `${firstName} ${lastName}`.trim() || currentUser.email || '';
|
|
}, [currentUser]);
|
|
|
|
return (
|
|
<CardBox className={className}>
|
|
<div className='flex flex-col lg:flex-row items-center justify-around lg:justify-center'>
|
|
<UserAvatarCurrentUser className='mb-6 lg:mb-0 lg:mx-12' />
|
|
<div className='space-y-3 text-center md:text-left lg:mx-12'>
|
|
<div className='flex justify-center md:block'>
|
|
<Formik
|
|
initialValues={{
|
|
notifications: ['1'],
|
|
}}
|
|
onSubmit={(values) => alert(JSON.stringify(values, null, 2))}
|
|
>
|
|
<Form>
|
|
<FormCheckRadio type='switch' label='Notifications'>
|
|
<Field type='checkbox' name='notifications' value={'1'} />
|
|
</FormCheckRadio>
|
|
</Form>
|
|
</Formik>
|
|
</div>
|
|
<h1 className='text-2xl'>
|
|
Howdy, <b>{userName}</b>!
|
|
</h1>
|
|
</div>
|
|
</div>
|
|
</CardBox>
|
|
);
|
|
};
|
|
|
|
export default UserCard;
|