36-character-flower/src/features/game/modal/desktop/desktop-login-modal.tsx

import { motion } from 'motion/react'
import { useState } from 'react'
import loginBg from '@/assets/system/login-bg.webp'
import rightImg from '@/assets/system/right.webp'
import { CenterModal } from '@/components/center-modal.tsx'
import { SmartBackground } from '@/components/smart-background.tsx'
import { SmartImage } from '@/components/smart-image.tsx'
import { Input } from '@/components/ui/input.tsx'

function DesktopLoginModal() {
  const [open, setOpen] = useState(true)

  function handleSubmit() {
    setOpen(false)
  }

  return (
    <CenterModal
      open={open}
      onClose={() => {}}
      title={<div className={'modal-title-glow'}>登录</div>}
      titleAlign="center"
      className={'w-design-980 h-design-540'}
    >
      <div
        className={
          'flex flex-col items-center justify-between gap-design-20 px-design-20'
        }
      >
        <div
          className={
            'h-design-375 flex flex-col gap-design-45 w-full bg-[#060B0F]/50 p-design-50'
          }
        >
          <div className={'flex items-center'}>
            <div
              className={
                'w-design-160 shrink-0 text-left text-design-24 text-[#58ADAF]'
              }
            >
              Akun/TEL:
            </div>
            <Input
              className={'flex-1 text-left'}
              placeholder={'Silakan masukkan akun atau nomor ponsel Anda.'}
            />
          </div>
          <div className={'flex items-center'}>
            <div
              className={
                'w-design-160 shrink-0 text-left text-design-24 text-[#58ADAF]'
              }
            >
              Kata Sandi:
            </div>
            <Input
              className={'flex-1 text-left'}
              placeholder={'Masukkan Kata Sandi'}
            />
          </div>
          <div className={'flex items-center justify-around'}>
            <div className={'flex items-center gap-design-10'}>
              <div
                className={
                  'flex items-center justify-center bg-[#040B0F] border border-[#549195] rounded-md w-design-38 h-design-38'
                }
              >
                <SmartImage alt={'right'} src={rightImg} />
              </div>
              <div className={'text-[#549195]'}>Daftar Akun</div>
            </div>
            <div className={'flex items-center gap-design-10'}>
              <div
                className={
                  'flex items-center justify-center bg-[#040B0F] border border-[#549195] rounded-md w-design-38 h-design-38'
                }
              >
                <SmartImage alt={'right'} src={rightImg} />
              </div>
              <div className={'text-[#549195]'}>Ingat Kata Sandi</div>
            </div>
          </div>
        </div>

        <SmartBackground
          as={motion.div}
          onClick={handleSubmit}
          whileTap={{ scale: 0.95 }}
          src={loginBg}
          size="100% 100%"
          className={
            'w-design-390 h-design-110 flex items-center justify-center text-design-32 modal-title-glow font-bold cursor-pointer'
          }
        >
          MASUK
        </SmartBackground>
      </div>
    </CenterModal>
  )
}

export default DesktopLoginModal