import { DotPattern } from "@glinui/ui"


export function Variants() {
  return (
    <div data-glin-theme="dark" className="grid w-full gap-3 sm:grid-cols-3">
      <div className="relative isolate flex h-44 items-end overflow-hidden rounded-xl bg-[var(--surface-0)] p-3">
        <DotPattern className="[mask-image:radial-gradient(240px_circle_at_center,white,transparent)]" />
        <span className="relative z-10 rounded-full bg-black/70 px-2.5 py-1 text-xs font-medium text-white">Default</span>
      </div>
      <div className="relative isolate flex h-44 items-end overflow-hidden rounded-xl bg-[var(--surface-0)] p-3">
        <DotPattern dotSize={2.5} gap={30} dotOpacity={0.35} className="[mask-image:radial-gradient(240px_circle_at_center,white,transparent)]" />
        <span className="relative z-10 rounded-full bg-black/70 px-2.5 py-1 text-xs font-medium text-white">Large dots</span>
      </div>
      <div className="relative isolate flex h-44 items-end overflow-hidden rounded-xl bg-[var(--surface-0)] p-3">
        <DotPattern dotSize={1} gap={12} dotOpacity={0.3} className="[mask-image:radial-gradient(240px_circle_at_center,white,transparent)]" />
        <span className="relative z-10 rounded-full bg-black/70 px-2.5 py-1 text-xs font-medium text-white">Tight</span>
      </div>
    </div>
  )
}

import { DotPattern, Button, Heading, Input, Label, Text } from "@glinui/ui"


export function SignIn() {
  return (
    <section data-glin-theme="dark" className="relative isolate flex min-h-[26rem] w-full items-center justify-center overflow-hidden rounded-xl bg-[var(--surface-0)] px-4 py-10">
      <DotPattern className="[mask-image:radial-gradient(520px_circle_at_center,white,transparent)]" />
      <form className="relative z-10 flex w-full max-w-sm flex-col gap-4 rounded-2xl border border-[var(--line-soft)] bg-[var(--surface-1)] p-6 text-left [box-shadow:var(--shadow-lg)]">
        <div className="flex flex-col gap-1">
          <Heading level={2} size="sm">Sign in to Northwind</Heading>
          <Text size="sm" variant="muted">Use your work email to continue.</Text>
        </div>
        <div className="flex flex-col gap-1.5">
          <Label htmlFor="email">Work email</Label>
          <Input id="email" type="email" autoComplete="email" placeholder="you@company.com" />
        </div>
        <div className="flex flex-col gap-1.5">
          <Label htmlFor="password">Password</Label>
          <Input id="password" type="password" autoComplete="current-password" placeholder="At least 12 characters" />
        </div>
        <Button type="submit" className="w-full">Continue</Button>
      </form>
    </section>
  )
}