feat(18-02): create DependencyIndicator component
Pure presentational component that renders blocked-by annotations with ^ prefix in amber text. Returns null when blockedBy is empty.
This commit is contained in:
28
packages/web/src/components/DependencyIndicator.tsx
Normal file
28
packages/web/src/components/DependencyIndicator.tsx
Normal file
@@ -0,0 +1,28 @@
|
|||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
|
||||||
|
interface DependencyItem {
|
||||||
|
name: string;
|
||||||
|
status: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface DependencyIndicatorProps {
|
||||||
|
blockedBy: DependencyItem[];
|
||||||
|
type: "task" | "phase";
|
||||||
|
className?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function DependencyIndicator({
|
||||||
|
blockedBy,
|
||||||
|
type: _type,
|
||||||
|
className,
|
||||||
|
}: DependencyIndicatorProps) {
|
||||||
|
if (blockedBy.length === 0) return null;
|
||||||
|
|
||||||
|
const names = blockedBy.map((item) => item.name).join(", ");
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={cn("pl-8 text-sm text-amber-600", className)}>
|
||||||
|
<span className="font-mono">^</span> blocked by: {names}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user