Stop rebuilding UI.
Design system and
component library, unified.

import Image from "next/image"
import { RiArrowDownSLine, RiLock2Line } from "@create-ui/assets/icons"

import { Button } from "@/components/ui/button"
import { Checkbox } from "@/components/ui/checkbox"
import { CheckboxGroup } from "@/components/ui/checkbox-group"
import {
  Field,
  FieldContent,
  FieldGroup,
  FieldLabel,
} from "@/components/ui/field"
import { Input } from "@/components/ui/input"
import {
  InputGroup,
  InputGroupControl,
  InputGroupSlot,
} from "@/components/ui/input-group"
import { Label, LabelMain } from "@/components/ui/label"
import { Separator } from "@/components/ui/separator"
import { SocialLoginButton } from "@/components/ui/social-login-button"
import { TextLink } from "@/components/ui/text-link"

export function SignInCard() {
  return (
    <form className="bg-static border-light shadow-neutral-xs flex w-full flex-col overflow-hidden rounded-xl border">
      <div className="p-component-lg flex flex-col gap-2">
        <div className="flex items-center justify-between gap-2">
          <h3 className="text-body-md text-strongest font-semibold">Sign In</h3>
          <Image
            src="/logomark.svg"
            alt="Create UI"
            width={24}
            height={24}
          />
        </div>
        <p className="text-body-sm text-body">
          Please enter your account informations.
        </p>
      </div>

      <Separator />

      <div className="gap-component-lg p-component-lg flex flex-col">
        <SocialLoginButton brand="google" appearance="white" size="md" />

        <FieldGroup className="gap-component-lg">
          <Field size="sm">
            <FieldLabel>E-Mail Address</FieldLabel>
            <Input type="email" placeholder="[email protected]" />
          </Field>

          <Field size="sm">
            <FieldLabel>Password</FieldLabel>
            <InputGroup>
              <InputGroupSlot>
                <RiLock2Line />
                <InputGroupControl type="password" placeholder="••••••••" />
              </InputGroupSlot>
            </InputGroup>
          </Field>
        </FieldGroup>

        <div className="flex items-center justify-between">
          <CheckboxGroup variant="primary" size="sm" placement="left">
            <Checkbox defaultChecked />
            <FieldContent>
              <LabelMain>
                <Label>Remember Me</Label>
              </LabelMain>
            </FieldContent>
          </CheckboxGroup>
          <TextLink variant="neutral" size="xs" underline>
            Forgot Password?
          </TextLink>
        </div>
      </div>

      <Separator align="center">
        <RiArrowDownSLine />
      </Separator>

      <div className="p-component-lg flex flex-col gap-2">
        <Button variant="primary" appearance="solid" size="lg">
          Sign In
        </Button>
        <div className="text-paragraph-xs text-body flex items-center justify-center gap-1">
          <span>Don't have an account?</span>
          <TextLink variant="primary" size="xs" underline>
            Sign Up
          </TextLink>
        </div>
      </div>
    </form>
  )
}