type TabItemProps = { className?: string; property1?: "Active" | "Normal"; property2?: "White"; type?: "Line" | "Text"; }; function TabItem({ className, property1 = "Normal", property2 = "White", type = "Line" }: TabItemProps) { const isActiveAndWhiteAndLine = property1 === "Active" && property2 === "White" && type === "Line"; const isActiveAndWhiteAndText = property1 === "Active" && property2 === "White" && type === "Text"; return (

Menu xxx

); } type TabListProps = { className?: string; children?: React.ReactNode | null; type?: "Line" | "Filled" | "Text"; }; export default function TabList({ className, children = null, type = "Line" }: TabListProps) { const isFilled = type === "Filled"; const isText = type === "Text"; return (
{type === "Line" && (
{children || ( <> )}
)} {isText && (
{children || ( <> )}
)} {isFilled && (
{children || ( <>

Menu xxx

Menu xxx

Menu xxx

)}
)}
); }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.