-
-
-
+
+
+
+
+
+
+
+
-
)
diff --git a/packages/client/src/components/common/Modal/Modal.scss b/packages/client/src/components/common/Modal/Modal.scss
new file mode 100644
index 0000000..a79a914
--- /dev/null
+++ b/packages/client/src/components/common/Modal/Modal.scss
@@ -0,0 +1,89 @@
+@import '../../../scss/vars.scss';
+
+$border-radius: 8px;
+$border-color: #70842f;
+$outline-gradient: linear-gradient(to left, #5e5e5e, #414243);
+
+.modal {
+ display: none;
+ justify-content: center;
+ align-items: center;
+ position: fixed;
+ inset: 0;
+ background: $overlay-color;
+ z-index: 20;
+
+ &_show {
+ display: flex;
+ }
+
+ &__close-btn {
+ background: none;
+ outline: none;
+ border: none;
+ cursor: pointer;
+ padding: 0;
+
+ position: absolute;
+ right: -24px;
+ top: -24px;
+ }
+
+ &__content {
+ position: relative;
+ padding: 12px;
+ border-radius: $border-radius;
+ min-width: 200px;
+ min-height: 200px;
+ max-width: 500px;
+
+ &::before {
+ content: '';
+ position: absolute;
+ inset: 0;
+ border-radius: $border-radius;
+ background: $outline-gradient;
+ z-index: -1;
+ }
+
+ &::after {
+ content: '';
+ position: absolute;
+ inset: 7px;
+ border: 2px solid $border-color;
+ border-radius: 4px;
+ background: $c_black;
+ z-index: -1;
+ }
+ }
+
+ &__decor {
+ position: absolute;
+ inset: 0;
+ z-index: -1;
+
+ @mixin borderDecorSettings($top, $bottom) {
+ content: '';
+ position: absolute;
+ top: $top;
+ bottom: $bottom;
+ left: 0;
+ right: 0;
+ height: 8px;
+
+ background: url('@/assets/images/svg/title-decor.svg') no-repeat center
+ center;
+ background-size: contain;
+ }
+
+ &::before {
+ @include borderDecorSettings(0, auto);
+ }
+
+ &::after {
+ @include borderDecorSettings(auto, 0);
+
+ transform: rotate(180deg);
+ }
+ }
+}
diff --git a/packages/client/src/components/common/Modal/Modal.tsx b/packages/client/src/components/common/Modal/Modal.tsx
new file mode 100644
index 0000000..0f9db62
--- /dev/null
+++ b/packages/client/src/components/common/Modal/Modal.tsx
@@ -0,0 +1,53 @@
+import { Icon } from '@/components/ui/Icon/Icon'
+import './Modal.scss'
+import ReactDOM from 'react-dom'
+import { useEffect } from 'react'
+
+type ModalPropsType = {
+ show: boolean
+ onClose: () => void
+ width?: number | null
+ height?: number | null
+ children: React.ReactNode
+}
+
+export const Modal = (props: ModalPropsType) => {
+ const { children, onClose, show = false, width = null, height = null } = props
+ const modalRoot = document.getElementById('modal-root') || document.body
+
+ useEffect(() => {
+ const handleEscape = (event: KeyboardEvent) => {
+ event.preventDefault()
+
+ if (event.key === 'Escape') {
+ onClose()
+ }
+ }
+
+ document.addEventListener('keydown', handleEscape)
+
+ return () => {
+ document.removeEventListener('keydown', handleEscape)
+ }
+ }, [onClose])
+
+ return ReactDOM.createPortal(
+
+
e.stopPropagation()}
+ style={{
+ width: width ? `${width}px` : '',
+ height: height ? `${height}px` : '',
+ }}>
+
+
+
+ {children}
+
+
,
+ modalRoot
+ )
+}
diff --git a/packages/client/src/components/ui/Avatar/Avatar.scss b/packages/client/src/components/ui/Avatar/Avatar.scss
new file mode 100644
index 0000000..5052582
--- /dev/null
+++ b/packages/client/src/components/ui/Avatar/Avatar.scss
@@ -0,0 +1,59 @@
+@import '../../../scss/vars.scss';
+
+.avatar {
+ width: 160px;
+ max-width: 100%;
+ height: 158px;
+ max-height: 100%;
+ position: relative;
+
+ &__image,
+ &__image-placeholder {
+ border-radius: 50%;
+ border: 5px solid $c_avatar-border-color;
+ width: inherit;
+ height: inherit;
+ }
+
+ &__overlay {
+ opacity: 0;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background-color: $c_overlay-background;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ transition: opacity 0.3s ease;
+ border-radius: 50%;
+
+ &:hover {
+ opacity: 1;
+ }
+ }
+
+ &:hover {
+ .overlay {
+ opacity: 1;
+ }
+ }
+
+ &__change-button {
+ border: none;
+ color: white;
+ font-size: 14px;
+ font-weight: bold;
+ text-transform: uppercase;
+ cursor: pointer;
+ padding: 8px 16px;
+ border-radius: 20px;
+ background-color: $c_overlay-background;
+ transition: background-color 0.3s ease;
+
+ &:hover {
+ background-color: $c_overlay-background-hover;
+ }
+ }
+}
diff --git a/packages/client/src/components/ui/Avatar/Avatar.tsx b/packages/client/src/components/ui/Avatar/Avatar.tsx
new file mode 100644
index 0000000..8c2291e
--- /dev/null
+++ b/packages/client/src/components/ui/Avatar/Avatar.tsx
@@ -0,0 +1,70 @@
+import './Avatar.scss'
+import React, { useState, useRef, useEffect } from 'react'
+import { Image } from '@/components/ui/Image/Image'
+import AvatarPlaceholder from '@/assets/images/avatar-placeholder.png'
+
+export const AVATAR_SRC = import.meta.env.VITE_SRC_URL
+
+export const Avatar = (props: {
+ src: string
+ containerClassName?: string
+ imageClassName?: string
+ onChange: (file: File) => void
+}) => {
+ const { src, containerClassName, imageClassName, onChange } = props
+ const [previewUrl, setPreviewUrl] = useState
(null)
+ const fileInputRef = useRef(null)
+
+ useEffect(() => {
+ return () => {
+ if (previewUrl) {
+ URL.revokeObjectURL(previewUrl)
+ }
+ }
+ }, [previewUrl])
+
+ const handleFileChange = (event: React.ChangeEvent) => {
+ const file = event.target.files?.[0]
+ if (file) {
+ const fileUrl = URL.createObjectURL(file)
+ setPreviewUrl(fileUrl)
+ onChange(file)
+ }
+ }
+
+ const handleButtonClick = () => {
+ fileInputRef.current?.click()
+ }
+
+ const displaySrc = previewUrl || src
+
+ return (
+
+ {displaySrc ? (
+
+ ) : (
+
+ )}
+
+
+
+
+