Develop

client/src/app/(main)/[username]/profile/layout.module.scss

@@ -0,0 +1,55 @@
+
+.container {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  position: relative;
+  @media (max-width: 790px) {
+  position: unset;
+  }
+  .body {
+    width: 100%;
+  }
+}
+
+.back {
+  position: absolute;
+
+  left: 0;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  &:hover {
+    opacity: .7;
+    transition: .3s;
+  }
+
+  @media (max-width: 790px) {
+    top: 46px;
+    right: 15px;
+    left: unset;
+  }
+}
+
+.profile_row {
+  @media (max-width: 1045px) {
+    flex-direction: column;
+    width: 100%;
+    & > div {
+      width: 100%;
+    }
+  }
+}
+
+.sm_card {
+  width: 40%;
+}
+
+.lg_card {
+  width: 60%;
+}
+
+.list_card {
+  width: 40%;
+  gap: 18px;
+}

client/src/app/(main)/[username]/profile/layout.tsx

@@ -0,0 +1,24 @@
+'use client';
+import styles from './layout.module.scss';
+import { Flex, Typography } from '@/shared/ui';
+import { ArrowLeftIcon, LogoBig } from '@/shared/assets';
+import { useRouter } from 'next/navigation';
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  const router = useRouter();
+
+  return (
+    <div className={styles.container}>
+      <Flex direction={'column'} width={'100%'} gap={'30px'}>
+        <button onClick={router.back} className={styles.back}>
+          <ArrowLeftIcon />
+          <Typography>Back</Typography>
+        </button>
+        <Flex justify='center'>
+          <LogoBig />
+        </Flex>
+        {children}
+      </Flex>
+    </div>
+  );
+}

client/src/app/(main)/[username]/profile/lib/profile-context.ts

@@ -0,0 +1,3 @@
+import { createContext } from 'react';
+
+export const ProfileContext = createContext(false);

client/src/app/(main)/[username]/profile/lib/useGetUserByName.ts

@@ -0,0 +1,8 @@
+import { useGetUsers } from '@/entities/session';
+import { IUserResponse } from '@teameights/types';
+
+export const useGetUserByName = (username: string): { data: IUserResponse | undefined } => {
+  const users = useGetUsers(JSON.stringify({ username: username }));
+
+  return { data: users?.data?.pages[0]?.data[0] };
+};

client/src/app/(main)/[username]/profile/page.tsx

@@ -0,0 +1,46 @@
+'use client';
+import styles from './layout.module.scss';
+import { useGetMe } from '@/entities/session';
+import { Header } from './ui/header/header';
+import { CardSkeleton, Flex } from '@/shared/ui';
+import { List } from './ui/list/list';
+import { About } from './ui/about/about';
+import { useParams } from 'next/navigation';
+import { Friends } from './ui/friends/friends';
+import { Fields } from './ui/fields/fields';
+import { useGetUserByName } from './lib/useGetUserByName';
+import { ProfileContext } from './lib/profile-context';
+
+export default function Page() {
+  const { data: me } = useGetMe();
+  const { username } = useParams();
+  const { data: user } = useGetUserByName(username as string);
+  const isMyProf = me?.username === username;
+
+  let body = (
+    <Flex direction='column' gap='30px'>
+      <CardSkeleton borderRadius={15} width={'100%'} height={'227px'} />
+      <CardSkeleton borderRadius={15} width={'100%'} height={'227px'} />
+    </Flex>
+  );
+
+  if (user) {
+    body = (
+      <>
+        <Header />
+        <Flex padding='0 0 48px 0' direction='column' gap='30px'>
+          <Flex className={styles.profile_row} gap='30px'>
+            <List />
+            <About />
+          </Flex>
+          <Flex className={styles.profile_row} gap='30px'>
+            <Friends />
+            <Fields />
+          </Flex>
+        </Flex>
+      </>
+    );
+  }
+
+  return <ProfileContext.Provider value={isMyProf}> {body} </ProfileContext.Provider>;
+}

client/src/app/(main)/[username]/profile/ui/about/about.module.scss

@@ -0,0 +1,3 @@
+.container {
+
+}

client/src/app/(main)/[username]/profile/ui/about/about.tsx

@@ -0,0 +1,58 @@
+import { Card } from '../card/card';
+import { Flex, Typography } from '@/shared/ui';
+import { GithubIcon } from '@/shared/assets/icons/github-icon';
+import { BehanceIcon } from '@/shared/assets/icons/behance';
+import { TelegramIcon } from '@/shared/assets/icons/telegram';
+import { LinkedinIcon } from '@/shared/assets/icons/linkedin';
+import { useParams } from 'next/navigation';
+import { useGetUserByName } from '../../lib/useGetUserByName';
+import styles from '../../layout.module.scss';
+
+export const About = () => {
+  const { username } = useParams();
+  const { data: user } = useGetUserByName(username as string);
+
+  const linksPresent = user?.links && Object.keys(user.links).length;
+  const descPresent = typeof user?.description === 'string';
+  return (
+    <Card className={styles.lg_card}>
+      <Flex direction='column' gap='24px' height='100%'>
+        <Typography size={'heading_s'} color={'greenBright'}>
+          About
+        </Typography>
+        {!descPresent && (
+          <Typography size={'body_s'} color={'greyNormal'}>
+            No description added.
+          </Typography>
+        )}
+        <Flex flex={1}>
+          {descPresent && <Typography size={'body_s'}>{user?.description}</Typography>}
+        </Flex>
+        {linksPresent && (
+          <Flex align={'center'} gap={24}>
+            {user?.links?.github && (
+              <a target='_blank' href={user.links.github}>
+                <GithubIcon width={28} />
+              </a>
+            )}
+            {user?.links?.behance && (
+              <a target='_blank' href={user.links.behance}>
+                <BehanceIcon width={28} />
+              </a>
+            )}
+            {user?.links?.telegram && (
+              <a target='_blank' href={user.links.telegram}>
+                <TelegramIcon width={28} />
+              </a>
+            )}
+            {user?.links?.linkedIn && (
+              <a target='_blank' href={user.links.linkedIn}>
+                <LinkedinIcon width={28} />
+              </a>
+            )}
+          </Flex>
+        )}
+      </Flex>
+    </Card>
+  );
+};

client/src/app/(main)/[username]/profile/ui/card/card.module.scss

@@ -0,0 +1,6 @@
+.card {
+  background: rgba(26, 28, 34, 1);
+  border-radius: 15px;
+  overflow: hidden;
+  padding: 32px;
+}

client/src/app/(main)/[username]/profile/ui/card/card.tsx

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+import styles from './card.module.scss';
+import clsx from 'clsx';
+
+interface CardProps {
+  children: ReactNode;
+  className?: string;
+  borderRadius?: string;
+}
+
+export const Card = ({ children, className }: CardProps) => {
+  const cls = clsx(styles.card, className);
+  return <div className={cls}>{children}</div>;
+};

client/src/app/(main)/[username]/profile/ui/fields/education.tsx

@@ -0,0 +1,35 @@
+import { Flex, Typography } from '@/shared/ui';
+import { useParams } from 'next/navigation';
+import { useGetUserByName } from '../../lib/useGetUserByName';
+
+export const Education = () => {
+  const { username } = useParams();
+  const { data: user } = useGetUserByName(username as string);
+  const universities = user?.universities;
+  if (!universities) return <Typography>No information</Typography>;
+  return (
+    <Flex gap='24px' direction='column'>
+      {universities.map((education, i) => {
+        const start = new Date(education.admissionDate).getFullYear();
+        const end = education.graduationDate
+          ? new Date(education.graduationDate).getFullYear()
+          : 'Present';
+        return (
+          <Flex key={i} width={'100%'} justify={'space-between'}>
+            <Flex gap={'8px'} direction={'column'}>
+              <Typography size={'body_m'}>
+                {education.name ?? (education as unknown as { university: string }).university}
+              </Typography>
+              <Typography color={'greyNormal'} size={'body_s'}>
+                {education.degree} in {education.major}
+              </Typography>
+            </Flex>
+            <Typography>
+              {start} - {end}
+            </Typography>
+          </Flex>
+        );
+      })}
+    </Flex>
+  );
+};

client/src/app/(main)/[username]/profile/ui/fields/fields.module.scss

@@ -0,0 +1,16 @@
+.selected {
+  border-bottom: 1px solid #5bd424;
+}
+
+.field_text {
+  transition: 0.3s;
+  transition-property: color;
+}
+
+.fields_container { 
+  min-height: 150px;
+}
+
+.nav_bar {
+  overflow-x: auto;
+}

client/src/app/(main)/[username]/profile/ui/fields/fields.tsx

@@ -0,0 +1,46 @@
+import { Card } from '../card/card';
+import { Flex, Typography } from '@/shared/ui';
+import { useState } from 'react';
+import styles from './fields.module.scss';
+import { Skills } from './skills';
+import { WorkExperience } from './work-experience';
+import { Education } from './education';
+import layoutStyles from '../../layout.module.scss';
+export const Fields = () => {
+  const [field, setField] = useState<keyof typeof fields>('Skills');
+
+  const fields = {
+    Skills: <Skills />,
+    Projects: null,
+    'Work experience': <WorkExperience />,
+    Education: <Education />,
+    Tournaments: null,
+  };
+
+  return (
+    <Card className={layoutStyles.lg_card}>
+      <Flex direction='column' gap='24px' className={styles.fields_container}>
+        <Flex className={styles.nav_bar} gap='16px'>
+          {Object.keys(fields).map(key => {
+            const classProps = field === key ? { className: styles.selected } : {};
+            return (
+              <button
+                onClick={() => setField(key as keyof typeof fields)}
+                {...classProps}
+                key={key}
+              >
+                <Typography
+                  className={styles.field_text}
+                  color={field === key ? 'greenBright' : 'greyNormal'}
+                >
+                  {key}
+                </Typography>
+              </button>
+            );
+          })}
+        </Flex>
+        {fields[field]}
+      </Flex>
+    </Card>
+  );
+};

client/src/app/(main)/[username]/profile/ui/fields/skills.tsx

@@ -0,0 +1,36 @@
+import { BadgeText, Flex, Typography } from '@/shared/ui';
+import { useGetUserByName } from '../../lib/useGetUserByName';
+import { useParams } from 'next/navigation';
+import { BadgeIcon } from '@/shared/ui';
+
+export const Skills = () => {
+  const { username } = useParams();
+  const { data: user } = useGetUserByName(username as string);
+  const skills = {
+    coreTools: {
+      badge: ({ data }: { data: string }) => <BadgeIcon data={data} isActive={true} />,
+      title: 'Core Tools',
+    },
+    additionalTools: {
+      badge: BadgeText,
+      title: 'Additional Tools',
+    },
+  };
+  return (
+    <Flex gap='24px' direction='column'>
+      {user!.skills &&
+        Object.entries(skills).map(skill => {
+          const skillName = skill[0] as keyof typeof skills;
+          const Badge = skills[skillName].badge;
+          return (
+            <Flex key={skillName} direction='column' gap='8px'>
+              <Typography>{skills[skillName].title}</Typography>
+              <Flex wrap='wrap' gap='8px'>
+                {user?.skills![skillName]?.map((lang: string) => <Badge key={lang} data={lang} />)}
+              </Flex>
+            </Flex>
+          );
+        })}
+    </Flex>
+  );
+};