complete home page

src/App.tsx

@@ -1,7 +1,11 @@
+import { Imei } from "./components/home/imei";
+import { StatusBox } from "./components/home/status-box";
+
 function App() {
   return (
-    <div className="text-green-900">
-      Hello World
+    <div className="flex flex-col gap-y-[30px] w-full">
+      <StatusBox />
+      <Imei />
     </div>
   );
 }

src/components/common/input.tsx

@@ -3,24 +3,23 @@ import React, { FC, useState } from "react"
 import { Input as InputComponent } from '@headlessui/react'
 
 type Props = {
-    style?: string,
     type?: React.HTMLInputTypeAttribute,
     placeholder: string,
     icon?: React.ReactNode,
     field?: any
 }
 
-export const Input: FC<Props> = ({ placeholder, type = "text", icon, field, style }) => {
+export const Input: FC<Props> = ({ placeholder, type = "text", icon, field }) => {
     const [hidden, setHidden] = useState<boolean>(false)
     const handleHidden = () => setHidden(prev => !prev)
     return (
-        <div className={`relative w-full !${style}`}>
+        <div className={`relative w-full`}>
             <div className="absolute top-[18.5px] left-5 grid h-5 w-5 place-items-center text-blue-gray-500">
                 {type === "password" ?
                     !hidden ? <Eye size="23" color="#777577" onClick={handleHidden} /> : <EyeSlash size="23" color="#777577" onClick={handleHidden} />
                     : icon}
             </div>
-            <InputComponent {...field} type={type === "password" && hidden ? "text" : type} placeholder={placeholder} className="input-style" />
+            <InputComponent {...field} type={type === "password" && hidden ? "text" : type} placeholder={placeholder} className="input-style min-w-full" />
         </div>
     )
 }

src/components/home/imei.tsx

@@ -0,0 +1,21 @@
+import { Button } from "@headlessui/react"
+import { Input } from "../common/input"
+
+export const Imei = () => {
+    return (
+        <div className="w-full flex flex-col lg:flex-row bg-auth-form p-[30px] rounded-[40px] gap-8">
+            <div className="w-full h-full flex items-center justify-center">
+                <img src="/svgs/home/binary.svg" alt="binary" className="size-full max-w-[500px] max-h-[500px]" />
+            </div>
+            <div className="flex flex-col w-full gap-10 justify-center lg:justify-between">
+                <Input placeholder="کد IMEI" />
+                <p className="font-normal text-base text-primary-text-color text-justify lg:text-wrap">
+                    لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز
+                </p>
+                <div className="w-full flex justify-end">
+                    <Button className="w-full min-w-full xl:min-w-min xl:max-w-60">ثبت کد</Button>
+                </div>
+            </div>
+        </div>
+    )
+}

src/components/home/status-box-items.tsx

@@ -0,0 +1,30 @@
+import { FC } from "react"
+import { StatusBoxItemInterface } from "../../types"
+import { filterNumber } from "../../utility/status"
+
+type Props = {
+    item: StatusBoxItemInterface
+}
+export const StatusBoxItem: FC<Props> = ({ item }) => {
+    return (
+        <div className="w-full bg-auth-form p-[18px] h-full rounded-[40px] flex flex-col gap-[42px]">
+            <div className="size-16 bg-secondary-color flex justify-center rounded-full items-center">
+                {item?.icon}
+            </div>
+            <div className="flex flex-col gap-3">
+                <p className="font-normal text-base text-secondary-text-color">{item?.title}</p>
+                <p className="font-medium text-[28px] text-primary-text-color">
+                    {item?.name === "coin" && <p className="flex items-end gap-x-1">
+                        {filterNumber(item?.value)} <p className="text-lg font-normal">تومان</p>
+                    </p>}
+                    {item?.name === "dollar" && <p className="text-lg font-normal flex items-center gap-x-1">$
+                        <p className="font-medium text-[28px] text-primary-text-color">
+                            {filterNumber(item?.value)}
+                        </p>
+                    </p>}
+                    {item?.name !== "coin" && item?.name !== "dollar" && item?.value}
+                </p>
+            </div>
+        </div>
+    )
+}

src/components/home/status-box.tsx

@@ -0,0 +1,13 @@
+import { StatusBoxItemInterface } from "../../types"
+import { statusBoxItems } from "../../utility/status"
+import { StatusBoxItem } from "./status-box-items"
+
+export const StatusBox = () => {
+
+
+    return (
+        <div className="grid grid-cols-1 sm:grid-cols-2 2xl:grid-cols-4 gap-6">
+            {statusBoxItems?.map((item: StatusBoxItemInterface) => <StatusBoxItem key={item?.name} item={item} />)}
+        </div>
+    )
+}

src/components/ui/dashboard/footer.tsx

@@ -3,7 +3,7 @@ import { socialsList } from "../../../utility/socials"
 
 export const Footer = () => {
     return (
-        <footer className="w-full flex flex-row gap-x-2 justify-end items-center">
+        <footer className="w-full flex flex-row gap-x-2 justify-center lg:justify-end items-center py-5">
             {socialsList?.map((item: SocialsInterface) => <img key={item?.name} src={item?.path} alt={item?.name} className="size-10 min-w-10 min-h-10 cursor-pointer" />)}
         </footer>
     )

src/components/ui/dashboard/header.tsx

@@ -7,7 +7,7 @@ type Props = {
 
 export const Header: FC<Props> = ({ setShow }) => {
     return (
-        <header className="flex flex-row w-full justify-between items-center mb-10 xl:mb-y-[60px]">
+        <header className="flex flex-row w-full justify-between items-center mb-10 lg:mb-[60px]">
             <div className="flex flex-row gap-x-5 lg:gap-x-3 items-center">
                 <img src="/svgs/header/burger-menu.svg" alt="burger menu" className="lg:hidden size-[27px]" onClick={setShow} />
                 <img src="/svgs/header/person.svg" alt="person" className="size-[60px]" />

src/components/ui/dashboard/layout.tsx

@@ -9,16 +9,17 @@ export const DashboardLayout = () => {
     const [show, setShow] = useState<boolean>(false)
     const handleSidebar = () => setShow(prev => !prev)
     return (
-        <div className="w-full h-screen flex flex-col lg:flex-row">
+        <div className="w-full min-h-screen flex flex-col lg:flex-row">
             <Sidebar />
             <SidebarMobile show={show} setShow={setShow} />
-            <div className="w-full h-screen p-4 xl:p-[30px] flex flex-col">
+            <div className="w-full min-h-screen p-4 pb-0 xl:p-[30px] xl:pb-0 flex flex-col overflow-y-auto">
                 <Header setShow={handleSidebar} />
-                <div className="h-screen w-full">
+                <div className="flex-grow w-full">
                     <Outlet />
                 </div>
                 <Footer />
             </div>
         </div>
+
     )
 }

src/components/ui/dashboard/sidebar.tsx

@@ -7,7 +7,7 @@ export const Sidebar = () => {
     return (
         <div className="hidden lg:flex bg-auth-form  min-w-[318px] max-w-[318px] flex-col items-center py-[42px] gap-y-20">
             <img src="/svgs/logo/logo.svg" alt="logo" className="auth-logo-size" />
-            <div className="flex flex-col justify-between h-full">
+            <div className="flex flex-col justify-between h-full bg-auth-form ">
                 <div className="flex flex-col gap-y-3">
                     {sidebarItems?.map((item: SidebarInterface) => <SidebarItem key={item?.name} item={item} />)}
                 </div>

src/types/index.ts

@@ -48,3 +48,10 @@ export interface SocialsInterface {
     name: string,
     path: string
 }
+
+export interface StatusBoxItemInterface {
+    name: string,
+    title: string,
+    icon: React.ReactNode,
+    value: number
+}

src/utility/status.tsx

@@ -0,0 +1,31 @@
+import { Coin1, DollarCircle, Radar, Star } from "iconsax-react";
+import { StatusBoxItemInterface } from "../types";
+
+export const statusBoxItems: StatusBoxItemInterface[] | [] = [
+    {
+        name: "dollar",
+        title: "دارایی دلاری",
+        icon: <DollarCircle color="#292D32" variant="Bold" className="size-[40px]" />,
+        value: 8
+    },
+    {
+        name: "coin",
+        title: "دارایی از تمدید اشتراک",
+        icon: <Coin1 color="#292D32" variant="Bold" className="size-[40px]" />,
+        value: 300589
+    },
+    {
+        name: "star",
+        title: "امتیاز شرکت در قرعه کشی",
+        icon: <Star color="#292D32" variant="Bold" className="size-[40px]" />,
+        value: 65
+    },
+    {
+        name: "radar",
+        title: "تعداد کل دستگاه ثبت شده موفق",
+        icon: <Radar color="#292D32" variant="Bold" className="size-[40px]" />,
+        value: 171
+    },
+]
+
+export const filterNumber = (value: number) => value?.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")