Add project pill/badge to task cards in Kanban
This commit is contained in:
parent
1ab5911742
commit
dd1c65453a
@ -332,7 +332,9 @@ export default function Home() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="space-y-3">
|
<div className="space-y-3">
|
||||||
{columnTasks.map((task) => (
|
{columnTasks.map((task) => {
|
||||||
|
const taskProject = projects.find((p) => p.id === task.projectId)
|
||||||
|
return (
|
||||||
<Card
|
<Card
|
||||||
key={task.id}
|
key={task.id}
|
||||||
className="bg-slate-900 border-slate-800 hover:border-slate-700 cursor-pointer transition-colors group"
|
className="bg-slate-900 border-slate-800 hover:border-slate-700 cursor-pointer transition-colors group"
|
||||||
@ -340,12 +342,23 @@ export default function Home() {
|
|||||||
>
|
>
|
||||||
<CardContent className="p-4">
|
<CardContent className="p-4">
|
||||||
<div className="flex items-start justify-between mb-2">
|
<div className="flex items-start justify-between mb-2">
|
||||||
<Badge
|
<div className="flex items-center gap-2">
|
||||||
variant="outline"
|
<Badge
|
||||||
className={`text-xs ${typeColors[task.type]} text-white border-0`}
|
variant="outline"
|
||||||
>
|
className={`text-xs ${typeColors[task.type]} text-white border-0`}
|
||||||
{typeLabels[task.type]}
|
>
|
||||||
</Badge>
|
{typeLabels[task.type]}
|
||||||
|
</Badge>
|
||||||
|
{taskProject && (
|
||||||
|
<Badge
|
||||||
|
variant="outline"
|
||||||
|
className="text-xs text-white border-0"
|
||||||
|
style={{ backgroundColor: taskProject.color }}
|
||||||
|
>
|
||||||
|
{taskProject.name}
|
||||||
|
</Badge>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
<div className="opacity-0 group-hover:opacity-100 transition-opacity flex gap-1">
|
<div className="opacity-0 group-hover:opacity-100 transition-opacity flex gap-1">
|
||||||
<button
|
<button
|
||||||
onClick={(e) => {
|
onClick={(e) => {
|
||||||
@ -409,7 +422,7 @@ export default function Home() {
|
|||||||
)}
|
)}
|
||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
))}
|
)})}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user