"use client"; import * as React from "react"; import { cn } from "@/lib/utils"; import { Accordion, AccordionContent, AccordionItem, AccordionTrigger, } from "@/components/ui/8bit/accordion"; import { Badge } from "@/components/ui/8bit/badge"; import { Card, CardContent, CardHeader, CardTitle, } from "@/components/ui/8bit/card"; import { ScrollArea } from "@/components/ui/8bit/scroll-area"; import "@/components/ui/8bit/styles/retro.css"; export type QuestStatus = "active" | "completed" | "failed" | "pending"; export interface Quest { id: string; title: string; description: string; status: QuestStatus; shortDescription?: string; } export interface QuestLogProps { quests: Quest[]; className?: string; maxHeight?: string; showEmptyState?: boolean; emptyStateMessage?: string; } const getStatusBadgeVariant = (status: QuestStatus) => { switch (status) { case "active": return "default"; case "completed": return "secondary"; case "failed": return "destructive"; case "pending": return "outline"; default: return "outline"; } }; function QuestItem({ quest }: { quest: Quest }) { const shortDescription = quest.shortDescription || (quest.description.length > 100 ? `${quest.description.substring(0, 100)}...` : quest.description); return (

{quest.title}

{shortDescription}

{quest.status.toUpperCase()}

{quest.description}

); } function EmptyState({ message }: { message: string }) { return (

{message}

); } export function QuestLog({ quests, className, showEmptyState = true, emptyStateMessage = "No quests available.", }: QuestLogProps) { const activeQuests = quests.filter((quest) => quest.status === "active"); const sortedQuests = [ ...activeQuests, ...quests.filter((quest) => quest.status !== "active"), ]; return ( Quest Log {activeQuests.length > 0 && ( {activeQuests.length} Active )} {quests.length === 0 && showEmptyState ? ( ) : ( {sortedQuests.map((quest) => ( ))} )} ); } export default QuestLog;

Dashboard - Todo List Blocks

Select an Item to view its code