type TabItemProps = {
className?: string;
property1?: "Active" | "Normal";
property2?: "Green" | "White";
type?: "Line" | "Filled" | "Text";
};
export default function TabItem({ className, property1 = "Normal", property2 = "White", type = "Line" }: TabItemProps) {
const isActiveAndGreenAndFilled = property1 === "Active" && property2 === "Green" && type === "Filled";
const isActiveAndGreenAndLine = property1 === "Active" && property2 === "Green" && type === "Line";
const isActiveAndWhiteAndLine = property1 === "Active" && property2 === "White" && type === "Line";
const isActiveAndWhiteAndText = property1 === "Active" && property2 === "White" && type === "Text";
const isNormalAndWhiteAndFilled = property1 === "Normal" && property2 === "White" && type === "Filled";
return (
);
}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/14 body: Font(family: "Roboto", style: Regular, size: 14, weight: 400, lineHeight: 1.5, 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.