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

added home dummy table

Browse Source
This commit was merged in pull request #6.
This commit is contained in:
victorAnumudu
2025-04-07 19:28:23 +01:00
parent 6ee8b82513
commit cf01df2a8a
4 changed files with 199 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/HomePage.jsx
+69 -4
View File
@@ -2,6 +2,8 @@ import React from 'react'
import BreadcrumbCom from '../components/breadcrumb/BreadcrumbCom'
import CustomCounter from '../components/CustomCounter'
import Icons from '../components/Icons'
import TableWrapper from '../components/tableWrapper/TableWrapper'
import Avatar from '../assets/user_avatar.jpg'
export default function HomePage() {
return (
@@ -69,14 +71,77 @@ export default function HomePage() {
</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'>
<div className='flex justify-between items-center'>
<div className='flex flex-col gap-1'>
<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='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>
<p className='text-12'>Over 500 members</p>
</div>
<button className='font-bold text-primary text-12 px-4 py-2 bg-sky-100 rounded-md'>+ New Member</button>
<div className='order-1 xs:order-2 text-left xs:text-right'>
<button className='font-bold bg-white-aside text-black-body text-12 px-4 py-2 hover:text-primary hover:bg-sky-50 dark:hover:text-white dark:hover:bg-primary dark:text-white-body dark:bg-black-body rounded-md'>+ New Member</button>
</div>
</div>
<TableWrapper data={[1,2,3,4,5,6,7]} itemsPerPage={15}>
{({ data }) => (
<>
<table className="py-2 w-full text-sm">
<thead className="py-2 text-sm text-slate-500 text-left">
<tr>
<th scope="col" className="px-2 py-2">
Authors
</th>
<th scope="col" className="px-2">
Company
</th>
<th scope="col" className="px-2">
Progress
</th>
<th scope="col" className="px-2 text-right">
Action
</th>
</tr>
</thead>
<tbody>
{data.map(item => (
<tr className="py-2 border-t border-dashed border-slate-300">
<td className="px-2 py-2">
<div className='w-full min-w-48 flex items-center gap-2 whitespace-nowrap'>
<img className="w-10 h-10 rounded-md" src={Avatar} alt="Jese image" />
<div className="text-left">
<div className="text-base font-semibold">John Dummy</div>
<div className="font-normal text-gray-500">HTML, JS, ReactJS</div>
</div>
</div>
</td>
<td className="px-2 ">
Dummy text
</td>
<td className="px-2 ">
<div className="flex items-center">
Dummy
</div>
</td>
<td className="px-2 text-right">
<div className='flex items-center justify-end gap-3 md:gap-4'>
<div className='p-2 flex justify-center items-center text-slate-500 bg-white-body dark:text-white-body dark:bg-black-body rounded-md'>
<Icons name='edit' />
</div>
<div className='p-2 flex justify-center items-center text-slate-500 bg-white-body dark:text-white-body dark:bg-black-body rounded-md'>
<Icons name='eye' />
</div>
<div className='p-2 flex justify-center items-center text-slate-500 bg-white-body dark:text-white-body dark:bg-black-body rounded-md'>
<Icons name='trash' />
</div>
</div>
</td>
</tr>
))}
</tbody>
</table>
</>
)}
</TableWrapper>
</div>
</div>
</div>