const imgIconLogoTvu = "https://www.figma.com/api/mcp/asset/567101fd-6017-4e39-a2f0-a18147214c79";
const imgUnion = "https://www.figma.com/api/mcp/asset/49342b51-59f0-44a1-bca7-f04cc00d9d47";
const img = "https://www.figma.com/api/mcp/asset/21091b10-2ccc-431a-b5ab-bc4dc7ed5c44";
const imgSubtract = "https://www.figma.com/api/mcp/asset/b40a04ce-beaf-4e56-8818-686dbf0bf6c4";

function IconLogoTvu({ className }: { className?: string }) {
  return (
    <div className={className || "relative size-[16px]"} data-node-id="1136:3266" data-name="icon/logo/TVU">
      <img alt="" className="absolute block inset-0 max-w-none size-full" src={imgIconLogoTvu} />
    </div>
  );
}

type MenuProps = {
  className?: string;
  icon?: "No";
  property1?: "active" | "Normal";
};

function Menu({ className, icon = "No", property1 = "Normal" }: MenuProps) {
  const isActiveAndNo = property1 === "active" && icon === "No";
  return (
    <div className={className || "content-stretch flex items-center justify-center px-[var(--spacing\\/xs,8px)] relative"} id={isActiveAndNo ? "node-4771_7142" : "node-4771_7140"}>
      <p className={`font-["Roboto:SemiBold",sans-serif] font-semibold leading-[1.5] relative shrink-0 text-[18px] whitespace-nowrap ${isActiveAndNo ? String.raw`text-[color:var(--color-type\/text\/text_1,#f8f8f8)]` : String.raw`text-[color:var(--color-type\/text\/tips-\&-button,#9e9e9e)]`}`} id={isActiveAndNo ? "node-4771_7143" : "node-4771_7141"} style={{ fontVariationSettings: "'wdth' 100" }}>
        Menu 1
      </p>
    </div>
  );
}

type TopBarProps = {
  className?: string;
  menu?: React.ReactNode | null;
  rightContent?: React.ReactNode | null;
  showMenu?: boolean;
  showSearchBox?: boolean;
  tag?: "After Login" | "Before Login";
};

export default function TopBar({ className, menu = null, rightContent = null, showMenu = true, showSearchBox = false, tag = "After Login" }: TopBarProps) {
  const isAfterLogin = tag === "After Login";
  const isBeforeLogin = tag === "Before Login";
  return (
    <div className={className || `${String.raw`bg-[var(--color-type\/background\/top-bar,black)] border border-[var(--color-type\/line\/deep-divider,#353535)] border-solid content-stretch flex gap-[80px] items-center px-[var(--spacing\/m,16px)] py-[var(--spacing\/xs,8px)] relative w-[1920px] `}${isBeforeLogin ? "h-[64px]" : ""}`} id={isBeforeLogin ? "node-4771_7226" : "node-4771_7174"}>
      <div className="content-stretch flex gap-[var(--spacing\/m,16px)] items-center relative shrink-0" id={isBeforeLogin ? "node-4771_7227" : "node-4771_7175"} data-name="Logo & Service Name">
        <IconLogoTvu className="relative shrink-0 size-[32px]" />
        <p className="font-['Roboto:SemiBold',sans-serif] font-semibold leading-[1.5] relative shrink-0 text-[16px] text-[color:var(--color-type\/text\/heading-\&-button,white)] whitespace-nowrap" id={isBeforeLogin ? "node-4771_7229" : "node-4771_7177"} style={{ fontVariationSettings: "'wdth' 100" }}>
          Product Name
        </p>
      </div>
      {isAfterLogin && (
        <>
          <div className="content-stretch flex flex-[1_0_0] gap-[var(--spacing\/xxl,40px)] items-center min-w-px relative" data-node-id="5170:21353">
            {showSearchBox && (
              <div className="border border-[var(--ux\/grey\/grey-8-\#595959,#595959)] border-solid content-stretch flex gap-[8px] h-[32px] items-center px-[12px] py-[8px] relative rounded-[4px] shrink-0 w-[480px]" data-node-id="4771:7179" data-name="input box/line">
                <div className="relative shrink-0 size-[16px]" data-node-id="I4771:7179;1818:8161" data-name="icon/Search/Search">
                  <div className="absolute inset-[6.26%_6.26%_6.25%_6.25%]" data-node-id="I4771:7179;1818:8161;1845:17670" data-name="Union">
                    <img alt="" className="absolute block inset-0 max-w-none size-full" src={imgUnion} />
                  </div>
                </div>
                <p className="flex-[1_0_0] font-['Roboto:Regular',sans-serif] font-normal leading-[1.5] min-w-px relative text-[14px] text-[color:var(--ux\/grey\/grey-7-\#7b7b7b,#7b7b7b)]" data-node-id="I4771:7179;1818:8162" style={{ fontVariationSettings: "'wdth' 100" }}>
                  Search
                </p>
              </div>
            )}
            {showMenu && (
              <div className="content-stretch flex flex-[1_0_0] gap-[var(--spacing\/m,16px)] items-center justify-center min-w-px relative" data-node-id="4771:7180" data-name="Menu">
                {menu || (
                  <>
                    <Menu className="content-stretch flex items-center justify-center px-[var(--spacing\/xs,8px)] relative shrink-0" property1="active" />
                    <div className="content-stretch flex items-center justify-center px-[var(--spacing\/xs,8px)] relative shrink-0" data-node-id="4771:7182" data-name="Menu">
                      <p className="font-['Roboto:SemiBold',sans-serif] font-semibold leading-[1.5] relative shrink-0 text-[18px] text-[color:var(--color-type\/text\/tips-\&-button,#9e9e9e)] whitespace-nowrap" data-node-id="I4771:7182;1215:458" style={{ fontVariationSettings: "'wdth' 100" }}>
                        Menu 2
                      </p>
                    </div>
                    <div className="content-stretch flex items-center justify-center px-[var(--spacing\/xs,8px)] relative shrink-0" data-node-id="4771:7183" data-name="Menu">
                      <p className="font-['Roboto:SemiBold',sans-serif] font-semibold leading-[1.5] relative shrink-0 text-[18px] text-[color:var(--color-type\/text\/tips-\&-button,#9e9e9e)] whitespace-nowrap" data-node-id="I4771:7183;1215:458" style={{ fontVariationSettings: "'wdth' 100" }}>
                        Menu 3
                      </p>
                    </div>
                    <div className="content-stretch flex items-center justify-center px-[var(--spacing\/xs,8px)] relative shrink-0" data-node-id="4771:7184" data-name="Menu">
                      <p className="font-['Roboto:SemiBold',sans-serif] font-semibold leading-[1.5] relative shrink-0 text-[18px] text-[color:var(--color-type\/text\/tips-\&-button,#9e9e9e)] whitespace-nowrap" data-node-id="I4771:7184;1215:458" style={{ fontVariationSettings: "'wdth' 100" }}>
                        Menu 4
                      </p>
                    </div>
                    <div className="content-stretch flex items-center justify-center px-[var(--spacing\/xs,8px)] relative shrink-0" data-node-id="4771:7185" data-name="Menu">
                      <p className="font-['Roboto:SemiBold',sans-serif] font-semibold leading-[1.5] relative shrink-0 text-[18px] text-[color:var(--color-type\/text\/tips-\&-button,#9e9e9e)] whitespace-nowrap" data-node-id="I4771:7185;1215:458" style={{ fontVariationSettings: "'wdth' 100" }}>
                        Menu 5
                      </p>
                    </div>
                    <div className="content-stretch flex items-center justify-center px-[var(--spacing\/xs,8px)] relative shrink-0" data-node-id="4771:7186" data-name="Menu">
                      <p className="font-['Roboto:SemiBold',sans-serif] font-semibold leading-[1.5] relative shrink-0 text-[18px] text-[color:var(--color-type\/text\/tips-\&-button,#9e9e9e)] whitespace-nowrap" data-node-id="I4771:7186;1215:458" style={{ fontVariationSettings: "'wdth' 100" }}>
                        Menu 6
                      </p>
                    </div>
                    <div className="content-stretch flex items-center justify-center px-[var(--spacing\/xs,8px)] relative shrink-0" data-node-id="4771:7187" data-name="Menu">
                      <p className="font-['Roboto:SemiBold',sans-serif] font-semibold leading-[1.5] relative shrink-0 text-[18px] text-[color:var(--color-type\/text\/tips-\&-button,#9e9e9e)] whitespace-nowrap" data-node-id="I4771:7187;1215:458" style={{ fontVariationSettings: "'wdth' 100" }}>
                        Menu 7
                      </p>
                    </div>
                  </>
                )}
              </div>
            )}
          </div>
          <div className="flex flex-row items-center self-stretch">
            <div className="content-stretch flex h-full items-center relative shrink-0" data-node-id="4771:7188" data-name="Right_content">
              {rightContent || (
                <>
                  <div className="content-stretch flex h-full items-center relative shrink-0" data-node-id="4771:7189" data-name="Time Zone">
                    <div className="content-stretch flex flex-col gap-[8px] h-full items-center pt-[3px] px-[8px] relative shrink-0" data-node-id="4771:7190">
                      <p className="font-['Roboto:Regular',sans-serif] font-normal leading-[normal] relative shrink-0 text-[12px] text-[color:var(--color-type\/text\/placeholder-\&-button,#7b7b7b)] text-center whitespace-nowrap" data-node-id="4771:7192" style={{ fontVariationSettings: "'wdth' 100" }}>
                        Asia / Shanghai
                      </p>
                      <div className="content-stretch flex gap-[2px] items-end justify-center relative shrink-0" data-node-id="4771:7193">
                        <p className="font-['Digital_Numbers:Regular',sans-serif] leading-[normal] not-italic relative shrink-0 text-[16px] text-[color:var(--ux\/orange\/time-zone,#d39f39)] text-center whitespace-nowrap" data-node-id="4771:7194">
                          13:39:43
                        </p>
                      </div>
                    </div>
                    <div className="content-stretch flex h-[40px] items-center px-[4px] py-[10px] relative shrink-0" data-node-id="4771:7196">
                      <div className="bg-[var(--color-type\/line\/light-divider,#434343)] h-[24px] relative shrink-0 w-px" data-node-id="4771:7197" />
                    </div>
                  </div>
                  <div className="overflow-clip relative shrink-0 size-[40px]" data-node-id="4771:7220" data-name="Account Name">
                    <div className="absolute left-0 size-[32px] top-0" data-node-id="4771:7221" />
                    <div className="absolute left-[6px] size-[28px] top-[6px]" data-node-id="4771:7222" data-name="椭圆形">
                      <img alt="" className="absolute block inset-0 max-w-none size-full" src={img} />
                    </div>
                    <p className="-translate-x-1/2 absolute font-['Helvetica_Neue:Bold',sans-serif] leading-[14px] left-[20px] not-italic text-[14px] text-[color:var(--color-type\/text\/heading-\&-button,white)] text-center top-[13px] whitespace-nowrap" data-node-id="4771:7223">
                      T
                    </p>
                  </div>
                  <div className="overflow-clip relative shrink-0 size-[32px]" data-node-id="4771:7225" data-name="icon/menu/3">
                    <div className="absolute inset-[6.25%]" data-node-id="I4771:7225;91:916" data-name="Subtract">
                      <img alt="" className="absolute block inset-0 max-w-none size-full" src={imgSubtract} />
                    </div>
                  </div>
                </>
              )}
            </div>
          </div>
        </>
      )}
      {isBeforeLogin && (
        <>
          <div className="content-stretch flex flex-[1_0_0] gap-[var(--spacing\/xxl,40px)] h-[27px] items-center min-w-px relative" data-node-id="4771:7230" data-name="Menu">
            {menu || null}
          </div>
          <div className="content-stretch flex gap-[var(--spacing\/l,24px)] h-full items-center relative shrink-0" data-node-id="4771:7240" data-name="Right_content">
            {rightContent || (
              <div className="h-[40px] relative shrink-0 w-[120px]" data-node-id="4771:7243" data-name="Elements/Button/Big">
                <div className="absolute bg-[var(--ux\/brand\/brand,#2fb54e)] inset-0 overflow-clip rounded-[32px]" data-node-id="I4771:7243;0:36095" data-name="Elements/Button/Big">
                  <div className="absolute bg-[var(--ux\/brand\/brand,#2fb54e)] inset-0 rounded-[32px]" data-node-id="I4771:7243;0:36096" data-name="Rectangle" />
                  <p className="absolute font-['Open_Sans:Bold',sans-serif] font-bold leading-[36px] left-[26.25%] right-[25.63%] text-[14px] text-[color:var(--color-type\/text\/heading-\&-button,white)] text-center top-[calc(50%-18px)] whitespace-nowrap" data-node-id="I4771:7243;0:36097" style={{ fontVariationSettings: "'wdth' 100" }}>
                    Try it now
                  </p>
                </div>
              </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/16 pop title: Font(family: "Roboto", style: SemiBold, size: 16, weight: 600, lineHeight: 1.5, letterSpacing: 0), Roboto/18 headline 2: Font(family: "Roboto", style: SemiBold, size: 18, weight: 600, 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.