From a8bb314a96078c5e6a796287e4f0dd4443af771d Mon Sep 17 00:00:00 2001 From: danilych Date: Sat, 10 Feb 2024 21:17:47 +0100 Subject: [PATCH] feat(profile): implement layout for 'my profile' page --- app/routes/my-account._index.tsx | 106 ++++++++++++++++++++++++++++++- app/shared/Typo/header-4.tsx | 20 ++++++ app/shared/index.ts | 2 + assets/images/empty-avatar.png | Bin 0 -> 6964 bytes assets/images/index.ts | 1 + 5 files changed, 128 insertions(+), 1 deletion(-) create mode 100644 app/shared/Typo/header-4.tsx create mode 100644 assets/images/empty-avatar.png diff --git a/app/routes/my-account._index.tsx b/app/routes/my-account._index.tsx index 0ba3796..2388354 100644 --- a/app/routes/my-account._index.tsx +++ b/app/routes/my-account._index.tsx @@ -1,7 +1,17 @@ import { type V2_MetaFunction } from '@remix-run/node' +import { EmptyAvatar } from 'assets/images' +import { Textarea } from 'flowbite-react' import { useEffect } from 'react' import { useSelector } from 'react-redux' import { selectIsAuth } from '~/redux/slices/auth' +import { + Divider, + Header3, + Header4, + RoundedOutput, + Text, + TransparentButton, +} from '~/shared' import { AccountMenu } from '~/widgets' export const meta: V2_MetaFunction = () => { @@ -18,8 +28,102 @@ export default function MyAccount() { }, []) return ( -
+
+ +
+ Налаштування профілю + + Аватар + + + Формати: jpg, png, gif. Максимальний розмір: 1 МБ.{' '} + + +
+ + + + Завантажити фото + +
+ + + + Особиста інформація + + + Ваше облікове ім’я, яке відображається на сайті. + + +
+
+

Ім’я

+ +
+ Марія +
+
+ +
+

+ Прізвище +

+ +
+ Струц +
+
+ +
+

Нікнейм

+ +
+ Maricka123 +
+
+
+ +
+
+

+ Номер телефону +

+ +
+ +38 +
+
+ +
+

+ Дата народження +

+ +
+ 18.01.1999 +
+
+ +
+

Пароль

+ +
+ ************ +
+
+
+ + + + Декілька слів про себе + + + Розкажіть учням про свою освіту, або про досвід роботи у галузі. + + + +
) } diff --git a/app/shared/Typo/header-4.tsx b/app/shared/Typo/header-4.tsx new file mode 100644 index 0000000..e39b866 --- /dev/null +++ b/app/shared/Typo/header-4.tsx @@ -0,0 +1,20 @@ +import type { ReactNode } from 'react' +import clsx from 'clsx' + +interface Props { + children?: ReactNode + className?: string +} + +export function Header4({ children, className }: Props) { + return ( +

+ {children} +

+ ) +} diff --git a/app/shared/index.ts b/app/shared/index.ts index 72610e1..6f87f03 100644 --- a/app/shared/index.ts +++ b/app/shared/index.ts @@ -1,5 +1,6 @@ export * from './Inputs/rounded-input' export * from './Inputs/transparent-input' +export * from './Output/rounded-output' export * from './Button/filled-button' export * from './Button/transparent-button' export * from './Button/menu-button' @@ -7,6 +8,7 @@ export * from './Typo/text' export * from './Typo/text-medium' export * from './Typo/header-2' export * from './Typo/header-3' +export * from './Typo/header-4' export * from './divider' export * from './tag' diff --git a/assets/images/empty-avatar.png b/assets/images/empty-avatar.png new file mode 100644 index 0000000000000000000000000000000000000000..ef314aae271a287f61202b99ff0117ac5b6908cf GIT binary patch literal 6964 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 literal 0 HcmV?d00001 diff --git a/assets/images/index.ts b/assets/images/index.ts index af854da..aace6c1 100644 --- a/assets/images/index.ts +++ b/assets/images/index.ts @@ -9,3 +9,4 @@ export { default as Advantages2 } from './advantages-2.png' export { default as Advantages3 } from './advantages-3.png' export { default as JoinUsImage } from './join-us.png' export { default as AddImageCover } from './add-image-cover.png' +export { default as EmptyAvatar } from './empty-avatar.png'