适用于 Web 的构建块

<script setup lang="ts">
import OTPForm from "@/components/OTPForm.vue"
</script>

<template>
  <div class="flex min-h-svh w-full items-center justify-center p-6 md:p-10">
    <div class="w-full max-w-xs">
      <OTPForm />
    </div>
  </div>
</template>

<script setup lang="ts">
import OTPForm from "~/registry/new-york-v4/blocks/otp-02/components/OTPForm.vue"
</script>

<template>
  <div class="flex min-h-svh w-full">
    <div class="flex w-full items-center justify-center p-6 lg:w-1/2">
      <div class="w-full max-w-xs">
        <OTPForm />
      </div>
    </div>
    <div class="relative hidden w-1/2 lg:block">
      <img
        alt="Authentication"
        class="absolute inset-0 h-full w-full object-cover"
        height="{1080}"
        src="/placeholder.svg"
        width="{1920}"
      >
    </div>
  </div>
</template>

<script setup lang="ts">
import { GalleryVerticalEnd } from "lucide-vue-next"

import OTPForm from "@/components/OTPForm.vue"
</script>

<template>
  <div class="bg-muted flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10">
    <div class="flex w-full max-w-xs flex-col gap-6">
      <a href="#" class="flex items-center gap-2 self-center font-medium">
        <div class="bg-primary text-primary-foreground flex size-6 items-center justify-center rounded-md">
          <GalleryVerticalEnd class="size-4" />
        </div>
        Acme Inc.
      </a>
      <OTPForm />
    </div>
  </div>
</template>

<script setup lang="ts">
import OTPForm from "@/components/OTPForm.vue"
</script>

<template>
  <div class="flex min-h-svh w-full items-center justify-center p-6 md:p-10">
    <div class="w-full max-w-sm md:max-w-3xl">
      <OTPForm />
    </div>
  </div>
</template>

<script setup lang="ts">
import OTPForm from "@/components/OTPForm.vue"
</script>

<template>
  <div class="bg-background flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10">
    <div class="w-full max-w-sm">
      <OTPForm />
    </div>
  </div>
</template>