70 lines
3.3 KiB
TypeScript
70 lines
3.3 KiB
TypeScript
"use client"
|
||
|
||
import type React from "react"
|
||
|
||
interface WorkoutCardProps {
|
||
onBackClick: () => void
|
||
onCardClick: () => void
|
||
}
|
||
|
||
// Это означает, что компонент ожидает получить пропс onBackClick, который должен быть функцией, вызываемой при определенном событии (например, при нажатии кнопки "Назад").
|
||
|
||
export const WorkoutCardHome: React.FC<WorkoutCardProps> = ({ onBackClick, onCardClick }) => {
|
||
return (
|
||
<div
|
||
onClick={onCardClick}
|
||
className="bg-gradient-to-r from-[#2BACBE] to-[#1E7F8C] rounded-3xl p-6 shadow-2xl text-white max-w-4xl mx-auto my-5 transition-transform transform hover:scale-105 duration-300 cursor-pointer"
|
||
>
|
||
{/* Заголовок и статус */}
|
||
<div className="flex items-center justify-between flex-wrap mb-6 border-b-2 pb-4">
|
||
<h2 className="text-xl sm:text-2xl font-extrabold">Тренировка</h2>
|
||
<button
|
||
onClick={(e) => {
|
||
e.stopPropagation()
|
||
onBackClick()
|
||
}}
|
||
className="w-12 h-12 glass-morphism rounded-2xl flex items-center justify-center border border-white/30 hover:bg-white/30 transition-all duration-300 shadow-lg ml-auto"
|
||
>
|
||
<svg
|
||
className="w-6 h-6 text-white transform rotate-180"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
viewBox="0 0 24 24"
|
||
>
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7L15 5" />
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
|
||
{/* Основной блок с иконками и прогрессом */}
|
||
<div className="flex items-start flex-wrap space-x-4 mb-1">
|
||
{/* Иконка часов */}
|
||
<div className="relative flex-shrink-0 mr-6">
|
||
<div className="w-20 h-20 bg-white/70 rounded-2xl flex items-center justify-center shadow-xl transition-transform hover:scale-105 duration-300">
|
||
{/* Clock SVG */}
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 20 20" fill="none">
|
||
<path
|
||
fill="#2BACBE"
|
||
d="M15 1.34A10 10 0 1 1 .005 10.324L0 10l.005-.324A10 10 0 0 1 15 1.34ZM10 4a1 1 0 0 0-.993.883L9 5v5l.009.13a1 1 0 0 0 .197.478l.087.1 3 3 .094.082a1 1 0 0 0 1.226 0l.094-.083.083-.094a1 1 0 0 0 0-1.226l-.083-.094L11 9.585V5l-.007-.117A1 1 0 0 0 10 4Z"
|
||
/>
|
||
<polyline points="12,6,12,12,16,14" />
|
||
</svg>
|
||
</div>
|
||
{/* Пульсирующая точка */}
|
||
<div className="absolute -bottom-1 -right-1 w-6 h-6 bg-white rounded-full shadow-lg animate-pulse flex items-center justify-center">
|
||
<svg className="w-3 h-3 text-[#2BACBE]" fill="currentColor" viewBox="0 0 24 24">
|
||
<path d="M8 5v14l11-7z" />
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Информация о упражнении */}
|
||
<div className="flex flex-col justify-center flex-grow">
|
||
<h3 className="font-extrabold text-lg mb-2">В процессе</h3>
|
||
<p className="text-white/70 font-medium mb-4 text-base">Текущее упражнение</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|