damus.io

damus.io website
git clone git://jb55.com/damus.io
Log | Files | Refs | README | LICENSE

StepHeader.tsx (648B)

      1 import { CheckCircle } from "lucide-react";
      2 
      3 export function StepHeader({ stepNumber, title, done, active }: { stepNumber: number, title: string, done: boolean, active: boolean }) {
      4   return (<>
      5     <div className={`flex items-center mb-2 ${active ? "" : "opacity-50"}`}>
      6       <div className={`flex items-center justify-center w-8 h-8 rounded-full ${done ? "bg-green-500" : active ? "bg-purple-600" : "bg-gray-500"} text-white text-sm font-semibold`}>
      7         {done ? <CheckCircle className="w-4 h-4" /> : stepNumber}
      8       </div>
      9       <div className="ml-2 text-lg text-purple-200 font-semibold">
     10         {title}
     11       </div>
     12     </div>
     13   </>)
     14 }