training_data/apps/web/src/app/main/home/page.tsx

import HeroSection from './components/HeroSection';
import CategorySection from './components/CategorySection';
import CoursesSection from './components/CoursesSection';
import FeaturedTeachersSection from './components/FeaturedTeachersSection';
import { api } from '@nice/client';
import { useEffect, useState } from 'react';
interface Courses{
  id: number;
  title: string;
  instructor: string;
  students: number;
  rating: number;
  level: string;
  duration: string;
  category: string;
  progress: number;
  thumbnail: string;
}
const HomePage = () => {
  // const mockCourses = [
  //   {
  //     id: 1,
  //     title: 'Python 零基础入门',
  //     instructor: '张教授',
  //     students: 12000,
  //     rating: 4.8,
  //     level: '入门',
  //     duration: '36小时',
  //     category: '编程语言',
  //     progress: 16,
  //     thumbnail: '/images/course1.jpg',
  //   },
  //   {
  //     id: 2,
  //     title: '数据结构与算法',
  //     instructor: '李教授',
  //     students: 8500,
  //     rating: 4.9,
  //     level: '进阶',
  //     duration: '48小时',
  //     category: '计算机基础',
  //     progress: 35,
  //     thumbnail: '/images/course2.jpg',
  //   },
  //   {
  //     id: 3,
  //     title: '前端开发实战',
  //     instructor: '王教授',
  //     students: 10000,
  //     rating: 4.7,
  //     level: '中级',
  //     duration: '42小时',
  //     category: '前端开发',
  //     progress: 68,
  //     thumbnail: '/images/course3.jpg',
  //   },
  //   {
  //     id: 4,
  //     title: 'Java企业级开发',
  //     instructor: '刘教授',
  //     students: 9500,
  //     rating: 4.6,
  //     level: '高级',
  //     duration: '56小时',
  //     category: '编程语言',
  //     progress: 15,
  //     thumbnail: '/images/course4.jpg',
  //   },
  //   {
  //     id: 5,
  //     title: '人工智能基础',
  //     instructor: '陈教授',
  //     students: 11000,
  //     rating: 4.9,
  //     level: '中级',
  //     duration: '45小时',
  //     category: '人工智能',
  //     progress: 20,
  //     thumbnail: '/images/course5.jpg',
  //   },
  //   {
  //     id: 6,
  //     title: '大数据分析',
  //     instructor: '赵教授',
  //     students: 8000,
  //     rating: 4.8,
  //     level: '进阶',
  //     duration: '50小时',
  //     category: '数据科学',
  //     progress: 45,
  //     thumbnail: '/images/course6.jpg',
  //   },
  //   {
  //     id: 7,
  //     title: '云计算实践',
  //     instructor: '孙教授',
  //     students: 7500,
  //     rating: 4.7,
  //     level: '高级',
  //     duration: '48小时',
  //     category: '云计算',
  //     progress: 15,
  //     thumbnail: '/images/course7.jpg',
  //   },
  //   {
  //     id: 8,
  //     title: '移动应用开发',
  //     instructor: '周教授',
  //     students: 9000,
  //     rating: 4.8,
  //     level: '中级',
  //     duration: '40小时',
  //     category: '移动开发',
  //     progress: 70,
  //     thumbnail: '/images/course8.jpg',
  //   },
  // ];
  const { data ,isLoading}: { data: Courses[] , isLoading:boolean} = api.post.findMany.useQuery({
    where: {},
    include: {
      instructors: true,
    },
    orderBy: {
      createdAt: 'desc' // 按创建时间降序排列
    },
    take: 8 // 只获取前8个课程
  });
  useEffect(() => {
    if (data) {
      console.log('mockCourses data:', data);
    }
  }, [data]);
  
  // 数据处理逻辑
// 修正依赖数组
return (
  <div className="min-h-screen">
    <HeroSection />
    <CoursesSection
      title="推荐课程"
      description="最受欢迎的精品课程，助你快速成长"
      courses={data}
      isLoading={isLoading}
    />
    {/* {formattedCourses.map((course)=>{
        return (
          <>
            <span>course.title</span>
          </>
        )
      })} */}
    {/* <CoursesSection
        title="热门课程"
        description="最受欢迎的精品课程，助你快速成长"
        courses={mockCourses}
      /> */}
    <CategorySection />
    {/* <FeaturedTeachersSection /> */}
  </div>
);
};

export default HomePage;