56 lines
1.8 KiB
TypeScript
56 lines
1.8 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import { TimelineSchedulerConfig } from "../types";
|
|
import { statusOptions } from "../config";
|
|
|
|
interface TimelineLegendProps {
|
|
config: TimelineSchedulerConfig;
|
|
}
|
|
|
|
export function TimelineLegend({ config }: TimelineLegendProps) {
|
|
const colors = config.statusColors || {};
|
|
|
|
return (
|
|
<div className="flex flex-wrap items-center gap-2 border-t bg-muted/20 px-2 py-1 sm:gap-3 sm:px-3 sm:py-1.5">
|
|
<span className="text-[10px] font-medium text-muted-foreground sm:text-xs">
|
|
범례:
|
|
</span>
|
|
{statusOptions.map((status) => (
|
|
<div key={status.value} className="flex items-center gap-1">
|
|
<div
|
|
className="h-2 w-4 rounded-sm sm:h-2.5 sm:w-5"
|
|
style={{
|
|
backgroundColor:
|
|
colors[status.value as keyof typeof colors] || status.color,
|
|
}}
|
|
/>
|
|
<span className="text-[9px] text-muted-foreground sm:text-[10px]">
|
|
{status.label}
|
|
</span>
|
|
</div>
|
|
))}
|
|
|
|
{/* 마일스톤 범례 */}
|
|
<div className="flex items-center gap-1">
|
|
<div className="flex h-2.5 w-4 items-center justify-center sm:h-3 sm:w-5">
|
|
<div className="h-1.5 w-1.5 rotate-45 bg-foreground/60 sm:h-2 sm:w-2" />
|
|
</div>
|
|
<span className="text-[9px] text-muted-foreground sm:text-[10px]">
|
|
마일스톤
|
|
</span>
|
|
</div>
|
|
|
|
{/* 충돌 범례 */}
|
|
{config.showConflicts && (
|
|
<div className="flex items-center gap-1">
|
|
<div className="h-2 w-4 rounded-sm ring-1.5 ring-destructive sm:h-2.5 sm:w-5" />
|
|
<span className="text-[9px] text-muted-foreground sm:text-[10px]">
|
|
충돌
|
|
</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|