Merge pull request #166 from Barresi/feature/profile-dev

feature/profile-dev

src/entities/row-friends/ui/row-friends.tsx

@@ -16,7 +16,7 @@ const RowFriends: FC<IRowFriendsProps> = ({ avatars }) => {
     'mr-[-20px] z-[90]',
     'mr-[-20px] z-[80]',
     'mr-[-20px] z-[70]',
-    'mr-[-0px] z-[60]'
+    'mr-[-20px] z-[60]'
   ]
 
   const renderImg = (avatars: string[]): JSX.Element[] => {
@@ -33,10 +33,10 @@ const RowFriends: FC<IRowFriendsProps> = ({ avatars }) => {
   }
 
   return (
-    <div className='my-[20px] px-[20px] py-[10px] rounded-[10px] border border-[#f2f2f2] flex items-center justify-between'>
+    <div className='w-full px-[20px] py-[10px] rounded-[10px] border border-smokyWhite dark:border-cadet flex items-center justify-between'>
       <span>{avatars.length} друзей</span>
 
-      <div className='flex items-center mr-[20px] lg:mr-0'>
+      <div className='flex items-center mr-5'>
         {renderImg(
           avatars.slice(0, avatars.length > maxCount ? maxCount : avatars.length)
         )}

src/pages/page-profile/ui/card-profile-desc.tsx

@@ -0,0 +1,26 @@
+import { type FC } from 'react'
+
+import CalenderIcon from './svg/Calendar.svg'
+import LoacationIcon from './svg/Location Point.svg'
+import UserIcon from './svg/User.svg'
+import BankIcon from './svg/bank.svg'
+
+const desc = [
+  { text: 'Москва', icon: LoacationIcon },
+  { text: 'Мужской', icon: UserIcon },
+  { text: 'overcast', icon: BankIcon },
+  { text: '20.05.1995', icon: CalenderIcon }
+]
+
+const CardProfileDesc: FC = () => {
+  return (
+    <div className={'flex flex-wrap gap-[10px] xxl:flex-col'}>
+      {desc.map((item, ind) => (
+        <p key={ind} className='flex gap-[5px] text-[16px]'>
+          <img src={item.icon} /> {item.text}
+        </p>
+      ))}
+    </div>
+  )
+}
+export { CardProfileDesc }

src/pages/page-profile/ui/card-profile-mobile.tsx

@@ -0,0 +1,42 @@
+import { RowFriends } from '@entities/row-friends'
+import { Button } from '@shared/ui/button'
+import { UserAvatar } from '@shared/ui/user-avatar'
+import { type FC } from 'react'
+import { CardProfileDesc } from './card-profile-desc'
+
+import avatarLight from '@assets/avatar/default avatar light.svg'
+
+const CardProfileMobile: FC = () => {
+  return (
+    <div className='block xxl:hidden relative bg-white dark:bg-grayBlue p-[30px] rounded-[10px]'>
+      <div className='flex flex-row justify-between'>
+        <div className='flex flex-row justify-start w-full'>
+          <UserAvatar className='absolute w-[170px] sm:w-[200px] h-[170px] sm:h-[200px] sm:mr-[15px] inset-x-0 sm:inset-auto mx-auto top-[-100px] sm:left-[20px] sm:top-[-85px]' />
+          <div className='mt-[50px] mx-auto sm:mt-auto sm:mx-0 sm:ml-[200px]'>
+            <h4 className='text-[32px] mb-[0] sm:mb-[10px] text-center sm:text-start'>
+              Борис Маслов
+            </h4>
+            <div className='block sm:hidden mt-[20px] w-full mb-[20px]'>
+              Я - опытный UX/UI дизайнер с более чем 4-летним стажем работы в этой
+              области.
+            </div>
+            <CardProfileDesc />
+          </div>
+        </div>
+        <div className='hidden sm:block'>
+          <Button icon={'edit'} iconPos='left' variant='secondary' />
+        </div>
+      </div>
+      <div className='w-full mt-[30px] gap-[20px] flex items-center flex-col lg:flex-row'>
+        <div className='hidden sm:block w-full'>
+          Я - опытный UX/UI дизайнер с более чем 4-летним стажем работы в этой области.
+        </div>
+        <RowFriends avatars={[avatarLight, avatarLight, avatarLight]} />
+      </div>
+      <Button className='mt-[20px] block sm:hidden' variant={'secondary'}>
+        Редактировать
+      </Button>
+    </div>
+  )
+}
+export { CardProfileMobile }

src/pages/page-profile/ui/card-profile.tsx

@@ -0,0 +1,33 @@
+import { RowFriends } from '@entities/row-friends'
+import { Button } from '@shared/ui/button'
+import { UserAvatar } from '@shared/ui/user-avatar'
+import { type FC } from 'react'
+
+import avatarLight from '@assets/avatar/default avatar light.svg'
+import { CardProfileDesc } from './card-profile-desc'
+
+const CardProfile: FC = () => {
+  return (
+    <div className='hidden xxl:block w-[544px]'>
+      <div className='bg-white dark:bg-grayBlue xl:p-[30px] rounded-[10px] flex flex-col gap-[20px]'>
+        <div className='flex flex-row justify-between'>
+          <div className='flex flex-row justify-start w-full'>
+            <UserAvatar className='w-[150px] h-[150px] mr-[15px]' />
+            <div className='grid gap-[10px]'>
+              <h4 className='text-[32px]'>Борис Маслов</h4>
+              <CardProfileDesc />
+            </div>
+          </div>
+          <div>
+            <Button icon='edit' iconPos='left' variant='secondary' />
+          </div>
+        </div>
+        <RowFriends avatars={[avatarLight, avatarLight]} />
+        <div>
+          Я - опытный UX/UI дизайнер с более чем 4-летним стажем работы в этой области.
+        </div>
+      </div>
+    </div>
+  )
+}
+export { CardProfile }

src/pages/page-profile/ui/page-profile.tsx

@@ -1,17 +1,34 @@
-import { selectUser } from '@app/store/reducers/profileInfo/selectors'
-import { useAppSelector } from '@shared/lib/hooks/store-hooks'
+import { Banner } from '@shared/ui/banner'
+import { InputSendMessage } from '@shared/ui/input-send-message'
 import { type FC } from 'react'
+import { CardProfile } from './card-profile'
+import { CardProfileMobile } from './card-profile-mobile'
+import { PostNews } from './post-news'
 
-const PageProfile: FC = () => {
-  const user = useAppSelector(selectUser)
+import avatarLight from '@assets/avatar/default avatar light.svg'
 
+const PageProfile: FC = () => {
   return (
     <div>
-      <h1>
-        name: {user?.firstName} {user?.lastName}
-      </h1>
-      <h1>email: {user?.email}</h1>
-      <h1>id: {user?.id}</h1>
+      <div className='w-full flex flex-col xl:flex-row-reverse justify-between gap-[20px] lg:gap-[30px] lg:mb-[20px] px-[20px] lg:px-0'>
+        <CardProfile />
+        <div className='w-full xxl:w-2/3 rounded-[10px] grid gap-[20px] xl:gap-[30px]'>
+          <Banner className='h-[180px] sm:h-auto' />
+          {/* mobile user info */}
+          <CardProfileMobile />
+
+          <InputSendMessage
+            avatar={avatarLight}
+            sendMessage={() => {}}
+            placeholder='Что у вас нового?'
+            className='border-none'
+          />
+
+          <PostNews />
+          <PostNews />
+          <PostNews />
+        </div>
+      </div>
     </div>
   )
 }

src/pages/page-profile/ui/post-news.tsx

@@ -0,0 +1,79 @@
+import { Button } from '@shared/ui/button'
+import { UserAvatar } from '@shared/ui/user-avatar'
+import { type FC, type ReactNode } from 'react'
+
+import icon1 from './svg/icon1.svg'
+
+import EyeIcon from './svg/Eye.svg'
+
+import { ButtonAction } from '@shared/ui/button-action'
+import { InputSendMessage } from '@shared/ui/input-send-message'
+import Image1 from './image/image.png'
+
+interface IPostNewsProps {
+  children?: ReactNode
+  className?: string
+}
+const PostNews: FC<IPostNewsProps> = () => {
+  return (
+    <div className='w-full bg-white dark:bg-grayBlue rounded-[10px] p-[30px] grid gap-[20px]'>
+      <div className='flex flex-row justify-between'>
+        <div className='flex flex-row justify-start w-full'>
+          <UserAvatar className='w-[50px] h-[50px] mr-[15px]' />
+          <div>
+            <h4 className='text-[#D22828] text-[18px] font-bold'>Борис Маслов</h4>
+            <p className='text-[#ADB5BD]'>21 окт. в 13:11</p>
+          </div>
+        </div>
+        <div>
+          <Button variant='text'>
+            <img src={icon1} />
+          </Button>
+        </div>
+      </div>
+      <p>
+        15 октября прошёл финал онлайн-хакатона VTB API hackathon 2022, я принял в нем
+        участие, участвовал впервые. Наша команда в составе 3-ёх человек заняла 7 место.
+        Было 2 задачи:
+        <br /> <br />
+        1 Создайте продукты на основе API <br /> 2 Разработайте инструменты обеспечения
+        безопасности API <br />
+        <span className='text-[#20B5EE]'>Показать полностью</span>
+      </p>
+      <div className='grid grid-rows-1 grid-flow-col gap-3 md:h-[500px]'>
+        <div>
+          <img className='h-full object-cover rounded-[10px]' src={Image1} />
+        </div>
+        <div className='hidden md:grid md:gap-3'>
+          <img className='h-full object-cover rounded-[10px]' src={Image1} />
+          <img className='h-full object-cover rounded-[10px]' src={Image1} />
+        </div>
+      </div>
+      <div className='flex flex-row justify-between items-center'>
+        <div className='flex flex-row gap-[2px] md:gap-[10px]'>
+          <ButtonAction icon='like'>10</ButtonAction>
+          <ButtonAction icon='comment'>10</ButtonAction>
+          <ButtonAction icon='share'>10</ButtonAction>
+        </div>
+        <div>
+          <p className='flex flex-row'>
+            <img className='mr-1' src={EyeIcon} /> 1
+          </p>
+        </div>
+      </div>
+      <hr />
+      <div className='flex flex-row justify-start w-full'>
+        <UserAvatar className='w-[50px] h-[50px] mr-[15px]' />
+        <div>
+          <h4 className='text-[#D22828] text-[18px] font-bold'>Борис Маслов</h4>
+          <p className='text-[16px]'>Классное фото</p>
+          <p className='text-[#ADB5BD] text-[15px]'>
+            21 окт. в 13:11 <span className='text-[#55677D]'>Ответить</span>
+          </p>
+        </div>
+      </div>
+      <InputSendMessage sendMessage={() => {}} placeholder='Написать сообщение...' />
+    </div>
+  )
+}
+export { PostNews }

src/pages/page-registration/ui/page-registration.tsx

@@ -12,6 +12,10 @@ import { type FC } from 'react'
 import { useForm, type SubmitHandler } from 'react-hook-form'
 import { useNavigate } from 'react-router-dom'
 
+interface IFormInputs extends IRegistrationForm {
+  confirmPassword: string
+}
+
 const PageRegistration: FC = () => {
   const { toast } = useToast()
   const dispatch = useAppDispatch()
@@ -22,10 +26,17 @@ const PageRegistration: FC = () => {
     handleSubmit,
     watch,
     formState: { errors }
-  } = useForm<IRegistrationForm>({ mode: 'onSubmit' })
+  } = useForm<IFormInputs>({ mode: 'onSubmit' })
+
+  const onSubmit: SubmitHandler<IFormInputs> = async (data) => {
+    const payload: IRegistrationForm = {
+      firstName: data.firstName,
+      lastName: data.lastName,
+      email: data.email,
+      password: data.password
+    }
 
-  const onSubmit: SubmitHandler<IRegistrationForm> = async (data) => {
-    await dispatch(registrationThunk(data)).then((data) => {
+    await dispatch(registrationThunk(payload)).then((data) => {
       if (data.meta.requestStatus === 'fulfilled') {
         navigate('/')
         toast({

src/shared/lib/reg-exp.ts

@@ -1,4 +1,4 @@
 export const passwordRegExp = /^[a-zA-Z!@#-_=+$%()/.,`^&*\d]+$/
 export const emailRegExp = /^(?=.{1,256}$)[\w-.]+@([\w-]+\.)+[\w-]{2,4}$/
 export const usernameRegExp = /^[a-zA-Z0-9_-]+$/
-export const nameRegExp = /^[а-яА-Яa-zA-Z]+$/u
+export const nameRegExp = /^[а-яА-ЯёЁa-zA-Z]+$/u

src/shared/lib/types/forms.ts

@@ -7,7 +7,6 @@ export interface IRegistrationForm {
   lastName: string
   email: string
   password: string
-  confirmPassword: string
 }
 export interface IEditUserInfoForm {
   username?: 'string'

src/shared/ui/banner.tsx

@@ -0,0 +1,20 @@
+import { cn } from '@shared/lib/merge-classes'
+import { type FC } from 'react'
+
+import banner from '@assets/banner/default user banner.jpg'
+
+interface IBannerProps {
+  className?: string
+}
+
+const Banner: FC<IBannerProps> = ({ className }) => {
+  return (
+    <img
+      src={banner}
+      alt='banner'
+      className={cn('w-[100%] object-cover rounded-[6px]', className)}
+    />
+  )
+}
+
+export { Banner }

src/shared/ui/dialog.tsx

@@ -35,7 +35,7 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        'fixed left-[50%] top-[50%] z-50 w-full max-w-[552px] translate-x-[-50%] translate-y-[-50%] shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]',
+        'fixed left-[50%] top-[50%] z-50 w-full max-w-[552px] translate-x-[-50%] translate-y-[-50%] duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]',
         className
       )}
       {...props}