removed profile redux items

src/components/profile/ProfileAvatar/index.tsx

@@ -0,0 +1,45 @@
+import React, { ChangeEvent, FC, useCallback } from 'react';
+import styles from './styles.module.scss';
+import { getURL } from '~/utils/dom';
+import { PRESETS } from '~/constants/urls';
+import { Icon } from '~/components/input/Icon';
+import { IFile } from '~/redux/types';
+
+export interface ProfileAvatarProps {
+  canEdit: boolean;
+  photo?: IFile;
+  onChangePhoto: (file: File) => void;
+}
+
+const ProfileAvatar: FC<ProfileAvatarProps> = ({ photo, onChangePhoto, canEdit }) => {
+  const onInputChange = useCallback(
+    async (event: ChangeEvent<HTMLInputElement>) => {
+      if (!event.target.files?.length) {
+        return;
+      }
+
+      onChangePhoto(event.target.files[0]);
+    },
+    [onChangePhoto]
+  );
+
+  const backgroundImage = photo ? `url("${getURL(photo, PRESETS.avatar)}")` : undefined;
+
+  return (
+    <div
+      className={styles.avatar}
+      style={{
+        backgroundImage,
+      }}
+    >
+      {canEdit && <input type="file" onInput={onInputChange} />}
+      {canEdit && (
+        <div className={styles.can_edit}>
+          <Icon icon="photo_add" />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export { ProfileAvatar };

src/components/profile/ProfileAvatar/styles.module.scss

@@ -0,0 +1,55 @@
+@import "src/styles/variables";
+
+.avatar {
+  @include outer_shadow();
+
+  border-radius: $radius;
+  width: 100px;
+  height: 100px;
+  background: $content_bg 50% 50% no-repeat;
+  background-size: cover;
+  position: absolute;
+  bottom: 0;
+  left: $gap;
+  cursor: pointer;
+
+  input {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+  }
+
+  &:hover {
+    svg {
+      fill: $red;
+    }
+  }
+}
+
+.can_edit {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  touch-action: none;
+  // background: red;
+  display: flex;
+  align-items: flex-end;
+  justify-content: flex-end;
+  padding: $gap / 2;
+  box-sizing: border-box;
+  background: linear-gradient(330deg, $content_bg, transparentize($content_bg, 1));
+  border-radius: $radius;
+
+  svg {
+    width: 32px;
+    height: 32px;
+    fill: white;
+    transition: fill 0.25s;
+  }
+}