/
lizardking
/
react_project
Обзор
Документация
Войти
/
lizardking
/
react_project
Код
Запросы
0
Задачи
Вики
Пакеты
0
Релизы
0
CI/CD
Аналитика
Безопасность
master
src/entities/task/ui/TaskCard.tsx
53 строки
1 KB
LizardKing
Task 5 - styles
17 окт 2025, 14:23
17 окт 2025, 14:23
4ba1ff3
Код
Авторство
О чём код?
import { memo } from 'react' import { SecondaryButton } from 'shared/ui/SecondaryButton' // noinspection ES6PreferShortImport import type { Task } from '../model/types' type Props = { task: Task onRemove?: (id: string) => void } function TaskCardComponent({ task, onRemove }: Props) { const isDone = task.completed return ( <div className={`relative flex items-center gap-4 bg-elevated border border-border rounded-[--radius-lg] p-4 shadow-[--shadow-soft] transition-colors ${ isDone ? 'opacity-70' : 'hover:bg-surface/70' }`} > <div className={`w-3 h-3 rounded-full shrink-0 ${ isDone ? 'bg-accent/50' : 'bg-accent' }`} aria-hidden /> <div className="flex-1 min-w-0"> <div className={`truncate text-base font-medium ${ isDone ? 'line-through text-muted' : 'text-fg' }`} > {task.todo} </div> <div className={`text-sm ${ isDone ? 'text-muted' : 'text-accent/80' }`} > {isDone ? 'Завершена' : 'В работе'} </div> </div> {onRemove && ( <SecondaryButton onClick={() => onRemove(task.id)}>Удалить</SecondaryButton> )} </div> ) } export const TaskCard = memo(TaskCardComponent) TaskCard.displayName = 'TaskCard'