aside settings btn fixed

This commit was merged in pull request #8.
This commit is contained in:
victorAnumudu
2025-04-08 18:12:08 +01:00
parent 92688000ff
commit 18fc4505dc
9 changed files with 140 additions and 130 deletions
+25 -22
View File
@@ -11,22 +11,22 @@ export default function HomePage() {
<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='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-[230px] shadow-round_black dark:shadow-round_white'>
<p className='text-base sm:text-lg font-bold'>Earnings</p>
<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>
<div className='flex gap-2 items-end font-bold'>
<p className='text-3xl'><CustomCounter targetNumber='47' timeInSeconds='1' /></p>
<p>- 12% this week</p>
<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>
</div>
</div>
<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-[230px] shadow-round_black dark:shadow-round_white'>
<p className='text-base sm:text-lg font-bold'>Contributions</p>
<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>
<div className='flex gap-2 items-end font-bold'>
<p className='text-3xl'>$<CustomCounter targetNumber='500' timeInSeconds='1' /></p>
<p>+ 56% this week</p>
<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='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-[230px] shadow-round_black dark:shadow-round_white'>
<p className='text-base sm:text-lg font-bold'>Summary</p>
<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>
<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'>
@@ -66,12 +66,9 @@ export default function HomePage() {
</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-[230px] shadow-round_black dark:shadow-round_white'>
<p className='text-base sm:text-lg font-bold'>Earnings</p>
</div> */}
</div>
<div className='w-full'>
<div className='flex flex-col gap-8 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'>
<div className='box 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>
@@ -82,7 +79,7 @@ export default function HomePage() {
</div>
</div>
<TableWrapper data={[1,2,3,4,5,6,7]} itemsPerPage={15}>
<TableWrapper data={[1,2,3,4,5]} itemsPerPage={15}>
{({ data }) => (
<>
<table className="py-2 w-full text-sm">
@@ -114,13 +111,19 @@ export default function HomePage() {
</div>
</div>
</td>
<td className="px-2 ">
Dummy text
<td className="px-2">
<div className="text-left">
<div className="text-base font-semibold">chiefSoft</div>
<div className="font-normal text-gray-500">Web, UI/UX Design</div>
</div>
</td>
<td className="px-2 ">
<div className="flex items-center">
Dummy
</div>
<td className="px-2">
<div className="text-left">
<div className="font-normal text-gray-500">50%</div>
<div className="relative h-[6px] w-full bg-white-body dark:bg-black-body rounded-full overflow-hidden">
<div className={`absolute left-0 h-full w-1/2 bg-emerald-600`}></div>
</div>
</div>
</td>
<td className="px-2 text-right">
<div className='flex items-center justify-end gap-3 md:gap-4'>
@@ -141,7 +144,7 @@ export default function HomePage() {
</table>
</>
)}
</TableWrapper>
</TableWrapper>
</div>
</div>
</div>