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 (
    <div className={className || `${String.raw`content-stretch flex h-[var(--size\/xxs,32px)] items-center px-[var(--spacing\/m,16px)] relative `}${isActiveAndWhiteAndLine ? String.raw`border-[var(--color-type\/line\/light-divider,#434343)] border-b-2 border-solid` : ""}`} id={isActiveAndWhiteAndLine ? "node-4265_16087" : isActiveAndWhiteAndText ? "node-4605_7204" : "node-4265_16083"}>
      <p className={`leading-[1.5] relative shrink-0 text-[14px] whitespace-nowrap ${property1 === "Active" && property2 === "White" ? String.raw`font-["Roboto:Bold",sans-serif] font-bold text-[color:var(--color-type\/text\/text_1,#f8f8f8)]` : String.raw`font-["Roboto:Regular",sans-serif] font-normal text-[color:var(--color-type\/text\/tips,#9e9e9e)]`}`} id={isActiveAndWhiteAndLine ? "node-4265_16088" : isActiveAndWhiteAndText ? "node-4605_7205" : "node-4265_16084"} style={{ fontVariationSettings: "'wdth' 100" }}>
        Menu xxx
      </p>
    </div>
  );
}

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 (
    <div className={className || `content-stretch flex items-center relative w-[325px] ${isFilled ? String.raw`bg-[var(--color-type\/background\/layer_2,#1f1f1f)] border border-[var(--color-type\/line\/light-divider,#353535)] border-solid rounded-[var(--radius\/s,4px)]` : isText ? String.raw`gap-[var(--spacing\/l,0px)]` : String.raw`border-[var(--color-type\/line\/light-divider,#353535)] border-b-2 border-solid gap-[var(--spacing\/l,0px)]`}`} id={isFilled ? "node-4452_7149" : isText ? "node-4265_16115" : "node-4605_7196"}>
      {type === "Line" && (
        <div className="content-stretch flex gap-[24px] items-center relative shrink-0" data-node-id="4605:7197" data-name="List">
          {children || (
            <>
              <TabItem className="border-[var(--color-type\/line\/light-divider,#434343)] border-b-2 border-solid content-stretch flex h-[32px] items-center px-[var(--spacing\/m,16px)] relative shrink-0" property1="Active" />
              <TabItem className="content-stretch flex h-[32px] items-center px-[var(--spacing\/m,16px)] relative shrink-0" />
              <TabItem className="content-stretch flex h-[32px] items-center px-[var(--spacing\/m,16px)] relative shrink-0" />
            </>
          )}
        </div>
      )}
      {isText && (
        <div className="content-stretch flex gap-[24px] items-center relative shrink-0" data-node-id="4605:7079" data-name="List">
          {children || (
            <>
              <TabItem className="content-stretch flex h-[32px] items-center px-[var(--spacing\/m,16px)] relative shrink-0" property1="Active" type="Text" />
              <TabItem className="content-stretch flex h-[32px] items-center px-[var(--spacing\/m,16px)] relative shrink-0" />
              <TabItem className="content-stretch flex h-[32px] items-center px-[var(--spacing\/m,16px)] relative shrink-0" />
            </>
          )}
        </div>
      )}
      {isFilled && (
        <div className="content-stretch flex items-center relative shrink-0" data-node-id="4605:7080" data-name="List">
          {children || (
            <>
              <div className="bg-[var(--ux\/brand\/brand,#2fb54e)] content-stretch flex h-[32px] items-center px-[var(--spacing\/m,16px)] relative rounded-bl-[var(--radius\/s,4px)] rounded-tl-[var(--radius\/s,4px)] shrink-0" data-node-id="4452:7150" data-name="Tab/Item">
                <p className="font-['Roboto:Regular',sans-serif] font-normal leading-[1.5] relative shrink-0 text-[14px] text-[color:var(--color-type\/text\/primary-button,white)] whitespace-nowrap" data-node-id="I4452:7150;4452:7117" style={{ fontVariationSettings: "'wdth' 100" }}>
                  Menu xxx
                </p>
              </div>
              <div className="content-stretch flex h-[32px] items-center px-[var(--spacing\/m,16px)] relative shrink-0" data-node-id="4452:7151" data-name="Tab/Item">
                <p className="font-['Roboto:Regular',sans-serif] font-normal leading-[1.5] relative shrink-0 text-[14px] text-[color:var(--color-type\/text\/tips,#9e9e9e)] whitespace-nowrap" data-node-id="I4452:7151;4265:16084" style={{ fontVariationSettings: "'wdth' 100" }}>
                  Menu xxx
                </p>
              </div>
              <div className="content-stretch flex h-[32px] items-center px-[var(--spacing\/m,16px)] relative rounded-br-[var(--radius\/s,4px)] rounded-tr-[var(--radius\/s,4px)] shrink-0" data-node-id="4452:7157" data-name="Tab/Item">
                <p className="font-['Roboto:Regular',sans-serif] font-normal leading-[1.5] relative shrink-0 text-[14px] text-[color:var(--color-type\/text\/tips,#9e9e9e)] whitespace-nowrap" data-node-id="I4452:7157;4265:16084" style={{ fontVariationSettings: "'wdth' 100" }}>
                  Menu xxx
                </p>
              </div>
            </>
          )}
        </div>
      )}
    </div>
  );
}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: <img src={image} />. Image assets are stored on a remote server for 7 days and can be fetched using the provided URLs until they expire.