counter and chart package added

This commit was merged in pull request #12.
This commit is contained in:
victorAnumudu
2025-04-13 11:19:19 +01:00
parent 55e5b9606a
commit f98299d39b
8 changed files with 382 additions and 31 deletions
+7 -3
View File
@@ -4,15 +4,18 @@ import CustomCounter from '../components/CustomCounter'
import Icons from '../components/Icons'
import TableWrapper from '../components/tableWrapper/TableWrapper'
import Avatar from '../assets/user_avatar.jpg'
import { Widget1 } from '../components/home/Widget1'
import { Widget2 } from '../components/home/Widget2'
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 lg:grid-cols-3 gap-8'>
<div className='w-full grid grid-cols-1 xl:grid-cols-3 gap-8'>
<div className='box min-h-[230] justify-between bg-[#F7D9E3] dark:bg-black-box text-black-body dark:text-white-body'>
<p className='text-base sm:text-lg font-bold hover:text-primary'>Earnings</p>
{/* <Widget1 /> */}
<div className='flex gap-2 items-end font-bold'>
<p className='text-3xl sm:text-[39px]'><span className='text-xl sm:text-2xl'>$</span><CustomCounter targetNumber='47' timeInSeconds='1' /></p>
<p className='sm:text-[13.9px]'>- 12% this week</p>
@@ -20,13 +23,14 @@ export default function HomePage() {
</div>
<div className='box min-h-[230] justify-between bg-[#CBF0F5] dark:bg-black-box text-black-body dark:text-white-body'>
<p className='text-base sm:text-lg font-bold hover:text-primary'>Contributions</p>
{/* <Widget2 /> */}
<div className='flex gap-2 items-end font-bold'>
<p className='text-3xl sm:text-[39px]'><CustomCounter targetNumber='500' timeInSeconds='1' /></p>
<p className='sm:text-[13.9px]'>+ 56% this week</p>
</div>
</div>
<div className='box min-h-[230] justify-between bg-[#CBD4F4] dark:bg-black-box text-black-body dark:text-white-body'>
<p className='text-base sm:text-lg font-bold hover:text-primary'>Summary</p>
<p className='mb-4 text-base sm:text-lg font-bold hover:text-primary'>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'>
@@ -68,7 +72,7 @@ export default function HomePage() {
</div>
</div>
<div className='w-full'>
<div className='box bg-white dark:bg-black-box text-black-body dark:text-white-body'>
<div className='box gap-8 bg-white dark:bg-black-box text-black-body dark:text-white-body'>
<div className='grid grid-cols-1 xs:grid-cols-2 gap-4'>
<div className='flex flex-col gap-1 order-2 xs:order-1'>
<p className='font-bold text-base'>Members Statistics</p>