feat(view-course): implement layout of course block and content display

app/data/view-course.ts

@@ -0,0 +1,22 @@
+export const whatYouWillLearn = [
+  {
+    title: 'Крок за кроком детально вивчите основні теми SQL',
+    text: 'Ви матимете змогу розглянути різні аспекти SQL, такі як створення, зчитування, оновлення і видалення даних в базі даних крок за кроком.',
+  },
+  {
+    title: 'Навчитеся писати SELECT-и різної складності',
+    text: 'SQL  використовується для роботи з базами даних, і запити типу SELECT використовуються для вибірки даних з бази даних.',
+  },
+  {
+    title: "Зможете працювати з безліччю різних об'єктів у базах даних",
+    text: 'Ви вивчите мову баз даних, будете вміти з’єднувати таблиці, працювати зі специфічними видами даних та вміти автиматизувати їх обробку.',
+  },
+  {
+    title: 'Повністю підготуєтеся до іспиту Oracle SQL 1Z0-071',
+    text: 'Цей іспит є сертифікаційним тестом від Oracle, який оцінює ваші знання та навички у сфері SQL, зокрема в Oracle Database',
+  },
+  {
+    title: 'Навчитеся змінювати, додавати, видаляти інформацію в базах даних',
+    text: 'Ви опануєте навички роботи з базами даних. Це важлива навичка для управління і зберігання інформації в структурованому вигляді.',
+  },
+]

app/features/course-element.tsx

@@ -0,0 +1,78 @@
+import clsx from 'clsx'
+import { useState } from 'react'
+import { DeleteIcon, EditIcon } from 'assets/icons'
+import { useDispatch } from 'react-redux'
+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, TransparentButton } from '~/shared'
+import { Link } from '@remix-run/react'
+
+interface Props {
+  header: string
+  index: number
+  id: string
+  className?: string
+  items: any
+  lecturesCount: string
+}
+
+export function CourseElement({
+  header,
+  index,
+  className,
+  id,
+  items,
+  lecturesCount,
+}: Props) {
+  const [isVisibly, setVisibly] = useState(false)
+
+  function changeVisibly() {
+    setVisibly(!isVisibly)
+  }
+
+  return (
+    <div
+      className={clsx(
+        'text-[#0F0F10] cursor-pointer relative w-full pb-3',
+        isVisibly
+          ? 'border-b-2 border-[#454BE9]'
+          : 'border-b-2 border-[#B5B7F6]-2',
+        className
+      )}
+      onClick={changeVisibly}
+      role="presentation"
+    >
+      <div className="flex items-center justify-start">
+        <div className="inline-block">
+          <p className="inline-block text-2xl font-semibold">{index}.</p>
+          <p className="inline-block pl-2 text-2xl text-[#1a1a1b] font-semibold leading-[30px] font-manrope">
+            {header}
+          </p>
+        </div>
+        <div className="flex text-[#454be9] flex-row gap-4 absolute right-2">
+          <p className="text-manrope font-normal text-base">
+            {lecturesCount} лекцій
+          </p>
+        </div>
+      </div>
+      <div
+        className={clsx(
+          ' duration-1400 transition-all ease-in-out flex flex-col gap-2',
+          isVisibly ? '' : 'max-h-0 overflow-hidden'
+        )}
+      >
+        {items.map((item: any, index: number) => (
+          <div key={index} className="py-3 pl-7 mt-1">
+            <p className="text-manrope font-normal text-base text-[#1a1a1b]">
+              {item.elementName}
+            </p>
+          </div>
+        ))}
+      </div>
+
+      <ToasterWithOptions />
+    </div>
+  )
+}

app/features/index.ts

@@ -2,3 +2,4 @@ export * from './join-us-form'
 export * from './language-dropbox'
 export * from './faq-question'
 export * from './hidden-list-component'
+export * from './list-element'

app/features/list-element.tsx

@@ -0,0 +1,22 @@
+interface Props { 
+    header: string 
+    index: number 
+    text: string
+}
+
+export function ListElement({ header, index, text }: Props) {
+  return (
+    <div>
+      <div className="inline-block">
+        <p className="inline-block text-[#454be9] text-lg font-semibold">
+          {index}.
+        </p>
+        <p className="inline-block pl-2 text-lg text-[#1a1a1b] font-medium leading-[30px] font-manrope">
+          {header}
+        </p>
+      </div>
+
+      <p className="mt-4 max-w-[623px]">{text}</p>
+    </div>
+  )
+}

app/routes/courses.$course.tsx

@@ -1,33 +1,43 @@
 import type { ThunkDispatch } from '@reduxjs/toolkit'
 import { useParams } from '@remix-run/react'
+import { ViewCourseImage } from 'assets/images'
 import { Spinner } from 'flowbite-react'
 import { useEffect, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
+import { whatYouWillLearn } from '~/data/view-course'
+import { ListElement } from '~/features'
+import { CourseElement } from '~/features/course-element'
 import { fetchCourse } from '~/redux/slices/courses'
+import { fetchUser } from '~/redux/slices/user'
+import { FilledButton, Header2, Header3, Header4, Text } from '~/shared'
 
 export default function Course() {
   const params = useParams()
 
   const dispatch = useDispatch<ThunkDispatch<any, any, any>>()
 
   // @ts-ignore
-  const { courses } = useSelector(state => state.courses)
+  const { course } = useSelector(state => state.course)
 
   const [isPostsLoading, setIsPostLoading] = useState(true)
 
   useEffect(() => {
-    let formData = new FormData();
+    let formData = new FormData()
     formData.append('CourseID', params.course as string)
-    formData.append('UserID', window.localStorage.getItem("userId") as string)
+    formData.append('UserID', window.localStorage.getItem('userId') as string)
     dispatch(fetchCourse(formData))
+
+
   }, [])
 
   useEffect(() => {
-    if (courses.status === 'loaded') setIsPostLoading(false)
+    if (course.status === 'loading') setIsPostLoading(true)
+
+    if (course.status === 'loaded') setIsPostLoading(false)
   })
 
   return (
-    <div className="max-w-[720px] py-12 my-[56px] mx-auto">
+    <div className="py-12 my-[56px] mx-auto">
       {isPostsLoading ? (
         <div className="w-full h-screen">
           <Spinner
@@ -37,7 +47,94 @@ export default function Course() {
           />
         </div>
       ) : (
-        <p>Hello world</p>
+        <div className="w-full">
+          <Header2 className="text-center mt-4">{course.data.name}</Header2>
+
+          <img
+            className="w-full h-[800px] mt-[50px]"
+            src={
+              'https://mystudystorage.blob.core.windows.net/test/' +
+              course.data.picturePath
+            }
+            alt=""
+          />
+
+          <div className="mt-[92px] pl-[400px]">
+            <div className="w-[739px]">
+              <Header3>Про курс</Header3>
+
+              <Header4 className="mt-6">Цей курс містить:</Header4>
+
+              <Text className="mt-4 max-w-[738px]">
+                {course.data.description}
+              </Text>
+
+              <div className="inline-block mt-9">
+                <Header4 className="inline-block">Вартість курсу</Header4>
+
+                <Header4 className="inline-block  pl-2 text-[#454be9]">
+                  {course.data.price} грн
+                </Header4>
+
+                <FilledButton className="ml-[266px] h-[47px] py-[10px] text-white">
+                  Придбати
+                </FilledButton>
+              </div>
+            </div>
+
+            <div className="mt-[92px]">
+              <Header3>Чому ви навчитесь</Header3>
+
+              <div className="flex flex-row gap-[40px] mt-6">
+                <img
+                  className="w-[357px] h-[428px]"
+                  src={ViewCourseImage}
+                  alt=""
+                />
+
+                <div className="flex flex-col gap-[56px]">
+                  {whatYouWillLearn.map((item, index) => (
+                    <ListElement
+                      key={index}
+                      index={index + 1}
+                      header={item.title}
+                      text={item.text}
+                    />
+                  ))}
+                </div>
+              </div>
+            </div>
+
+            <div className="w-[992px] mt-[92px]">
+              <Header3>Програма курсу</Header3>
+
+              <div className="mt-6">
+                {/* ts-ignore */}
+                {course.data.courseElementsList.map(
+                  (element: any, index: number) => (
+                    <div key={index} className="w-[992px] mt-4">
+                      <CourseElement
+                        lecturesCount={element.lessonsCount}
+                        items={element.courseItems}
+                        id={element.id}
+                        header={element.name}
+                        index={index + 1}
+                      />
+                    </div>
+                  )
+                )}
+              </div>
+            </div>
+
+            <div className="mt-[92px] w-[1200px]">
+              <Header3>Ваш викладач</Header3>
+
+              <div className='flex flex-row gap-[42px]'>
+                    <img src="" alt="" />
+              </div>
+            </div>
+          </div>
+        </div>
       )}
     </div>
   )

assets/images/index.ts

@@ -12,3 +12,4 @@ export { default as AddImageCover } from './add-image-cover.png'
 export { default as AddVideoCover } from './add-video-cover.png'
 export { default as EmptyAvatar } from './empty-avatar.png'
 export { default as AddCourseCard } from './add-course-card.png'
+export { default as ViewCourseImage } from './view-course-image.png'