A dynamic orbital visualization component that displays nodes in a circular pattern around a central point. Each node represents a data point with title, status, and energy level.
"use client";
import { Calendar, Code, FileText, User, Clock } from "lucide-react";
import RadialOrbitalTimeline from "@/components/ui/radial-orbital-timeline";
const timelineData = [
{
id: 1,
title: "Planning",
date: "Jan 2024",
content: "Project planning and requirements gathering phase.",
category: "Planning",
icon: Calendar,
relatedIds: [2],
status: "completed" as const,
energy: 100,
},
{
id: 2,
title: "Design",
date: "Feb 2024",
content: "UI/UX design and system architecture.",
category: "Design",
icon: FileText,
relatedIds: [1, 3],
status: "completed" as const,
energy: 90,
},
{
id: 3,
title: "Development",
date: "Mar 2024",
content: "Core features implementation and testing.",
category: "Development",
icon: Code,
relatedIds: [2, 4],
status: "in-progress" as const,
energy: 60,
},
{
id: 4,
title: "Testing",
date: "Apr 2024",
content: "User testing and bug fixes.",
category: "Testing",
icon: User,
relatedIds: [3, 5],
status: "pending" as const,
energy: 30,
},
{
id: 5,
title: "Release",
date: "May 2024",
content: "Final deployment and release.",
category: "Release",
icon: Clock,
relatedIds: [4],
status: "pending" as const,
energy: 10,
},
];
export function RadialOrbitalTimelineDemo() {
return (
<>
<RadialOrbitalTimeline timelineData={timelineData} />
</>
);
}
export default {
RadialOrbitalTimelineDemo,
};