Authentication

'use client';
import { useState } from 'react';
import { IconEyeClosed, IconEye } from '@tabler/icons-react';
import { Card, CardBody, CardHeader, CardTitle } from '@/components/ui/Card';
import Input from '@/components/ui/Input';
import Link from '@/components/ui/Link';
import { Checkbox } from '@/components/ui/Checkbox';
import Button from '@/components/ui/Button';
import Divider from '@/components/ui/Divider';

export default function Page() {
  const [type, setType] = useState<'text' | 'password'>('password');
  return (
    <div className="flex h-screen items-center justify-center">
      <Card className="w-[90%] max-w-120">
        <CardHeader>
          <CardTitle className="text-xl">Create An Account</CardTitle>
        </CardHeader>
        <p className="mb-5 px-4 text-sm text-neutral-500">
          Already have an account?{' '}
          <Link href="#" underline>
            Login
          </Link>
        </p>
        <CardBody>
          <form action="#" className="space-y-3">
            <div className="grid grid-cols-2 gap-2">
              <Input required placeholder="First Name" />
              <Input required placeholder="Last Name" />
            </div>
            <Input required placeholder="Email" type="email" />
            <Input
              required
              placeholder="Password"
              type={type}
              suffix={
                type === 'password' ? (
                  <IconEye onClick={() => setType('text')} color="gray" size={20} />
                ) : (
                  <IconEyeClosed onClick={() => setType('password')} color="gray" size={20} />
                )
              }
            />
            <Checkbox required value="yes" size="sm" id="privacy-policy" name="privacy-policy" className="text-sm">
              I agree to the <Link href="#">Privacy Policy</Link>
            </Checkbox>
            <Button className="mt-5 w-full" type="submit">
              Create Account
            </Button>
          </form>
          <Divider className="text-gray-400 dark:text-gray-500">or register with</Divider>
          <div className="grid grid-cols-2 gap-2">
            <Button variant="bordered" colors="neutral" className="gap-1">
              <IconGoogle /> Google
            </Button>
            <Button variant="bordered" colors="neutral" className="gap-1">
              <IconApple className="dark:fill-white" /> Apple
            </Button>
          </div>
        </CardBody>
      </Card>
    </div>
  );
}

function IconGoogle({ className }: { className?: string }) {
  return (
    <svg
      className={className}
      width="1em"
      height="1em"
      viewBox="0 0 256 262"
      xmlns="http://www.w3.org/2000/svg"
      preserveAspectRatio="xMidYMid">
      <path
        d="M255.878 133.451c0-10.734-.871-18.567-2.756-26.69H130.55v48.448h71.947c-1.45 12.04-9.283 30.172-26.69 42.356l-.244 1.622 38.755 30.023 2.685.268c24.659-22.774 38.875-56.282 38.875-96.027"
        fill="#4285F4"
      />
      <path
        d="M130.55 261.1c35.248 0 64.839-11.605 86.453-31.622l-41.196-31.913c-11.024 7.688-25.82 13.055-45.257 13.055-34.523 0-63.824-22.773-74.269-54.25l-1.531.13-40.298 31.187-.527 1.465C35.393 231.798 79.49 261.1 130.55 261.1"
        fill="#34A853"
      />
      <path
        d="M56.281 156.37c-2.756-8.123-4.351-16.827-4.351-25.82 0-8.994 1.595-17.697 4.206-25.82l-.073-1.73L15.26 71.312l-1.335.635C5.077 89.644 0 109.517 0 130.55s5.077 40.905 13.925 58.602l42.356-32.782"
        fill="#FBBC05"
      />
      <path
        d="M130.55 50.479c24.514 0 41.05 10.589 50.479 19.438l36.844-35.974C195.245 12.91 165.798 0 130.55 0 79.49 0 35.393 29.301 13.925 71.947l42.211 32.783c10.59-31.477 39.891-54.251 74.414-54.251"
        fill="#EB4335"
      />
    </svg>
  );
}

function IconApple({ className }: { className?: string }) {
  return (
    <svg
      className={className}
      xmlns="http://www.w3.org/2000/svg"
      xmlSpace="preserve"
      width="1em"
      height="1em"
      viewBox="0 0 814 1000">
      <path d="M788.1 340.9c-5.8 4.5-108.2 62.2-108.2 190.5 0 148.4 130.3 200.9 134.2 202.2-.6 3.2-20.7 71.9-68.7 141.9-42.8 61.6-87.5 123.1-155.5 123.1s-85.5-39.5-164-39.5c-76.5 0-103.7 40.8-165.9 40.8s-105.6-57-155.5-127C46.7 790.7 0 663 0 541.8c0-194.4 126.4-297.5 250.8-297.5 66.1 0 121.2 43.4 162.7 43.4 39.5 0 101.1-46 176.3-46 28.5 0 130.9 2.6 198.3 99.2zm-234-181.5c31.1-36.9 53.1-88.1 53.1-139.3 0-7.1-.6-14.3-1.9-20.1-50.6 1.9-110.8 33.7-147.1 75.8-28.5 32.4-55.1 83.6-55.1 135.5 0 7.8 1.3 15.6 1.9 18.1 3.2.6 8.4 1.3 13.6 1.3 45.4 0 102.5-30.4 135.5-71.3z" />
    </svg>
  );
}

import Image from 'next/image';
import Heading from '@/components/ui/Heading';
import Button from '@/components/ui/Button';
import Divider from '@/components/ui/Divider';
import Input from '@/components/ui/Input';
import { cn } from '@/lib/utils';
import Link from '@/components/ui/Link';
export default function Page() {
  return (
    <div className="flex h-screen">
      <div className="flex w-full shrink-0 flex-col justify-center px-4 sm:px-10 md:w-[50%] md:max-w-160 md:px-[6%]">
        <Heading as="h3">Create a free account</Heading>
        <p className="text-sm text-gray-400 dark:text-gray-300">Get started with your 30 days free trail</p>
        <div className="mt-10 space-y-3">
          <Button pill variant="bordered" colors="neutral" className="w-full gap-1">
            <IconGoogle />
            Sign up with Google
          </Button>
          <Button pill variant="bordered" colors="neutral" className="w-full gap-1">
            <IconX className="dark:fill-white" />
            Sign up with X
          </Button>
          <Button pill variant="bordered" colors="neutral" className="w-full gap-1">
            <IconApple className="dark:fill-white" />
            Sign up with Apple
          </Button>
        </div>
        <Divider className="my-10 text-gray-400 dark:text-gray-500">Or</Divider>
        <form action="#">
          <div className="space-y-3">
            <LabelInput required label="Name" placeholder="Enter your name" className="rounded-full" />
            <LabelInput required type="email" label="Email" placeholder="Enter your email" className="rounded-full" />
          </div>
          <Button pill className="mt-10 w-full" type="submit">
            Sign up
          </Button>
        </form>
        <p className="mt-8 text-sm">
          Already have an account?{' '}
          <Link href="#" className="font-semibold" underline>
            Login in
          </Link>
        </p>
      </div>
      <div className="relative hidden flex-1 md:block">
        <Image src="/images/data-center.jpeg" className="h-full w-full" width={1200} height={800} alt="data center" />
        <div className="absolute bottom-2 left-2 h-50 w-[calc(100%_-_16px)] rounded-md bg-black/20 p-6 text-lg text-white backdrop-blur-md">
          Our cloud service delivers <strong>military-grade stability</strong> with <strong>99.99% uptime</strong>,
          <strong>40% more cost-effective</strong>
          than major competitors, and <strong>ultra-low latency</strong> via <strong>50+ global nodes</strong>, ensuring
          secure, scalable solutions for businesses worldwide.
        </div>
      </div>
    </div>
  );
}

// custom Input with label
function LabelInput({ label, required, ...props }: React.ComponentProps<typeof Input> & { label: string }) {
  return (
    <div>
      <p className={cn('relative mb-1 text-sm', { 'after:ml-1 after:text-red-400 after:content-["*"]': required })}>
        {label}
      </p>
      <Input required={required} {...props} />
    </div>
  );
}

function IconGoogle({ className }: { className?: string }) {
  return (
    <svg
      className={className}
      width="1em"
      height="1em"
      viewBox="0 0 256 262"
      xmlns="http://www.w3.org/2000/svg"
      preserveAspectRatio="xMidYMid">
      <path
        d="M255.878 133.451c0-10.734-.871-18.567-2.756-26.69H130.55v48.448h71.947c-1.45 12.04-9.283 30.172-26.69 42.356l-.244 1.622 38.755 30.023 2.685.268c24.659-22.774 38.875-56.282 38.875-96.027"
        fill="#4285F4"
      />
      <path
        d="M130.55 261.1c35.248 0 64.839-11.605 86.453-31.622l-41.196-31.913c-11.024 7.688-25.82 13.055-45.257 13.055-34.523 0-63.824-22.773-74.269-54.25l-1.531.13-40.298 31.187-.527 1.465C35.393 231.798 79.49 261.1 130.55 261.1"
        fill="#34A853"
      />
      <path
        d="M56.281 156.37c-2.756-8.123-4.351-16.827-4.351-25.82 0-8.994 1.595-17.697 4.206-25.82l-.073-1.73L15.26 71.312l-1.335.635C5.077 89.644 0 109.517 0 130.55s5.077 40.905 13.925 58.602l42.356-32.782"
        fill="#FBBC05"
      />
      <path
        d="M130.55 50.479c24.514 0 41.05 10.589 50.479 19.438l36.844-35.974C195.245 12.91 165.798 0 130.55 0 79.49 0 35.393 29.301 13.925 71.947l42.211 32.783c10.59-31.477 39.891-54.251 74.414-54.251"
        fill="#EB4335"
      />
    </svg>
  );
}

function IconApple({ className }: { className?: string }) {
  return (
    <svg
      className={className}
      xmlns="http://www.w3.org/2000/svg"
      xmlSpace="preserve"
      width="1em"
      height="1em"
      viewBox="0 0 814 1000">
      <path d="M788.1 340.9c-5.8 4.5-108.2 62.2-108.2 190.5 0 148.4 130.3 200.9 134.2 202.2-.6 3.2-20.7 71.9-68.7 141.9-42.8 61.6-87.5 123.1-155.5 123.1s-85.5-39.5-164-39.5c-76.5 0-103.7 40.8-165.9 40.8s-105.6-57-155.5-127C46.7 790.7 0 663 0 541.8c0-194.4 126.4-297.5 250.8-297.5 66.1 0 121.2 43.4 162.7 43.4 39.5 0 101.1-46 176.3-46 28.5 0 130.9 2.6 198.3 99.2zm-234-181.5c31.1-36.9 53.1-88.1 53.1-139.3 0-7.1-.6-14.3-1.9-20.1-50.6 1.9-110.8 33.7-147.1 75.8-28.5 32.4-55.1 83.6-55.1 135.5 0 7.8 1.3 15.6 1.9 18.1 3.2.6 8.4 1.3 13.6 1.3 45.4 0 102.5-30.4 135.5-71.3z" />
    </svg>
  );
}

function IconX({ className }: { className?: string }) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      className={className}
      width="1em"
      height="1em"
      fill="none"
      viewBox="0 0 1200 1227">
      <path d="M714.163 519.284 1160.89 0h-105.86L667.137 450.887 357.328 0H0l468.492 681.821L0 1226.37h105.866l409.625-476.152 327.181 476.152H1200L714.137 519.284h.026ZM569.165 687.828l-47.468-67.894-377.686-540.24h162.604l304.797 435.991 47.468 67.894 396.2 566.721H892.476L569.165 687.854v-.026Z" />
    </svg>
  );
}