Flashcard U I - Copy this React, Tailwind Component to your project

// ScoreIndicator.tsx import React from 'react'; import { Star } from 'lucide-react'; interface ScoreIndicatorProps { level: 'NOT_RETAINED' | 'BEGINNER' | 'LEARNING' | 'FAMILIAR' | 'LEARNED' | 'PROFICIENT' | 'MASTER'; } const ScoreIndicator: React.FC<ScoreIndicatorProps> = ({ level }) => { const levelToStars = { NOT_RETAINED: 0, BEGINNER: 1, LEARNING: 2, FAMILIAR: 3, LEARNED: 4, PROFICIENT: 5, MASTER: 6, }; const stars = levelToStars[level] || 0; const maxStars = 6; return ( <div className="flex gap-1"> {Array.from({ length: maxStars }).map((_, index) => ( <Star key={index} className={`h-4 w-4 ${index < stars ? 'fill-yellow-400 text-yellow-400' : 'fill-gray-200 text-gray-200'}`} /> ))} </div> ); }; export default ScoreIndicator; tôi không muốn sử dụng ngôi sao tôi muốn sử dụng bông hoa để tính level