59 lines
1.6 KiB
TypeScript
59 lines
1.6 KiB
TypeScript
"use client"
|
||
|
||
import type React from "react"
|
||
import { useHistory } from "react-router-dom"
|
||
|
||
interface CourseCardProps {
|
||
id: number
|
||
name: string
|
||
progress: number
|
||
color: string
|
||
icon: string
|
||
exercises: number
|
||
nextExercise: string
|
||
}
|
||
|
||
const CourseCard: React.FC<CourseCardProps> = ({
|
||
id,
|
||
name,
|
||
progress,
|
||
color,
|
||
icon,
|
||
}) => {
|
||
const history = useHistory()
|
||
|
||
return (
|
||
|
||
|
||
|
||
|
||
<div
|
||
onClick={() => history.push(`/course/${id}/exercises`)}
|
||
className="bg-white/30 backdrop-blur-2xl rounded-3xl p-6 border border-white/20 shadow-xl cursor-pointer hover:shadow-2xl transition-all duration-300 transform hover:scale-[1.02]"
|
||
>
|
||
<div className="flex items-center space-x-5">
|
||
<div
|
||
className={`w-16 h-16 bg-gradient-to-br ${color} rounded-2xl flex items-center justify-center shadow-lg`}
|
||
>
|
||
<span className="text-2xl text-white filter drop-shadow-sm">{icon}</span>
|
||
</div>
|
||
<div className="flex-1">
|
||
<h3 className="font-black text-[#5F5C5C] text-lg mb-2">{name}</h3>
|
||
<div className="bg-white/50 rounded-full h-3 mb-2 ">
|
||
<div
|
||
className={`bg-gradient-to-r ${color} h-3 rounded-full transition-all duration-700 shadow-sm`}
|
||
style={{ width: `${progress}%` }}
|
||
></div>
|
||
</div>
|
||
<p className="text-sm text-[#5F5C5C]/70 font-semibold">{progress}% завершено</p>
|
||
</div>
|
||
<div className="text-[#2BACBE] transform transition-transform duration-300 hover:translate-x-1">
|
||
<span className="text-2xl font-bold">→</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default CourseCard
|