Building Blocks for the Web

import { styled } from "styled-system/jsx";
import { OTPForm } from "@/components/otp-form";

export default function OTPPage() {
  return (
    <styled.div
      css={{
        display: "flex",
        minH: "svh",
        w: "full",
        alignItems: "center",
        justifyContent: "center",
        p: "6",
        md: { p: "10" },
      }}
    >
      <styled.div css={{ w: "full", maxW: "xs" }}>
        <OTPForm />
      </styled.div>
    </styled.div>
  );
}

import { styled } from "styled-system/jsx";
import { OTPForm } from "@/components/otp-form";

export default function OTPPage() {
  return (
    <styled.div css={{ display: "flex", minH: "svh", w: "full" }}>
      <styled.div
        css={{
          display: "flex",
          w: "full",
          alignItems: "center",
          justifyContent: "center",
          p: "6",
          lg: { w: "1/2" },
        }}
      >
        <styled.div css={{ w: "full", maxW: "xs" }}>
          <OTPForm />
        </styled.div>
      </styled.div>
      <styled.div css={{ pos: "relative", display: "none", w: "1/2", lg: { display: "block" } }}>
        <styled.img
          alt="Authentication"
          css={{
            pos: "absolute",
            inset: "0",
            w: "full",
            h: "full",
            objectFit: "cover",
            _dark: {
              filter: "brightness(0.2) grayscale(1)",
            },
          }}
          height={1080}
          src="/placeholder.svg"
          width={1920}
        />
      </styled.div>
    </styled.div>
  );
}

import { LuGalleryVerticalEnd } from "react-icons/lu";
import { css } from "styled-system/css";
import { styled } from "styled-system/jsx";
import { OTPForm } from "@/components/otp-form";

export default function OTPPage() {
  return (
    <styled.div
      css={{
        bg: "muted",
        display: "flex",
        minH: "svh",
        flexDir: "column",
        alignItems: "center",
        justifyContent: "center",
        gap: "6",
        p: "6",
        md: { p: "10" },
      }}
    >
      <styled.div css={{ display: "flex", w: "full", maxW: "xs", flexDir: "column", gap: "6" }}>
        <styled.a
          href="#"
          css={{
            display: "flex",
            alignItems: "center",
            gap: "2",
            alignSelf: "center",
            fontWeight: "medium",
          }}
        >
          <styled.div
            css={{
              bg: "primary",
              color: "primary.fg",
              display: "flex",
              w: "6",
              h: "6",
              alignItems: "center",
              justifyContent: "center",
              rounded: "md",
            }}
          >
            <LuGalleryVerticalEnd className={css({ w: "4", h: "4" })} />
          </styled.div>
          Acme Inc.
        </styled.a>
        <OTPForm />
      </styled.div>
    </styled.div>
  );
}

import { styled } from "styled-system/jsx";
import { OTPForm } from "@/components/otp-form";

export default function OTPPage() {
  return (
    <styled.div
      css={{
        display: "flex",
        minH: "svh",
        w: "full",
        alignItems: "center",
        justifyContent: "center",
        p: "6",
        md: { p: "10" },
      }}
    >
      <styled.div css={{ w: "full", maxW: "sm", md: { maxW: "3xl" } }}>
        <OTPForm />
      </styled.div>
    </styled.div>
  );
}

import { styled } from "styled-system/jsx";
import { OTPForm } from "@/components/otp-form";

export default function OTPPage() {
  return (
    <styled.div
      css={{
        bg: "bg",
        display: "flex",
        minH: "svh",
        flexDir: "column",
        alignItems: "center",
        justifyContent: "center",
        gap: "6",
        p: "6",
        md: { p: "10" },
      }}
    >
      <styled.div css={{ w: "full", maxW: "sm" }}>
        <OTPForm />
      </styled.div>
    </styled.div>
  );
}