Signup with Social Buttons

import { GalleryVerticalEnd } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Field, FieldDescription, FieldGroup, FieldLabel, FieldSeparator } from "@/components/ui/field"
import { Input } from "@/components/ui/input"

export function SignupForm({ className, ...props }) {
  return (
    <div className={className} {...props}>
      <form>
        <FieldGroup>
          <div className="flex flex-col items-center gap-2 text-center">
            <div className="flex size-8 items-center justify-center rounded-md">
              <GalleryVerticalEnd className="size-6" />
            </div>
            <h1 className="text-xl font-bold">Welcome to your workspace</h1>
            <FieldDescription>Already have an account? <a href="#">Sign in</a></FieldDescription>
          </div>
          <Field>
            <FieldLabel htmlFor="email">Email</FieldLabel>
            <Input id="email" type="email" placeholder="you@example.com" required />
          </Field>
          <Field>
            <Button type="submit">Create account</Button>
          </Field>
          <FieldSeparator>Or</FieldSeparator>
          <Field className="grid gap-4 sm:grid-cols-2">
            <Button variant="outline" type="button">Continue with Apple</Button>
            <Button variant="outline" type="button">Continue with Google</Button>
          </Field>
        </FieldGroup>
      </form>
      <FieldDescription className="px-6 text-center">
        By clicking continue you agree to our Terms of Service and Privacy Policy.
      </FieldDescription>
    </div>
  )
}