Feat: tab project in profile page (#33)

Co-authored-by: Ruslan Kutliakhmetov <[email protected]>
habralab · Oct 13, 2023 · a4c400e · a4c400e
1 parent f50cb0c
commit a4c400e
Show file tree

Hide file tree

Showing 23 changed files with 159 additions and 160 deletions.
diff --git a/src/entities/project/card/ui/Card.tsx b/src/entities/project/card/ui/Card.tsx
@@ -1,4 +1,4 @@
-import { SText } from '~/shared/ui/SText';
+import { Heading, Text } from '@chakra-ui/react';
 
 export interface CardProps {
   title: string;
@@ -11,11 +11,13 @@ export const Card = (props: CardProps) => {
 
   return (
     <>
-      <SText variant="h2">{title}</SText>
-      <SText variant="caption">{date}</SText>
-      <SText variant="main" noOfLines={3}>
+      <Heading variant="h2">{title}</Heading>
+      <Text variant="caption" mb={3}>
+        {date}
+      </Text>
+      <Text noOfLines={3} mb={3}>
         {description}
-      </SText>
+      </Text>
     </>
   );
 };
diff --git a/src/entities/user/about-me/AboutMe.tsx b/src/entities/user/about-me/AboutMe.tsx
@@ -1,28 +1,27 @@
-import { Flex } from '@chakra-ui/react';
+import { Box, Heading, Stack, Text } from '@chakra-ui/react';
 
 import { STag } from '~/shared/ui/STag';
-import { SText } from '~/shared/ui/SText';
 
 export function AboutMe() {
   return (
-    <Flex direction="column" bg="white" borderRadius="2xl" p={5} gap={6}>
-      <Flex direction="column" gap={2}>
-        <SText variant="h2">Обо мне</SText>
-        <SText>
+    <Stack bg="white" borderRadius="2xl" p={5} gap={6}>
+      <Box>
+        <Heading variant="h2">Обо мне</Heading>
+        <Text>
           Привет! Меня зовут Татьяна, и я начинающий UX/UI дизайнер, готовый погрузиться в
           мир творчества и пользовательских интерфейсов. Моя страсть к дизайну началась
           давно, и я горжусь тем, что обладаю креативным мышлением и аналитическими
           способностями.
-        </SText>
-      </Flex>
-      <Flex direction="column" gap={2}>
-        <SText variant="h2">Профессия</SText>
+        </Text>
+      </Box>
+      <Box>
+        <Heading variant="h2">Профессия</Heading>
         <STag mainTags={['Дизайнер', 'UX/UI дизайнер']} />
-      </Flex>
-      <Flex direction="column" gap={2}>
-        <SText variant="h2">Навыки</SText>
+      </Box>
+      <Box>
+        <Heading variant="h2">Навыки</Heading>
         <STag tags={['UX', 'UI', 'Figma']} />
-      </Flex>
-    </Flex>
+      </Box>
+    </Stack>
   );
 }
diff --git a/src/entities/user/avatar/Avatar.tsx b/src/entities/user/avatar/Avatar.tsx
@@ -1,6 +1,4 @@
-import { Flex, Avatar as ChakraAvatar } from '@chakra-ui/react';
-
-import { SText } from '~/shared/ui/SText';
+import { Flex, Avatar as ChakraAvatar, Text } from '@chakra-ui/react';
 
 interface AvatarProps {
   firstName: string;
@@ -12,7 +10,7 @@ export const Avatar = ({ firstName, lastName, avatarImg }: AvatarProps) => {
   return (
     <Flex alignItems="center" gap={2}>
       <ChakraAvatar name={`${firstName} ${lastName}`} src={avatarImg} />
-      <SText fontWeight="semibold">{`Привет, ${firstName}!`}</SText>
+      <Text fontWeight="semibold">{`Привет, ${firstName}!`}</Text>
     </Flex>
   );
 };
diff --git a/src/entities/user/index.ts b/src/entities/user/index.ts
@@ -1,5 +1,4 @@
 export * from './about-me';
 export * from './profile-card';
 export * from './reviews';
-export * from './projects';
 export * from './avatar';
diff --git a/src/entities/user/profile-card/ProfileCard.tsx b/src/entities/user/profile-card/ProfileCard.tsx
@@ -11,6 +11,7 @@ export function ProfileCard() {
       w="100%"
       borderRadius="2xl"
       position="relative"
+      mb={4}
     >
       <Avatar
         name="Татьяна А"

diff --git a/src/entities/user/projects/Projects.tsx b/src/entities/user/projects/Projects.tsx
diff --git a/src/entities/user/projects/index.ts b/src/entities/user/projects/index.ts
diff --git a/src/entities/user/reviews/Reviews.tsx b/src/entities/user/reviews/Reviews.tsx
@@ -1,7 +1,6 @@
-import { Flex, VStack } from '@chakra-ui/react';
+import { Box, HStack, Heading, Stack, Text } from '@chakra-ui/react';
 
 import { SLink } from '~/shared/ui/SLink';
-import { SText } from '~/shared/ui/SText';
 
 interface ReviewType {
   rating: JSX.Element;
@@ -11,20 +10,24 @@ export function Reviews(props: ReviewType) {
   const { rating } = props;
 
   return (
-    <VStack align="stretch" spacing={0} p={5} mb={4} borderRadius="2xl" bg="white">
-      <Flex align="center" justifyContent="space-between">
-        <SText variant="caption">3 сентября 2022</SText>
+    <Stack p={5} borderRadius="2xl" bg="white" gap={3}>
+      <HStack justifyContent="space-between">
+        <Text variant="caption">3 сентября 2022</Text>
         {rating}
-      </Flex>
-      <Flex direction="column" py={3} gap={1}>
-        <SText variant="h2">Михаил Шафутинский</SText>
-        <SText variant="caption">Участник проекта</SText>
+      </HStack>
+      <Box>
+        <Heading variant="h2" mb={1}>
+          Михаил Шафутинский
+        </Heading>
+        <Text variant="caption" mb={1}>
+          Участник проекта
+        </Text>
         <SLink to="#">Сервис онлайн-образования</SLink>
-      </Flex>
-      <SText>
+      </Box>
+      <Text>
         Все прошло отлично. Спасибо Денису за оперативность. Организация на высшем уровне.
         Показал, рассказал все по уму.
-      </SText>
-    </VStack>
+      </Text>
+    </Stack>
   );
 }
diff --git a/src/features/project/add-project/AddProject.tsx b/src/features/project/add-project/AddProject.tsx
@@ -1,8 +1,7 @@
-import { Icon, IconButton } from '@chakra-ui/react';
+import { HStack, Icon, IconButton, Text } from '@chakra-ui/react';
 import { BsPlus } from 'react-icons/bs';
 
 import { useIsMobile } from '~/shared/hooks';
-import { SText } from '~/shared/ui/SText';
 
 export const AddProject = () => {
   const isMobile = useIsMobile();
@@ -16,12 +15,10 @@ export const AddProject = () => {
       flexShrink="0"
       padding={['0', '0', '4']}
       icon={
-        <>
-          <SText fontSize="sm" fontWeight="normal" hidden={isMobile}>
-            Создать проект
-          </SText>
+        <HStack fontWeight="semibold">
+          <Text hidden={isMobile}>Создать проект</Text>
           <Icon as={BsPlus} />
-        </>
+        </HStack>
       }
     />
   );

diff --git a/src/features/project/filter-project/FilterProject.tsx b/src/features/project/filter-project/FilterProject.tsx
@@ -1,9 +1,8 @@
-import { Icon, IconButton } from '@chakra-ui/react';
+import { Icon, IconButton, Text } from '@chakra-ui/react';
 import { IoOptions } from 'react-icons/io5';
 
 import { useIsMobile } from '~/shared/hooks';
 import { Counter } from '~/shared/ui/Counter';
-import { SText } from '~/shared/ui/SText';
 
 export const FilterProject = () => {
   const isMobile = useIsMobile();
@@ -14,11 +13,10 @@ export const FilterProject = () => {
       flexShrink="0"
       gap={2}
       padding={['0', '0', '4']}
+      fontWeight="normal"
       icon={
         <>
-          <SText fontSize="sm" fontWeight="normal" hidden={isMobile}>
-            Все фильтры
-          </SText>
+          <Text hidden={isMobile}>Все фильтры</Text>
           <Icon as={IoOptions} />
           <Counter count={5} float />
         </>

diff --git a/src/features/project/status/Status.tsx b/src/features/project/status/Status.tsx
@@ -1,6 +1,4 @@
-import { Badge, BadgeProps } from '@chakra-ui/react';
-
-import { SText } from '~/shared/ui/SText';
+import { Badge, BadgeProps, Text } from '@chakra-ui/react';
 
 type StatusProps = {
   children: string;
@@ -18,9 +16,9 @@ export const Status = (props: StatusProps) => {
       borderRadius="full"
       {...others}
     >
-      <SText color="white" fontWeight="medium">
+      <Text color="white" fontWeight="medium">
         {children}
-      </SText>
+      </Text>
     </Badge>
   );
 };
diff --git a/src/pages/profile/ProfilePage.tsx b/src/pages/profile/ProfilePage.tsx
@@ -1,25 +1,48 @@
-import { Flex, Tabs, TabList, TabPanels, TabPanel, Tab } from '@chakra-ui/react';
+import {
+  Flex,
+  Tabs,
+  TabList,
+  TabPanels,
+  TabPanel,
+  Tab,
+  Stack,
+  Heading,
+} from '@chakra-ui/react';
 
+import { ProjectCard } from '~/widgets/project-card';
 import { ReviewsList } from '~/widgets/rewiews-list';
 
 import { Notification, Settings } from '~/features/user';
 
-import { AboutMe, ProfileCard, Projects } from '~/entities/user';
+import { AvatarsGroup } from '~/entities/project';
+import { AboutMe, ProfileCard } from '~/entities/user';
 
-import { SText } from '~/shared/ui/SText';
+import { STag } from '~/shared/ui/STag';
+
+import { data } from '../data';
 
 export function ProfilePage() {
+  const dummyAvatars = [
+    { firstName: 'Alex', lastName: 'Gordon', img: 'https://bit.ly/ryan-florence' },
+    { firstName: 'Игорь', lastName: 'Крутой', img: 'https://bit.ly/sage-adebayo' },
+    { firstName: 'Джек', lastName: 'Воробей', img: 'https://bit.ly/kent-c-dodds' },
+    { firstName: 'Кларк', lastName: 'Кент', img: 'https://bit.ly/prosper-baba' },
+    { firstName: 'Джеймс', lastName: 'Бонд', img: 'https://bit.ly/code-beast' },
+    { firstName: 'Бернд', lastName: 'Шнайдер', img: 'https://bit.ly/dan-abramov' },
+  ];
   return (
     <>
       <Flex justifyContent="space-between" alignItems="center" mb={16}>
-        <SText variant="h1">Профиль</SText>
+        <Heading variant="h1" as="h1">
+          Профиль
+        </Heading>
         <Flex gap={4} alignItems="baseline">
           <Notification />
           <Settings />
         </Flex>
       </Flex>
       <ProfileCard />
-      <Tabs my={4} variant="base">
+      <Tabs variant="base">
         <TabList>
           <Tab>Обо мне</Tab>
           <Tab>Проекты</Tab>
@@ -30,7 +53,18 @@ export function ProfilePage() {
             <AboutMe />
           </TabPanel>
           <TabPanel>
-            <Projects />
+            <Stack gap={4}>
+              {data.map((project) => {
+                return (
+                  <ProjectCard key={project.id} {...project}>
+                    <Flex justifyContent="space-between" alignItems="center">
+                      <STag mainTags={['Организатор']} />
+                      <AvatarsGroup avatars={dummyAvatars} />
+                    </Flex>
+                  </ProjectCard>
+                );
+              })}
+            </Stack>
           </TabPanel>
           <TabPanel>
             <ReviewsList />

diff --git a/src/pages/projects/ui/ProjectPage.desktop.tsx b/src/pages/projects/ui/ProjectPage.desktop.tsx
@@ -1,4 +1,4 @@
-import { Flex, SimpleGrid } from '@chakra-ui/react';
+import { Flex, SimpleGrid, Heading } from '@chakra-ui/react';
 
 import { data } from '~/pages/data';
 
@@ -9,7 +9,6 @@ import { AddProject } from '~/features/project';
 import { AvatarsGroup } from '~/entities/project';
 
 import { STag } from '~/shared/ui/STag';
-import { SText } from '~/shared/ui/SText';
 
 export const ProjectPageDesktop = () => {
   const dummyAvatars = [
@@ -24,7 +23,9 @@ export const ProjectPageDesktop = () => {
     <>
       <Flex alignContent="center" flexDirection="column" justifyContent="space-between">
         <Flex justifyContent="space-between" alignItems="center" mb={6}>
-          <SText variant="h1">Проекты</SText>
+          <Heading variant="h1" as="h1">
+            Проекты
+          </Heading>
           <Flex gap={4} alignItems="baseline">
             <AddProject />
           </Flex>

diff --git a/src/pages/projects/ui/ProjectPage.tsx b/src/pages/projects/ui/ProjectPage.tsx
@@ -1,4 +1,4 @@
-import { Flex, SimpleGrid } from '@chakra-ui/react';
+import { Flex, SimpleGrid, Heading } from '@chakra-ui/react';
 
 import { data } from '~/pages/data';
 
@@ -9,7 +9,6 @@ import { AddProject } from '~/features/project';
 import { AvatarsGroup } from '~/entities/project';
 
 import { STag } from '~/shared/ui/STag';
-import { SText } from '~/shared/ui/SText';
 
 export const ProjectPage = () => {
   const dummyAvatars = [
@@ -24,7 +23,9 @@ export const ProjectPage = () => {
     <>
       <Flex alignContent="center" flexDirection="column" justifyContent="space-between">
         <Flex justifyContent="space-between" alignItems="center" mb={6}>
-          <SText variant="h1">Проекты</SText>
+          <Heading variant="h1" as="h1">
+            Проекты
+          </Heading>
           <Flex gap={4} alignItems="baseline">
             <AddProject />
           </Flex>

diff --git a/src/shared/config/theme/desktopTheme.ts b/src/shared/config/theme/desktopTheme.ts
@@ -1,5 +1,27 @@
-import { extendTheme } from '@chakra-ui/react';
+import { extendTheme, defineStyleConfig } from '@chakra-ui/react';
 
 import { basicTheme } from './theme';
 
-export const desktopTheme = extendTheme(basicTheme);
+const Heading = defineStyleConfig({
+  variants: {
+    h1: {
+      fontSize: '4xl',
+    },
+    h2: {
+      fontSize: 'xl',
+      marginBottom: '4',
+    },
+  },
+});
+
+const Text = defineStyleConfig({
+  variants: {
+    caption: {
+      fontSize: 'sm',
+    },
+  },
+});
+
+export const desktopTheme = extendTheme(basicTheme, {
+  components: { Heading, Text },
+});