feat: мобильная версия страницы проектов (#30)

Co-authored-by: Ruslan Kutliakhmetov <[email protected]>

src/app/providers/router/config.tsx

@@ -3,6 +3,7 @@ import { Navigate } from 'react-router-dom';
 import { BlankPage } from '~/pages/blank';
 import { NotFoundPage } from '~/pages/not-found';
 import { ProfilePage } from '~/pages/profile';
+import { ProjectPage } from '~/pages/projects';
 import { SearchPage, SearchPageDesktop } from '~/pages/search';
 
 import { PATHS } from '~/shared/lib/router';
@@ -24,6 +25,7 @@ const normalRoutes = [
     },
   },
   { path: PATHS.profile, view: { base: <ProfilePage /> } },
+  { path: PATHS.projects, view: { base: <ProjectPage /> } },
   { path: PATHS.search, view: { base: <SearchPage />, desktop: <SearchPageDesktop /> } },
   {
     path: '*',

src/entities/project/avatars-group/AvatarsGroup.tsx

@@ -0,0 +1,21 @@
+import { Avatar, AvatarGroup } from '@chakra-ui/react';
+
+interface Avatar {
+  firstName: string;
+  lastName: string;
+  img: string;
+}
+
+interface AvatarProps {
+  avatars: Avatar[];
+}
+
+export const AvatarsGroup = ({ avatars }: AvatarProps) => {
+  return (
+    <AvatarGroup spacing={'-2'} size={'sm'} max={3}>
+      {avatars.map(({ firstName, lastName, img }) => (
+        <Avatar key={firstName} name={`${firstName} ${lastName}`} w={7} h={7} src={img} />
+      ))}
+    </AvatarGroup>
+  );
+};

src/entities/project/avatars-group/index.ts

@@ -0,0 +1 @@
+export * from './AvatarsGroup';

src/entities/project/index.ts

@@ -1 +1,2 @@
 export * from './card';
+export * from './avatars-group';

src/features/project/add-project/AddProject.tsx

@@ -0,0 +1,17 @@
+import { Icon, IconButton } from '@chakra-ui/react';
+import React from 'react';
+import { BsPlusCircleFill } from 'react-icons/bs';
+
+export const AddProject = () => {
+  return (
+    <IconButton
+      variant="flat"
+      aria-label="add-project"
+      icon={
+        <>
+          <Icon as={BsPlusCircleFill} />
+        </>
+      }
+    />
+  );
+};

src/features/project/add-project/index.ts

@@ -0,0 +1 @@
+export * from './AddProject';

src/features/project/index.ts

@@ -1,3 +1,4 @@
 export * from './filter-project';
 export * from './search-project';
+export * from './add-project';
 export * from './status';

src/pages/layout/Layout.tsx

@@ -17,10 +17,10 @@ export const Layout = ({ base, desktop }: LayoutProps) => {
     <ChakraProvider theme={isMobile ? mobileTheme : desktopTheme}>
       {isMobile ? (
         <Flex alignItems="baseline">
-          <MenuBase />
           <Container maxW="md" pt={2} pb={16}>
             {base}
           </Container>
+          <MenuBase />
         </Flex>
       ) : (
         <Flex alignItems="baseline">

src/pages/projects/index.ts

@@ -0,0 +1 @@
+export * from './ui';

src/pages/projects/ui/ProjectPage.tsx

@@ -0,0 +1,45 @@
+import { Flex } from '@chakra-ui/react';
+
+import { data } from '~/pages/data';
+
+import { ProjectCard } from '~/widgets/project-card';
+
+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 = [
+    { 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 alignContent="center" flexDirection="column" justifyContent="space-between">
+        <Flex justifyContent="space-between" alignItems="center" mb={6}>
+          <SText variant="h1">Проекты</SText>
+          <Flex gap={4} alignItems="baseline">
+            <AddProject />
+          </Flex>
+        </Flex>
+        {data.map((project) => {
+          return (
+            <ProjectCard key={project.id} {...project}>
+              <Flex justifyContent="space-between" alignItems="center">
+                <STag mainTags={['Организатор']} />
+                <AvatarsGroup avatars={dummyAvatars} />
+              </Flex>
+            </ProjectCard>
+          );
+        })}
+      </Flex>
+    </>
+  );
+};

src/pages/projects/ui/index.ts

@@ -0,0 +1 @@
+export * from './ProjectPage';

src/pages/search/ui/SearchPage.desktop.tsx

@@ -4,7 +4,9 @@ import { ProjectCard } from '~/widgets/project-card';
 
 import { SearchProject, FilterProject } from '~/features/project';
 
-import { data } from '../data';
+import { STag } from '~/shared/ui/STag';
+
+import { data } from '../../data';
 
 export const SearchPageDesktop = () => {
   return (
@@ -16,7 +18,11 @@ export const SearchPageDesktop = () => {
         </Flex>
         <SimpleGrid columns={2} gap={6}>
           {data.map((project) => {
-            return <ProjectCard key={project.id} {...project} page="search" />;
+            return (
+              <ProjectCard key={project.id} {...project}>
+                <STag mainTags={project.mainTags} tags={project.tags} />
+              </ProjectCard>
+            );
           })}
         </SimpleGrid>
       </Flex>

src/pages/search/ui/SearchPage.tsx

@@ -7,7 +7,9 @@ import { Notification, Settings } from '~/features/user';
 
 import { Avatar } from '~/entities/user';
 
-import { data } from '../data';
+import { STag } from '~/shared/ui/STag';
+
+import { data } from '../../data';
 
 export const SearchPage = () => {
   return (
@@ -25,7 +27,11 @@ export const SearchPage = () => {
           <FilterProject />
         </Flex>
         {data.map((project) => {
-          return <ProjectCard key={project.id} {...project} page="search" />;
+          return (
+            <ProjectCard key={project.id} {...project}>
+              <STag mainTags={project.mainTags} tags={project.tags} />
+            </ProjectCard>
+          );
         })}
       </Flex>
     </>

src/shared/config/theme/avatarTheme.ts

@@ -17,6 +17,9 @@ const baseStyle = definePartsStyle({
     fontSize: 'sm',
     fontWeight: '600',
   },
+  excessLabel: {
+    bg: 'gray.100',
+  },
 });
 
 export const avatarTheme = defineMultiStyleConfig({ baseStyle });

src/widgets/project-card/ui/ProjectCard.tsx

@@ -4,34 +4,30 @@ import { Status } from '~/features/project';
 
 import { Card } from '~/entities/project';
 
-import { STag } from '~/shared/ui/STag';
-
 interface ProjectCardProps {
-  id: number;
   status: string;
   title: string;
   date: string;
   description: string;
-  mainTags: string[];
-  tags?: string[];
-  page?: 'search' | 'project';
+  children: React.ReactNode;
 }
 
 export const ProjectCard = (props: ProjectCardProps) => {
-  const { status, title, date, description, page, mainTags, tags } = props;
+  const { status, title, date, description, children } = props;
+
   return (
     <ChakraCard
       borderRadius="2xl"
       _hover={{ boxShadow: '2xl', cursor: 'pointer' }}
       _active={{ boxShadow: '2xl' }}
       boxShadow="none"
       alignContent="center"
-      mb={[4, 0]}
+      mb={4}
     >
       <CardBody padding={['5', '6']}>
         <Status mb={['3', '4']}>{status}</Status>
         <Card title={title} date={date} description={description} />
-        {page === 'search' && <STag mainTags={mainTags} tags={tags} />}
+        {children}
       </CardBody>
     </ChakraCard>
   );