48 lines
1.5 KiB
TypeScript
48 lines
1.5 KiB
TypeScript
import { mdiCheckDecagram } from '@mdi/js';
|
|
import { Field, Form, Formik } from 'formik';
|
|
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) => {
|
|
const userName = useAppSelector((state) => state.main.userName);
|
|
|
|
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>
|
|
<p>
|
|
Last login <b>12 mins ago</b> from <b>127.0.0.1</b>
|
|
</p>
|
|
<div className='flex justify-center md:block'>Verified</div>
|
|
</div>
|
|
</div>
|
|
</CardBox>
|
|
);
|
|
};
|
|
|
|
export default UserCard;
|