design page game

2025-12-09 09:37:43 +03:30
parent 351afa0596
commit 803f104307
4 changed files with 77 additions and 0 deletions
@@ -0,0 +1,73 @@
+'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-3'>
+                <div style={{ direction: 'ltr' }} className='bg-white shadow-sm rounded-[10px] p-2 flex justify-between items-center'>
+                    <div className='flex gap-3 items-center'>
+                        <Image
+                            src='/assets/images/2048_logo.png'
+                            alt='2'
+                            width={80}
+                            height={80}
+                            className='size-[80px] object-cover'
+                        />
+
+                        <div className='text-sm font-bold max-w-[92px]'>
+                            Call of Duty Mobile
+                        </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
@@ -364,3 +364,7 @@ html[data-theme="dark"] {
    @apply bg-background text-foreground;
  }
 } */
+
+.dltr {
+  direction: ltr;
+}