Function LoginPageLayout

apps/webapp/app/components/LoginPageLayout.tsx:40–87

({ children }: { children: React.ReactNode })

];

export function LoginPageLayout({ children }: { children: React.ReactNode }) {
  const [randomQuote, setRandomQuote] = useState<QuoteType | null>(null);
  useEffect(() => {
    const randomIndex = Math.floor(Math.random() * quotes.length);
    setRandomQuote(quotes[randomIndex]);
  }, []);

  return (
    <main className="grid h-full grid-cols-1 md:grid-cols-2">
      <div className="border-r border-grid-bright bg-background-bright">
        <div className="flex h-full flex-col items-center justify-between p-6">
          <div className="flex w-full items-center justify-between">
            <a href="https://trigger.dev">
              <LogoType className="w-36" />
            </a>
            <LinkButton to="https://trigger.dev/docs" variant={"tertiary/small"} LeadingIcon="docs">
              Documentation
            </LinkButton>
          </div>
          <div className="flex h-full max-w-sm items-center justify-center">{children}</div>
          <Paragraph variant="small" className="text-center">
            Having login issues? <TextLink href="https://@trigger.dev/contact">Email us</TextLink>{" "}
            or <TextLink href="https://trigger.dev/discord">ask us in Discord</TextLink>
          </Paragraph>
        </div>
      </div>
      <div className="hidden grid-rows-[1fr_auto] pb-6 md:grid">
        <div className="flex h-full flex-col items-center justify-center px-16">
          <Header3 className="relative text-center text-2xl font-normal leading-8 text-text-dimmed transition before:relative before:right-1 before:top-0 before:text-6xl before:text-charcoal-750 before:content-['❝'] lg-height:text-xl md-height:text-lg">
            {randomQuote?.quote}
          </Header3>
          <Paragraph className="mt-4 text-text-dimmed/60">{randomQuote?.person}</Paragraph>
        </div>
        <div className="flex flex-col items-center gap-4 px-8">
          <Paragraph>Trusted by developers at</Paragraph>
          <div className="flex w-full flex-wrap items-center justify-center gap-x-6 gap-y-3 text-charcoal-500 xl:justify-between xl:gap-0">
            <VerizonLogo />
            <ShopifyLogo />
            <OktaLogo />
            <ATAndTLogo />
            <AppsmithLogo />
            <CalComLogo />
          </div>
        </div>
      </div>
    </main>
  );
}