hamid zarghami
141 lines
5.5 KiB
TypeScript
141 lines
5.5 KiB
TypeScript
'use client'
|
||
import { ArrowLeft, Play } from 'iconsax-react'
|
||
import { type FC } from 'react'
|
||
import { useRouter } from 'next/navigation'
|
||
import Seperator from '@/components/utils/Seperator'
|
||
import Image from 'next/image'
|
||
|
||
const GamePage: FC = () => {
|
||
|
||
const router = useRouter()
|
||
|
||
return (
|
||
<div>
|
||
<div className='grid grid-cols-3 items-center py-4'>
|
||
<div className='w-6'></div>
|
||
<h1 className='text-sm2 place-self-center font-medium'>بازی و سرگرمی</h1>
|
||
<ArrowLeft
|
||
className='cursor-pointer place-self-end'
|
||
size='24'
|
||
color='currentColor'
|
||
onClick={() => router.back()}
|
||
/>
|
||
</div>
|
||
|
||
<div className='mt-11 relative bg-primary text-white h-[120px] rounded-[10px] p-4'>
|
||
<div className='max-w-[99px]'>
|
||
<div className='font-bold'>My Games</div>
|
||
<div className='mt-1'>
|
||
<Seperator className='w-7' />
|
||
</div>
|
||
|
||
<div className='text-xs mt-3 leading-5 font-medium'>
|
||
تا سفارشت آماده بشه بازی کن
|
||
</div>
|
||
</div>
|
||
|
||
<Image
|
||
src='/assets/images/controller.png'
|
||
alt='game preview'
|
||
width={195}
|
||
height={131}
|
||
className='absolute left-2 bottom-2'
|
||
/>
|
||
</div>
|
||
|
||
<div className='mt-8 flex flex-col gap-4'>
|
||
<div
|
||
style={{ direction: 'ltr' }}
|
||
className='bg-white shadow-sm rounded-[10px] p-2 flex justify-between items-center cursor-pointer'
|
||
onClick={() => {
|
||
const currentPath = window.location.pathname
|
||
const basePath = currentPath.split('/game')[0]
|
||
router.push(`${basePath}/game/2048`)
|
||
}}
|
||
>
|
||
<div className='flex gap-3 items-center'>
|
||
<Image
|
||
src='/assets/images/2048_logo.png'
|
||
alt='2048'
|
||
width={80}
|
||
height={80}
|
||
className='size-[80px] object-cover'
|
||
/>
|
||
|
||
<div className='text-sm font-bold max-w-[92px]'>
|
||
2048
|
||
</div>
|
||
</div>
|
||
|
||
<div className='h-8 bg-[#F2F2F2] rounded-lg px-3 flex gap-1 items-center justify-center'>
|
||
<div className='text-xs'>اجرا کنید</div>
|
||
<Play size='20' color='currentColor' />
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div
|
||
style={{ direction: 'ltr' }}
|
||
className='bg-white shadow-sm rounded-[10px] p-2 flex justify-between items-center cursor-pointer'
|
||
onClick={() => {
|
||
const currentPath = window.location.pathname
|
||
const basePath = currentPath.split('/game')[0]
|
||
router.push(`${basePath}/game/tower-builder`)
|
||
}}
|
||
>
|
||
<div className='flex gap-3 items-center'>
|
||
<Image
|
||
src='/assets/images/tower_building_logo.webp'
|
||
alt='Tower Builder'
|
||
width={80}
|
||
height={80}
|
||
className='size-[80px] object-cover'
|
||
/>
|
||
|
||
<div className='text-sm font-bold max-w-[92px]'>
|
||
Tower Builder
|
||
</div>
|
||
</div>
|
||
|
||
<div className='h-8 bg-[#F2F2F2] rounded-lg px-3 flex gap-1 items-center justify-center'>
|
||
<div className='text-xs'>اجرا کنید</div>
|
||
<Play size='20' color='currentColor' />
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div
|
||
style={{ direction: 'ltr' }}
|
||
className='bg-white shadow-sm rounded-[10px] p-2 flex justify-between items-center cursor-pointer'
|
||
onClick={() => {
|
||
const currentPath = window.location.pathname
|
||
const basePath = currentPath.split('/game')[0]
|
||
router.push(`${basePath}/game/the-cube`)
|
||
}}
|
||
>
|
||
<div className='flex gap-3 items-center'>
|
||
<Image
|
||
src='/assets/images/cube_logo.jpeg'
|
||
alt='The Cube'
|
||
width={80}
|
||
height={80}
|
||
className='size-[80px] object-cover'
|
||
/>
|
||
|
||
<div className='text-sm font-bold max-w-[92px]'>
|
||
The Cube
|
||
</div>
|
||
</div>
|
||
|
||
<div className='h-8 bg-[#F2F2F2] rounded-lg px-3 flex gap-1 items-center justify-center'>
|
||
<div className='text-xs'>اجرا کنید</div>
|
||
<Play size='20' color='currentColor' />
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default GamePage |