type BadgeProps = { className?: string; color?: "Green" | "Blue" | "Orange" | "Red" | "Black"; tag?: "Filled" | "Line"; type?: "Circle" | "Rectangle"; }; export default function Badge({ className, color = "Green", tag = "Filled", type = "Circle" }: BadgeProps) { const isCircleAndBlackAndFilled = type === "Circle" && color === "Black" && tag === "Filled"; const isCircleAndBlackAndLine = type === "Circle" && color === "Black" && tag === "Line"; const isCircleAndBlueAndFilled = type === "Circle" && color === "Blue" && tag === "Filled"; const isCircleAndBlueAndLine = type === "Circle" && color === "Blue" && tag === "Line"; const isCircleAndGreenAndLine = type === "Circle" && color === "Green" && tag === "Line"; const isCircleAndOrangeAndFilled = type === "Circle" && color === "Orange" && tag === "Filled"; const isCircleAndOrangeAndLine = type === "Circle" && color === "Orange" && tag === "Line"; const isCircleAndRedAndFilled = type === "Circle" && color === "Red" && tag === "Filled"; const isCircleAndRedAndLine = type === "Circle" && color === "Red" && tag === "Line"; const isRectangleAndBlackAndFilled = type === "Rectangle" && color === "Black" && tag === "Filled"; const isRectangleAndBlackAndLine = type === "Rectangle" && color === "Black" && tag === "Line"; const isRectangleAndBlueAndFilled = type === "Rectangle" && color === "Blue" && tag === "Filled"; const isRectangleAndBlueAndLine = type === "Rectangle" && color === "Blue" && tag === "Line"; const isRectangleAndGreenAndFilled = type === "Rectangle" && color === "Green" && tag === "Filled"; const isRectangleAndGreenAndLine = type === "Rectangle" && color === "Green" && tag === "Line"; const isRectangleAndOrangeAndFilled = type === "Rectangle" && color === "Orange" && tag === "Filled"; const isRectangleAndOrangeAndLine = type === "Rectangle" && color === "Orange" && tag === "Line"; const isRectangleAndRedAndFilled = type === "Rectangle" && color === "Red" && tag === "Filled"; const isRectangleAndRedAndLine = type === "Rectangle" && color === "Red" && tag === "Line"; return (
{type === "Circle" && (

5

)} {type === "Rectangle" && (

{type === "Rectangle" && color === "Black" ? "Msg" : type === "Rectangle" && color === "Red" ? "Error" : type === "Rectangle" && color === "Orange" ? "Warn" : type === "Rectangle" && color === "Blue" ? "Active" : type === "Rectangle" && color === "Green" ? "Done" : ""}

)}
); }SUPER CRITICAL: The generated React+Tailwind code MUST be converted to match the target project's technology stack and styling system. 1. Analyze the target codebase to identify: technology stack, styling approach, component patterns, and design tokens 2. Convert React syntax to the target framework/library 3. Transform all Tailwind classes to the target styling system while preserving exact visual design 4. Follow the project's existing patterns and conventions DO NOT install any Tailwind as a dependency unless the user instructs you to do so. Node ids have been added to the code as data attributes, e.g. `data-node-id="1:2"`.These styles are contained in the design: Roboto/12 tips: Font(family: "Roboto", style: Regular, size: 12, weight: 400, lineHeight: 16, letterSpacing: 0).Images and SVGs will be stored as constants, e.g. const image = 'https://www.figma.com/api/mcp/asset/550e8400-e29b-41d4-a716-446655440000'. These constants will be used in the code as the source for the image, ex: . Image assets are stored on a remote server for 7 days and can be fetched using the provided URLs until they expire.