create-account.js

import React from 'react';
import Link from 'next/link';

import { GithubIcon, TwitterIcon } from 'icons';
import { Input, Label, Button } from '@windmill/react-ui';
const ImageLight = '/assets/img/create-account-office.jpeg';
const ImageDark = '/assets/img/create-account-office-dark.jpeg';

function Login() {
  return (
    <div className='flex items-center min-h-screen p-6 bg-gray-50 dark:bg-gray-900'>
      <div className='flex-1 h-full max-w-4xl mx-auto overflow-hidden bg-white rounded-lg shadow-xl dark:bg-gray-800'>
        <div className='flex flex-col overflow-y-auto md:flex-row'>
          <div className='h-32 md:h-auto md:w-1/2'>
            <img
              aria-hidden='true'
              className='object-cover w-full h-full dark:hidden'
              src={ImageLight}
              alt='Office'
            />
            <img
              aria-hidden='true'
              className='hidden object-cover w-full h-full dark:block'
              src={ImageDark}
              alt='Office'
            />
          </div>
          <main className='flex items-center justify-center p-6 sm:p-12 md:w-1/2'>
            <div className='w-full'>
              <h1 className='mb-4 text-xl font-semibold text-gray-700 dark:text-gray-200'>
                Create account
              </h1>
              <Label>
                <span>Email</span>
                <Input
                  className='mt-1'
                  type='email'
                  placeholder='john@doe.com'
                />
              </Label>
              <Label className='mt-4'>
                <span>Password</span>
                <Input
                  className='mt-1'
                  placeholder='***************'
                  type='password'
                />
              </Label>
              <Label className='mt-4'>
                <span>Confirm password</span>
                <Input
                  className='mt-1'
                  placeholder='***************'
                  type='password'
                />
              </Label>

              <Label className='mt-6' check>
                <Input type='checkbox' />
                <span className='ml-2'>
                  I agree to the{' '}
                  <span className='underline'>privacy policy</span>
                </span>
              </Label>

              <Link href='/login'>
                <Button block className='mt-4'>
                  Signup
                </Button>
              </Link>

              <hr className='my-8' />

              <Button block layout='outline'>
                <GithubIcon className='w-4 h-4 mr-2' aria-hidden='true' />
                Github
              </Button>
              <Button block className='mt-4' layout='outline'>
                <TwitterIcon className='w-4 h-4 mr-2' aria-hidden='true' />
                Twitter
              </Button>

              <p className='mt-4'>
                <Link href='/login'>
                  <a className='text-sm font-medium text-purple-600 dark:text-purple-400 hover:underline'>
                    Already have an account? Login
                  </a>
                </Link>
              </p>
            </div>
          </main>
        </div>
      </div>
    </div>
  );
}

export default Login;