staff_data/apps/web/src/app/main/course/preview/page.tsx

import { Skeleton, type TabsProps } from 'antd';
import { CoursePreviewAllmsg } from "./components/coursePreviewAllmsg";
import { CoursePreviewTabmsg } from "./components/couresPreviewTabmsg";
import { CoursePreviewMsg } from "./type";
import { api } from '@nice/client' 
import { useNavigate, useParams } from 'react-router-dom';
import { useEffect, useState } from 'react';
import { courseDetailSelect, CourseDto } from '@nice/common';

export function CoursePreview(){
    const { id } = useParams()
    const { data:course,isLoading:courseIsLoading}:{data:CourseDto,isLoading:boolean}= api.post.findFirst.useQuery({
      where:{
        id
      },
      select:courseDetailSelect
    })
    // course.sections[0].lectures[0]
    // `/course/${course.id}/detail/${Lecture.id}`
    useEffect(() => {
      if(!courseIsLoading){
        setPreviewMsg({
            videoPreview: course?.meta?.thumbnail,
            Title: course?.title,
            SubTitle:course?.subTitle,
            Description:course?.content,
            ToCourseUrl:`/course/${id}`,
            isLoading:courseIsLoading
        })
      }

    },[courseIsLoading])
    const [previewMsg,setPreviewMsg] =  useState({
        videoPreview: '',
        Title: '',
        SubTitle:'',
        Description:'',
        ToCourseUrl:'',
        isLoading:courseIsLoading
    })
    const tapData = [
        {
          title: '掌握R语言的基本概念语法',
          description: '学生将学习R语言和RStudio的基本知识',
        },
        {
          title: '掌握R语言的基本概念语法',
          description: '学生将学习R语言的变量、数据类型、循环和条件语句等',
        },
        {
          title: '掌握R语言的数据导入管理',
          description: '学生将学会如何将数据导入R环境，并且使用各种类型的数据',
        },
        {
          title: '掌握R语言的基本数据清洗',
          description: '学生将学会使用R语言进行数据清洗、整理和管理',
        },
        {
          title: '掌握R语言的基本数据统计',
          description: '学生将学会使用R语言进行基本的数据统计',
        },
        {
          title: '掌握R语言的基本绘图功能',
          description: '学生将学会使用R语言基本的绘图功能和ggplot2的应用',
        },
    ];
    const isLoading = false
    const items: TabsProps['items'] = [
        {
          key: '1',
          label: '课程学习目标',
          children: isLoading ? <Skeleton className='my-5' active />: <CoursePreviewTabmsg data={tapData}/>,
        }
      ];

    return(
       <div className="min-h-screen">
        <CoursePreviewAllmsg previewMsg= {previewMsg} isLoading={courseIsLoading } items = {items}></CoursePreviewAllmsg>
       </div>
    )
}