Border Beam

"use client";

import { BorderBeam } from "@/lab/magicui/ui/border-beam";

import { Fit } from "./fit";

export default function BorderBeamDemo() {
  return (
    <Fit width={370} height={330}>
      <div className="relative flex h-full w-full flex-col gap-6 overflow-hidden rounded-xl border border-neutral-200 bg-white py-6 text-neutral-950 shadow-sm">
        <div className="px-6">
          <div className="leading-none font-semibold">Login</div>
          <div className="mt-1.5 text-sm text-neutral-500">Enter your credentials to access your account.</div>
        </div>
        <form className="grid gap-4 px-6" onSubmit={(e) => e.preventDefault()}>
          <label className="flex flex-col space-y-1.5 text-sm font-medium">
            <span>Email</span>
            <input
              type="email"
              placeholder="Enter your email"
              className="h-9 rounded-md border border-neutral-200 px-3 text-sm font-normal outline-none focus:border-neutral-400"
            />
          </label>
          <label className="flex flex-col space-y-1.5 text-sm font-medium">
            <span>Password</span>
            <input
              type="password"
              placeholder="Enter your password"
              className="h-9 rounded-md border border-neutral-200 px-3 text-sm font-normal outline-none focus:border-neutral-400"
            />
          </label>
        </form>
        <div className="flex justify-between px-6">
          <button type="button" className="h-9 rounded-md border border-neutral-200 px-4 text-sm font-medium">
            Register
          </button>
          <button type="button" className="h-9 rounded-md bg-neutral-900 px-4 text-sm font-medium text-white">
            Login
          </button>
        </div>
        <BorderBeam duration={8} size={100} />
      </div>
    </Fit>
  );
}