38 lines
937 B
TypeScript
38 lines
937 B
TypeScript
import { Draggable } from '@hello-pangea/dnd';
|
|
import { DragHandleHorizontalIcon } from '@radix-ui/react-icons';
|
|
import { Box, Button, Card, Flex, Text } from '@radix-ui/themes';
|
|
|
|
type TTaskCard = {
|
|
title?: string;
|
|
description?: string;
|
|
id?: string;
|
|
index?: number;
|
|
};
|
|
|
|
export default function TaskCard(props: TTaskCard) {
|
|
return (
|
|
<Draggable draggableId={props.id || '123'} index={props.index || 0}>
|
|
{(provided) => (
|
|
<Card
|
|
className="!w-62"
|
|
ref={provided.innerRef}
|
|
{...provided.draggableProps}
|
|
>
|
|
<Flex direction="column" gap="2">
|
|
<Text wrap="pretty">{props.title}</Text>
|
|
<Button>Mark completed</Button>
|
|
<Flex className="w-full !justify-center transition-transform">
|
|
<Box
|
|
className="px-10 cursor-grab"
|
|
{...provided.dragHandleProps}
|
|
>
|
|
<DragHandleHorizontalIcon />
|
|
</Box>
|
|
</Flex>
|
|
</Flex>
|
|
</Card>
|
|
)}
|
|
</Draggable>
|
|
);
|
|
}
|