feat(edit-course): add list of lessons and tests under blocks

danilych · Feb 11, 2024 · 27ecb63 · 27ecb63
1 parent b00d169
commit 27ecb63
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 8 deletions.
diff --git a/app/features/hidden-list-component.tsx b/app/features/hidden-list-component.tsx
@@ -6,16 +6,17 @@ import type { ThunkDispatch } from '@reduxjs/toolkit'
 import toast from 'react-hot-toast'
 import { removeBlock } from '~/redux/slices/course'
 import { delay } from '~/widgets/helpers/delay'
-import { ToasterWithOptions } from '~/shared'
+import { ToasterWithOptions, TransparentButton } from '~/shared'
 
 interface Props {
   header: string
   index: number
   id: string
   className?: string
+  items: any
 }
 
-export function HiddenListComponent({ header, index, className, id }: Props) {
+export function HiddenListComponent({ header, index, className, id, items }: Props) {
   const [isVisibly, setVisibly] = useState(false)
 
   const dispatch = useDispatch<ThunkDispatch<any, any, any>>()
@@ -80,13 +81,21 @@ export function HiddenListComponent({ header, index, className, id }: Props) {
       </div>
       <div
         className={clsx(
-          ' duration-1400 transition-all ease-in-out',
+          ' duration-1400 transition-all ease-in-out flex flex-col gap-2',
           isVisibly ? 'max-h-72' : 'max-h-0 overflow-hidden'
         )}
       >
-        <p className="font-manrope text-[#1A1A1B] leading-[30px] font-normal mt-8 text-base">
-          ergkmeriojgierjgioerjgiouerghjreuhgou
-        </p>
+        {items.map((item: any, index: number) => (
+          <div key={index} className='bg-[#D9D9D9] py-3 pl-7 mt-1'>
+            <p className='text-manrope font-normal text-base text-[#1a1a1b]'>{item.elementName}</p>
+          </div>
+        ))}
+
+        <div className='mt-2 flex flex-row gap-9'>
+          <TransparentButton className='border-[#D4D4D4]'>Додати урок</TransparentButton>
+
+          <TransparentButton className='border-[#D4D4D4]'>Додати тест</TransparentButton>
+        </div>
       </div>
 
       <ToasterWithOptions />

diff --git a/app/routes/edit-course.$course.tsx b/app/routes/edit-course.$course.tsx
@@ -7,7 +7,12 @@ import toast from 'react-hot-toast'
 import { useDispatch, useSelector } from 'react-redux'
 import { HiddenListComponent } from '~/features'
 import { fetchCourse, updateBlock } from '~/redux/slices/course'
-import { Header3, Header4, ToasterWithOptions, TransparentButton } from '~/shared'
+import {
+  Header3,
+  Header4,
+  ToasterWithOptions,
+  TransparentButton,
+} from '~/shared'
 import { delay } from '~/widgets/helpers/delay'
 
 export default function Course() {
@@ -119,8 +124,9 @@ export default function Course() {
               {/* ts-ignore */}
               {course.data.courseElementsList.map(
                 (element: any, index: number) => (
-                  <div className="w-[656px] mt-4">
+                  <div key={index} className="w-[656px] mt-4">
                     <HiddenListComponent
+                      items={element.courseItems}
                       id={element.id}
                       header={element.name}
                       index={index + 1}