56 lines
1.9 KiB
TypeScript
56 lines
1.9 KiB
TypeScript
'use client'
|
|
|
|
import { forwardRef } from 'react'
|
|
import { cn } from '@/lib/utils'
|
|
import { CodeBadge } from '@/components/shared/code-badge'
|
|
import { debugProps } from '@/lib/debug'
|
|
|
|
export const PRIORITY_BORDER: Record<number, string> = {
|
|
1: 'border-l-4 border-l-priority-critical',
|
|
2: 'border-l-4 border-l-priority-high',
|
|
3: 'border-l-4 border-l-priority-medium',
|
|
4: 'border-l-4 border-l-priority-low',
|
|
}
|
|
|
|
interface BacklogCardProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
title: string
|
|
priority: number
|
|
code?: string | null
|
|
isSelected?: boolean
|
|
isDragging?: boolean
|
|
badge?: React.ReactNode
|
|
actions?: React.ReactNode
|
|
}
|
|
|
|
export const BacklogCard = forwardRef<HTMLDivElement, BacklogCardProps>(function BacklogCard(
|
|
{ title, priority, code, isSelected, isDragging, badge, actions, className, ...rest },
|
|
ref
|
|
) {
|
|
return (
|
|
<div
|
|
ref={ref}
|
|
className={cn(
|
|
'bg-surface-container rounded border border-border px-3 py-2 select-none transition-colors cursor-pointer',
|
|
PRIORITY_BORDER[priority],
|
|
isSelected
|
|
? 'bg-primary-container border-primary text-primary-container-foreground'
|
|
: 'hover:bg-surface-container-high',
|
|
isDragging && 'opacity-40 shadow-lg',
|
|
className,
|
|
)}
|
|
{...rest}
|
|
{...debugProps('backlog-card', 'BacklogCard', 'components/backlog/backlog-card.tsx')}
|
|
>
|
|
<div className="flex items-start justify-between gap-2">
|
|
<p className="text-sm leading-snug line-clamp-2 flex-1">{title}</p>
|
|
{code && <CodeBadge code={code} className="shrink-0 mt-0.5" />}
|
|
</div>
|
|
{(badge || actions) && (
|
|
<div className="flex items-center justify-between gap-1 mt-1.5">
|
|
<div className="flex items-center gap-1">{badge}</div>
|
|
{actions && <div className="flex items-center gap-1 shrink-0">{actions}</div>}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
})
|