file-starter/src/client/home/pages/FinancialDashboard/components/ModuleHeader.tsx

interface ModuleHeaderProps {
  className?: string;
  title?: string;
}

export default function ModuleHeader({ className, title }: ModuleHeaderProps) {
  return (
    <div className={className} data-name="报表头部">
      <div className="absolute bg-gradient-to-r blur-[14.5px] bottom-0 filter from-[rgba(162,190,255,0)] left-[18.55%] right-[18.15%] to-[95.957%] to-[rgba(162,190,255,0)] top-0 via-[51.477%] via-[rgba(162,190,255,0.302)]" />
      <div className="absolute flex inset-[38.16%_77.08%_38.16%_0.03%] items-center justify-center">
        <div className="flex-none h-[9px] rotate-[180deg] scale-y-[-100%] w-[136px]">
          <div className="relative size-full" data-name="左侧">
            <img alt="" className="block max-w-none size-full" src="/financial-dashboard/header-left.svg" />
          </div>
        </div>
      </div>
      <div className="absolute flex inset-[38.16%_0.03%_38.16%_77.08%] items-center justify-center">
        <div className="flex-none h-[9px] rotate-[180deg] scale-y-[-100%] w-[136px]">
          <div className="relative size-full" data-name="右侧">
            <img alt="" className="block max-w-none size-full" src="/financial-dashboard/header-right.svg" />
          </div>
        </div>
      </div>
      <div className="absolute flex inset-[38.16%_0.03%_38.16%_0.03%] items-center justify-center">
        <div className="flex-none h-[9px] rotate-[180deg] scale-y-[-100%] w-[136px]">
          {/* <div className="relative size-full" data-name="中间">
            <img alt="" className="block max-w-none size-full" src="/financial-dashboard/header-top-nav.svg" />
          </div> */}
        </div>
      </div>
      {title && (
        <p className="absolute inset-[19.74%_29.03%_19.74%_28.81%] leading-[normal] text-[20px] text-center text-white whitespace-pre-wrap">
          {title}
        </p>
      )}
    </div>
  );
}