DigiFi/digifi-FirstOffice
1
0
Fork 0
Code Issues Pull Requests Releases Activity

added cobtent to home page

Browse Source
This commit was merged in pull request #5.
This commit is contained in:
victorAnumudu
2025-04-07 16:13:58 +01:00
parent d9cd1375e1
commit a9f22234eb
3 changed files with 66 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Icons.jsx
+9 -1
View File
@@ -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
}
src/components/InputText.jsx
+3 -3
View File
@@ -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>
)
}
src/pages/HomePage.jsx
+54 -6
View File
@@ -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'>