stats + stat card

2025-10-15 15:41:58 +03:30
parent 434541da9d
commit bdb043e6c5
7 changed files with 240 additions and 1 deletions
@@ -1,8 +1,13 @@
 import { type FC } from 'react'
+import Stats from './components/Stats'

 const Home: FC = () => {
    return (
-        <div>صفحه اصلی</div>
+        <div className='flex gap-6'>
+            <div className='flex-1'>
+                <Stats />
+            </div>
+        </div>
    )
 }

@@ -0,0 +1,34 @@
+import { COLORS } from '@/constants/colors'
+import { ArrowLeft } from 'iconsax-react'
+import { type FC, type ReactNode } from 'react'
+
+type Props = {
+    icon: ReactNode,
+    count: number,
+    description: string
+}
+
+const StatCard: FC<Props> = (props) => {
+    const { icon, count, description } = props
+    return (
+        <div className='flex-1 bg-white rounded-3xl p-6'>
+            <div className='flex justify-between items-center'>
+                {icon}
+
+                <div className='size-8 bg-[#FFF1D7] rounded-full flex justify-center items-center'>
+                    <ArrowLeft size={16} color={COLORS.primary} className='rotate-45' />
+                </div>
+            </div>
+
+            <div className='mt-2 text-2xl font-semibold'>
+                {count}
+            </div>
+
+            <div className='mt-2 text-sm'>
+                {description}
+            </div>
+        </div>
+    )
+}
+
+export default StatCard
@@ -0,0 +1,53 @@
+import GridWrapper from '@/components/GridWrapper'
+import { COLORS } from '@/constants/colors'
+import { t } from '@/locale'
+import { BoxTick, BoxTime, ReceiptText, TruckTick } from 'iconsax-react'
+import { type FC } from 'react'
+import StatCard from './StatCard'
+
+const Stats: FC = () => {
+    return (
+        <GridWrapper
+            desktop={4}
+            mobile={2}
+            gapDesktop={24}
+            gapMobile={12}
+            className='mt-5'
+        >
+            <StatCard
+                count={2}
+                description={t('home.requestCount')}
+                icon={<BoxTime
+                    size={27}
+                    color={COLORS.primary}
+                />}
+            />
+            <StatCard
+                count={2}
+                description={t('home.factureCount')}
+                icon={<ReceiptText
+                    size={27}
+                    color={COLORS.primary}
+                />}
+            />
+            <StatCard
+                count={10}
+                description={t('home.orderCount')}
+                icon={<BoxTick
+                    size={27}
+                    color={COLORS.primary}
+                />}
+            />
+            <StatCard
+                count={20}
+                description={t('home.orderDoneCount')}
+                icon={<TruckTick
+                    size={27}
+                    color={COLORS.primary}
+                />}
+            />
+        </GridWrapper>
+    )
+}
+
+export default Stats