add
This commit is contained in:
parent
b3f3193a8b
commit
a49b4af1a8
|
@ -1,5 +1,4 @@
|
||||||
import { Card, Rate, Tag, Typography, Button } from "antd";
|
import { Card, Rate, Tag, Typography, Button } from "antd";
|
||||||
import { Course } from "../mockData";
|
|
||||||
import {
|
import {
|
||||||
UserOutlined,
|
UserOutlined,
|
||||||
ClockCircleOutlined,
|
ClockCircleOutlined,
|
||||||
|
@ -19,7 +18,6 @@ export default function CourseCard({ course }: CourseCardProps) {
|
||||||
navigate(`/course/${course.id}/detail`);
|
navigate(`/course/${course.id}/detail`);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Card
|
<Card
|
||||||
onClick={() => handleClick(course)}
|
onClick={() => handleClick(course)}
|
||||||
|
@ -41,21 +39,25 @@ export default function CourseCard({ course }: CourseCardProps) {
|
||||||
}>
|
}>
|
||||||
<div className="px-4">
|
<div className="px-4">
|
||||||
<div className="flex gap-2 mb-4">
|
<div className="flex gap-2 mb-4">
|
||||||
{course.terms.map((term) => {
|
{course.terms.map((term) => {
|
||||||
return (
|
return (
|
||||||
<Tag
|
<Tag
|
||||||
key={term.id}
|
key={term.id}
|
||||||
// color={term.taxonomy.slug===TaxonomySlug.CATEGORY? "blue" : "green"}
|
// color={term.taxonomy.slug===TaxonomySlug.CATEGORY? "blue" : "green"}
|
||||||
color={term?.taxonomy?.slug === TaxonomySlug.CATEGORY
|
color={
|
||||||
? "blue"
|
term?.taxonomy?.slug ===
|
||||||
: term?.taxonomy?.slug === TaxonomySlug.LEVEL
|
TaxonomySlug.CATEGORY
|
||||||
? "green"
|
? "blue"
|
||||||
: "blue"}
|
: term?.taxonomy?.slug ===
|
||||||
className="px-3 py-1 rounded-full bg-blue-100 text-blue-600 border-0">
|
TaxonomySlug.LEVEL
|
||||||
{term.name}
|
? "green"
|
||||||
</Tag>
|
: "blue"
|
||||||
);
|
}
|
||||||
})}
|
className="px-3 py-1 rounded-full bg-blue-100 text-blue-600 border-0">
|
||||||
|
{term.name}
|
||||||
|
</Tag>
|
||||||
|
);
|
||||||
|
})}
|
||||||
{/* <Tag
|
{/* <Tag
|
||||||
color="blue"
|
color="blue"
|
||||||
className="px-3 py-1 rounded-full bg-blue-100 text-blue-600 border-0">
|
className="px-3 py-1 rounded-full bg-blue-100 text-blue-600 border-0">
|
||||||
|
@ -85,8 +87,8 @@ export default function CourseCard({ course }: CourseCardProps) {
|
||||||
<TeamOutlined className="text-blue-500 text-lg transform group-hover:scale-110 transition-transform duration-300" />
|
<TeamOutlined className="text-blue-500 text-lg transform group-hover:scale-110 transition-transform duration-300" />
|
||||||
<div className="ml-2 flex items-center flex-grow">
|
<div className="ml-2 flex items-center flex-grow">
|
||||||
<Text className="font-medium text-blue-500 hover:text-blue-600 transition-colors duration-300 truncate max-w-[120px]">
|
<Text className="font-medium text-blue-500 hover:text-blue-600 transition-colors duration-300 truncate max-w-[120px]">
|
||||||
{(course.depts.map((depts)=>depts.name))}
|
{course.depts.map((depts) => depts.name)}
|
||||||
{/* {course?.depts?.[0]?.name} */}
|
{/* {course?.depts?.[0]?.name} */}
|
||||||
</Text>
|
</Text>
|
||||||
</div>
|
</div>
|
||||||
<span className="text-xs font-medium text-gray-500">
|
<span className="text-xs font-medium text-gray-500">
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
import { Checkbox, Divider, Radio, Space, Spin } from "antd";
|
import { Checkbox, Divider, Radio, Space, Spin } from "antd";
|
||||||
import { categories, levels } from "../mockData";
|
|
||||||
import { TaxonomySlug, TermDto } from "@nice/common";
|
import { TaxonomySlug, TermDto } from "@nice/common";
|
||||||
|
|
||||||
import { useEffect, useMemo } from "react";
|
import { useEffect, useMemo } from "react";
|
||||||
|
|
|
@ -1,44 +0,0 @@
|
||||||
export interface Course {
|
|
||||||
id: string;
|
|
||||||
title: string;
|
|
||||||
description: string;
|
|
||||||
instructor: string;
|
|
||||||
price: number;
|
|
||||||
originalPrice: number;
|
|
||||||
category: string;
|
|
||||||
level: string;
|
|
||||||
thumbnail: string;
|
|
||||||
rating: number;
|
|
||||||
enrollments: number;
|
|
||||||
duration: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export const categories = [
|
|
||||||
"计算机科学",
|
|
||||||
"数据科学",
|
|
||||||
"商业管理",
|
|
||||||
"人工智能",
|
|
||||||
"软件开发",
|
|
||||||
"网络安全",
|
|
||||||
"云计算",
|
|
||||||
"前端开发",
|
|
||||||
"后端开发",
|
|
||||||
"移动开发"
|
|
||||||
];
|
|
||||||
|
|
||||||
export const levels = ["入门", "初级", "中级", "高级"];
|
|
||||||
|
|
||||||
export const mockCourses: Course[] = Array.from({ length: 50 }, (_, i) => ({
|
|
||||||
id: `course-${i + 1}`,
|
|
||||||
title: `${categories[i % categories.length]}课程 ${i + 1}`,
|
|
||||||
description: "本课程将带你深入了解该领域的核心概念和实践应用,通过实战项目提升你的专业技能。",
|
|
||||||
instructor: `讲师 ${i + 1}`,
|
|
||||||
price: Math.floor(Math.random() * 500 + 99),
|
|
||||||
originalPrice: Math.floor(Math.random() * 1000 + 299),
|
|
||||||
category: categories[i % categories.length],
|
|
||||||
level: levels[i % levels.length],
|
|
||||||
thumbnail: `/api/placeholder/280/160`,
|
|
||||||
rating: Number((Math.random() * 2 + 3).toFixed(1)),
|
|
||||||
enrollments: Math.floor(Math.random() * 10000),
|
|
||||||
duration: `${Math.floor(Math.random() * 20 + 10)}小时`
|
|
||||||
}));
|
|
|
@ -1,5 +1,4 @@
|
||||||
import { useState, useMemo, useEffect } from "react";
|
import { useState, useMemo, useEffect } from "react";
|
||||||
import { mockCourses } from "./mockData";
|
|
||||||
import FilterSection from "./components/FilterSection";
|
import FilterSection from "./components/FilterSection";
|
||||||
import CourseList from "./components/CourseList";
|
import CourseList from "./components/CourseList";
|
||||||
import { api } from "@nice/client";
|
import { api } from "@nice/client";
|
||||||
|
@ -19,7 +18,7 @@ interface paginationData {
|
||||||
}
|
}
|
||||||
export default function CoursesPage() {
|
export default function CoursesPage() {
|
||||||
const { searchValue, setSearchValue } = useMainContext();
|
const { searchValue, setSearchValue } = useMainContext();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className="min-h-screen bg-gray-50">
|
<div className="min-h-screen bg-gray-50">
|
||||||
|
|
Loading…
Reference in New Issue