Add write study page on main page

slavoyar · Sep 1, 2024 · f0c0bf4 · f0c0bf4
1 parent 7e3ff63
commit f0c0bf4
Show file tree

Hide file tree

Showing 5 changed files with 80 additions and 18 deletions.
diff --git a/frontend/src/entities/group/ui/index.tsx b/frontend/src/entities/group/ui/index.tsx
@@ -1,9 +1,6 @@
 import { useGroupStore, Group } from '@entities/group';
 import { Accordion } from '@shared/ui';
 import { FC, ReactNode } from 'react';
-import { useNavigate } from 'react-router-dom';
-import { useCardStore } from '@entities/card';
-import { Route } from '@shared/types';
 import { GroupHeader } from './group-header';
 
 interface Props {
@@ -13,30 +10,16 @@ interface Props {
 
 export const GroupList: FC<Props> = ({ content, onGroupOpen }) => {
   const [groups, deleteGroup] = useGroupStore((state) => [state.groups, state.delete]);
-  const navigate = useNavigate();
-  const setIsStudy = useCardStore((state) => state.setIsStudy);
 
   const deleteHandler = async (item: Group) => {
     await deleteGroup(item.id);
   };
 
-  const onStudyClick = () => {
-    setIsStudy(true);
-    navigate(`/${Route.StudyWrite}`);
-  };
-
   return (
     <Accordion
       sections={groups}
       rowKey={(item) => item.id}
       header={(item) => <GroupHeader name={item.name} wordCount={item.wordCount} />}
-      actions={() => (
-        <i
-          className='fa fa-pencil-square hover:bg-secondary-600 rounded p-1 cursor-pointer'
-          title='Study'
-          onClick={() => onStudyClick()}
-        />
-      )}
       content={content}
       onOpen={onGroupOpen}
       onDelete={deleteHandler}

diff --git a/frontend/src/features/write-study/index.tsx b/frontend/src/features/write-study/index.tsx
@@ -0,0 +1,24 @@
+import { useCardStore } from '@entities/card';
+import { PenWrite } from '@shared/icons/pen-write';
+import { Route } from '@shared/types';
+import { useNavigate } from 'react-router-dom';
+
+export const WriteStudy = () => {
+  const setIsStudy = useCardStore((state) => state.setIsStudy);
+  const navigate = useNavigate();
+
+  const handleClick = () => {
+    setIsStudy(true);
+    navigate(Route.StudyWrite);
+  };
+
+  return (
+    <div
+      className='flex flex-col gap-2 items-start justify-center w-fit p-4 bg-secondary-900 rounded-xl hover:bg-secondary-800 cursor-pointer'
+      onClick={() => handleClick()}
+    >
+      <PenWrite />
+      <div className='text-white text-center w-full'>Handwriting</div>
+    </div>
+  );
+};
diff --git a/frontend/src/pages/main/index.tsx b/frontend/src/pages/main/index.tsx
@@ -3,6 +3,7 @@ import { useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { Route } from '@shared/types';
 import { Groups } from '@widgets/groups';
+import { StudyModes } from '@widgets/study-modes';
 
 export const Main = () => {
   const fetchGroups = useGroupStore((state) => state.fetch);
@@ -14,7 +15,8 @@ export const Main = () => {
     });
   }, []);
   return (
-    <div className='md:w-6/12 m-auto h-full'>
+    <div className='md:w-6/12 m-auto h-full flex flex-col gap-6'>
+      <StudyModes />
       <Groups />
     </div>
   );

diff --git a/frontend/src/shared/icons/pen-write.tsx b/frontend/src/shared/icons/pen-write.tsx
@@ -0,0 +1,43 @@
+export const PenWrite = ({ size = 100 }: { size?: number }) => (
+  <svg
+    height={`${size}px`}
+    width={`${size}px`}
+    version='1.1'
+    id='Layer_1'
+    xmlns='http://www.w3.org/2000/svg'
+    viewBox='0 0 512 512'
+  >
+    <circle style={{ fill: '#45B39C' }} cx='256' cy='256' r='256' />
+    <path
+      style={{ opacity: 0.1 }}
+      d='M501.216,329.573l-98.549-98.549l0,0L280.976,109.333l-80.848,105.856
+	l16.96,16.96l-11.253,5.659l-67.861,34.123l-26.859,122.624l0,0l-1.781,8.112l106.101,106.101C228.651,510.875,242.192,512,256,512
+	C371.803,512,469.6,435.088,501.216,329.573z'
+    />
+    <polygon
+      style={{ fill: '#3A556A' }}
+      points='296.811,311.877 200.128,215.189 280.976,109.333 402.667,231.024 '
+    />
+    <polygon
+      style={{ fill: '#2F4859' }}
+      points='379.253,220.091 296.677,283.168 219.797,206.288 215.424,212.016 296.08,292.672 
+	384.389,225.227 '
+    />
+    <polygon
+      style={{ fill: '#FCD462' }}
+      points='137.968,271.925 109.333,402.667 240.075,374.032 274.197,306.171 205.829,237.803 '
+    />
+    <g>
+      <polygon
+        style={{ fill: '#F6C358' }}
+        points='217.083,232.144 205.829,237.803 274.197,306.171 279.856,294.917 	'
+      />
+      <path
+        style={{ fill: '#F6C358' }}
+        d='M117.451,400.891l69.184-69.184c5.184,2.539,11.605,1.712,15.915-2.603
+		c5.429-5.429,5.429-14.224,0-19.653c-5.429-5.429-14.229-5.424-19.653,0c-4.309,4.309-5.141,10.731-2.603,15.915l-69.184,69.184
+		l-1.776,8.117L117.451,400.891z'
+      />
+    </g>
+  </svg>
+);
diff --git a/frontend/src/widgets/study-modes/index.tsx b/frontend/src/widgets/study-modes/index.tsx
@@ -0,0 +1,10 @@
+import { WriteStudy } from '@features/write-study';
+
+export const StudyModes = () => (
+  <div className='flex flex-col gap-2'>
+    <h1 className='text-white text-xl text-center'>Study modes</h1>
+    <div className='w-full justify-center flex'>
+      <WriteStudy />
+    </div>
+  </div>
+);