166 lines
4.0 KiB
TypeScript
Executable File
166 lines
4.0 KiB
TypeScript
Executable File
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";
|
|
import TermTree from "@web/src/components/models/term/term-tree";
|
|
interface Courses {
|
|
id: number;
|
|
title: string;
|
|
instructor: string;
|
|
students: number;
|
|
rating: number;
|
|
level: string;
|
|
duration: string;
|
|
category: string;
|
|
progress: number;
|
|
thumbnail: string;
|
|
}
|
|
const HomePage = () => {
|
|
// {
|
|
// 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;
|