Shine Border

"use client";

import { ShineBorder } from "@/lab/magicui/ui/shine-border";

import { Fit } from "./fit";

export default function ShineBorderDemo() {
  return (
    <Fit width={360} 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">
        <ShineBorder shineColor={["#A07CFE", "#FE8FB5", "#FFBE7B"]} />
        <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="grid gap-2 text-sm font-medium">
            Email
            <input
              type="email"
              placeholder="name@example.com"
              className="h-9 rounded-md border border-neutral-200 px-3 text-sm font-normal outline-none focus:border-neutral-400"
            />
          </label>
          <label className="grid gap-2 text-sm font-medium">
            Password
            <input
              type="password"
              className="h-9 rounded-md border border-neutral-200 px-3 text-sm outline-none focus:border-neutral-400"
            />
          </label>
        </form>
        <div className="px-6">
          <button type="button" className="h-9 w-full rounded-md bg-neutral-900 text-sm font-medium text-white">
            Sign In
          </button>
        </div>
      </div>
    </Fit>
  );
}