From a9f22234eba771af8272235065a8f74e0bbbdd3d Mon Sep 17 00:00:00 2001
From: victorAnumudu <anumuduchukwuebuka@gmail.com>
Date: Mon, 7 Apr 2025 16:13:58 +0100
Subject: [PATCH] added cobtent to home page

---
 src/components/Icons.jsx     | 10 +++++-
 src/components/InputText.jsx |  6 ++--
 src/pages/HomePage.jsx       | 60 ++++++++++++++++++++++++++++++++----
 3 files changed, 66 insertions(+), 10 deletions(-)

diff --git a/src/components/Icons.jsx b/src/components/Icons.jsx
index a3d8445..799c350 100644
--- a/src/components/Icons.jsx
+++ b/src/components/Icons.jsx
@@ -8,7 +8,9 @@ import { TbPlayerTrackNext, TbPlayerTrackPrev } from 'react-icons/tb'
 import { IoMdSettings } from "react-icons/io";
 import { LuMessageSquareText } from "react-icons/lu";
 import { LuPanelRight } from "react-icons/lu";
-
+import { FcGoogle } from "react-icons/fc";
+import { IoLogoApple } from "react-icons/io5";
+import { FcSalesPerformance } from "react-icons/fc";
 
 
 export default function Icons({name, className}) {
@@ -40,6 +42,12 @@ export default function Icons({name, className}) {
     <LuMessageSquareText className={`text-base ${className}`} />
     :name.toLowerCase() == 'right-panel' ?
     <LuPanelRight className={`text-base ${className}`} />
+    :name.toLowerCase() == 'google' ?
+    <FcGoogle className={`text-base ${className}`} />
+    :name.toLowerCase() == 'apple' ?
+    <IoLogoApple className={`text-base ${className}`} />
+    :name.toLowerCase() == 'sales' ?
+    <FcSalesPerformance className={`text-base ${className}`} />
     :
     null
     }
diff --git a/src/components/InputText.jsx b/src/components/InputText.jsx
index d2bee93..66c3914 100644
--- a/src/components/InputText.jsx
+++ b/src/components/InputText.jsx
@@ -1,9 +1,9 @@
 import React from 'react'
 
-export default function InputText({id, name, type='text', value, handleChange}) {
+export default function InputText({id, name, type='text', placeholder, value, handleChange}) {
   return (
-    <div className='w-full h-10 round overflow-hidden'>
-        <input id={id} name={name} type={type} value={value} onChange={handleChange} className='p-2 w-full h-full text-black outline-0 ring-0 border border-slate-400 focus:border-purple-600 rounded' />
+    <div className='w-full h-12 overflow-hidden'>
+        <input id={id} name={name} type={type} value={value} placeholder={placeholder} onChange={handleChange} className='p-2 w-full h-full text-black outline-0 ring-0 border border-slate-300 focus:border-purple-600 rounded-md' />
     </div>
   )
 }
diff --git a/src/pages/HomePage.jsx b/src/pages/HomePage.jsx
index aa8517e..f5530f3 100644
--- a/src/pages/HomePage.jsx
+++ b/src/pages/HomePage.jsx
@@ -1,24 +1,72 @@
 import React from 'react'
 import BreadcrumbCom from '../components/breadcrumb/BreadcrumbCom'
+import CustomCounter from '../components/CustomCounter'
+import Icons from '../components/Icons'
 
 export default function HomePage() {
   return (
     <div className='w-full flex flex-col gap-8'>
       <BreadcrumbCom title='Dashboard' paths={['Home', 'Dashboard']} />
       <div className='grid grid-cols-1 gap-8'>
-        <div className='w-full grid grid-cols-1 md:grid-cols-2 gap-8'>
-          <div className='p-8 w-full bg-[#F7D9E3] dark:bg-black-box text-black-body dark:text-white-body hover:scale-[1.0] cursor-pointer rounded-lg h-[300px] shadow-round_black dark:shadow-round_white'>
+        <div className='w-full grid grid-cols-1 lg:grid-cols-3 gap-8'>
+          <div className='p-8 w-full flex flex-col justify-between bg-[#F7D9E3] dark:bg-black-box text-black-body dark:text-white-body hover:scale-[1.0] cursor-pointer rounded-lg h-[200px] shadow-round_black dark:shadow-round_white'>
             <p className='text-base sm:text-lg font-bold'>Earnings</p>
+            <div className='flex gap-2 items-end font-bold'>
+              <p className='text-3xl'><CustomCounter targetNumber='47' timeInSeconds='1' /></p>
+              <p>- 12% this week</p>
+            </div>
           </div>
-          <div className='p-8 w-full bg-[#CBF0F5] dark:bg-black-box text-black-body dark:text-white-body hover:scale-[1.0] cursor-pointer rounded-lg h-[300px] shadow-round_black dark:shadow-round_white'>
+          <div className='p-8 w-full flex flex-col justify-between bg-[#CBF0F5] dark:bg-black-box text-black-body dark:text-white-body hover:scale-[1.0] cursor-pointer rounded-lg h-[200px] shadow-round_black dark:shadow-round_white'>
             <p className='text-base sm:text-lg font-bold'>Contributions</p>
+            <div className='flex gap-2 items-end font-bold'>
+              <p className='text-3xl'>$<CustomCounter targetNumber='500' timeInSeconds='1' /></p>
+              <p>+ 56% this week</p>
+            </div>
           </div>
-          <div className='p-8 w-full bg-[#CBD4F4] dark:bg-black-box text-black-body dark:text-white-body hover:scale-[1.0] cursor-pointer rounded-lg h-[300px] shadow-round_black dark:shadow-round_white'>
+          <div className='p-8 w-full flex flex-col justify-between bg-[#CBD4F4] dark:bg-black-box text-black-body dark:text-white-body hover:scale-[1.0] cursor-pointer rounded-lg h-[200px] shadow-round_black dark:shadow-round_white'>
             <p className='text-base sm:text-lg font-bold'>Summary</p>
+            <div className='grid grid-cols-2 gap-4 font-bold'>
+              <div className='flex items-center gap-2'>
+                <div className='w-10 h-10 bg-white-body dark:bg-black-box dark:shadow-[0_0_0_1px_#f9f9f9] rounded-md flex justify-center items-center'>
+                  <Icons name='sales' />
+                </div>
+                <div>
+                  <p className='font-bold text-base'>$<CustomCounter targetNumber='50' timeInSeconds='1' />K</p>
+                  <p className='text-12 text-slate-500'>Sales</p>
+                </div>
+              </div>
+              <div className='flex items-center gap-2'>
+                <div className='w-10 h-10 bg-white-body dark:bg-black-box dark:shadow-[0_0_0_1px_#f9f9f9] rounded-md flex justify-center items-center'>
+                  <Icons name='sales' />
+                </div>
+                <div>
+                  <p className='font-bold text-base'>$<CustomCounter targetNumber='50' timeInSeconds='1' />K</p>
+                  <p className='text-12 text-slate-500'>Revenue</p>
+                </div>
+              </div>
+              <div className='flex items-center gap-2'>
+                <div className='w-10 h-10 bg-white-body dark:bg-black-box dark:shadow-[0_0_0_1px_#f9f9f9] rounded-md flex justify-center items-center'>
+                  <Icons name='sales' />
+                </div>
+                <div>
+                  <p className='font-bold text-base'>$<CustomCounter targetNumber='265' timeInSeconds='1' />K</p>
+                  <p className='text-12 text-slate-500'>Tickets</p>
+                </div>
+              </div>
+              <div className='flex items-center gap-2'>
+                <div className='w-10 h-10 bg-white-body dark:bg-black-box dark:shadow-[0_0_0_1px_#f9f9f9] rounded-md flex justify-center items-center'>
+                  <Icons name='sales' />
+                </div>
+                <div>
+                  <p className='font-bold text-base'>$<CustomCounter targetNumber='5' timeInSeconds='1' />M</p>
+                  <p className='text-12 text-slate-500'>Tasks</p>
+                </div>
+              </div>
+            </div>
           </div>
-          <div className='p-8 w-full bg-[#F7D9E3] dark:bg-black-box text-black-body dark:text-white-body hover:scale-[1.0] cursor-pointer rounded-lg h-[300px] shadow-round_black dark:shadow-round_white'>
+          {/* <div className='p-8 w-full bg-[#F7D9E3] dark:bg-black-box text-black-body dark:text-white-body hover:scale-[1.0] cursor-pointer rounded-lg h-[200px] shadow-round_black dark:shadow-round_white'>
             <p className='text-base sm:text-lg font-bold'>Earnings</p>
-          </div>
+          </div> */}
         </div>
         <div className='w-full'>
           <div className='w-full p-8 min-h-96 bg-white dark:bg-black-box text-black-body dark:text-white-body hover:scale-[1.0] cursor-pointer rounded-lg h-full shadow-[0px_0px_2px_rgba(0,_0,_0,_50)] dark:shadow-round_white'>
-- 
2.34.1