Compare commits
2 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 victorAnumudu
|
cf01df2a8a | ||
 ameye
|
6ee8b82513 |
@@ -53,7 +53,7 @@ export default function TableWrapper({
|
||||
},[itemsPerPage])
|
||||
|
||||
return (
|
||||
<div className="p-2 w-full bg-white shadow-round_black dark:shadow-round_white dark:bg-gray-800 rounded-md">
|
||||
<div className="relative w-full">
|
||||
{data.length > 0 && filterItem && (
|
||||
<div className="mb-10 flex justify-end items-center gap-2">
|
||||
{filterItem.map((item, index) => (
|
||||
@@ -83,7 +83,7 @@ export default function TableWrapper({
|
||||
|
||||
{/* PAGINATION BUTTON */}
|
||||
{newData.length > 0 &&
|
||||
<div className='p-2 w-full flex flex-col lg:flex-row justify-center items-center gap-3 md:gap-6'>
|
||||
<div className='w-full flex flex-col lg:flex-row justify-center items-center gap-3 md:gap-6'>
|
||||
<div className="text-sm text-center lg:text-left font-normal text-gray-500 dark:text-gray-400 block w-full">Showing <span className="font-semibold text-gray-900 dark:text-white">
|
||||
{isLoading ? '----' : `${currentPage + 1}-${currentPage + numberOfSelection >= data.length ? data.length : (currentPage + numberOfSelection)}`}</span> of <span className="font-semibold text-gray-900 dark:text-white">{data.length}</span>
|
||||
</div>
|
||||
@@ -118,7 +118,7 @@ export default function TableWrapper({
|
||||
|
||||
const TableIsLoading = () => {
|
||||
return (
|
||||
<div className="w-full fixed z-[991] inset-0 flex justify-center items-center">
|
||||
<div className="w-full absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-[991] inset-0 flex justify-center items-center">
|
||||
<p className="rounded-md shadow-md p-4 bg-white/90 dark:bg-gray-900 text-brown dark:text-white">Loading...</p>
|
||||
</div>
|
||||
)
|
||||
|
||||
@@ -0,0 +1,125 @@
|
||||
import { ReactNode, useEffect, useState } from "react";
|
||||
import MainBtn from "../MainBtn";
|
||||
import Icons from "../Icons";
|
||||
|
||||
|
||||
export default function TableWrapper({
|
||||
data = [],
|
||||
itemsPerPage = 5,
|
||||
filterItem,
|
||||
children,
|
||||
}) {
|
||||
const [isLoading, setIsLoading] = useState(true)
|
||||
const [searchTerm, setSearchTerm] = useState("");
|
||||
const [filteredData, setFilteredData] = useState(data);
|
||||
|
||||
const [currentPage, setCurrentPage] = useState(0);
|
||||
const [newData, setNewData] = useState([]);
|
||||
|
||||
const numberOfSelection = itemsPerPage;
|
||||
|
||||
const handlePrev = () => {
|
||||
if (currentPage != 0) {
|
||||
setCurrentPage((prev) => prev - numberOfSelection);
|
||||
}
|
||||
};
|
||||
const handleNext = () => {
|
||||
if (currentPage < data.length) {
|
||||
setCurrentPage((prev) => prev + numberOfSelection);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSearch = ({ target: { value } }, name) => {
|
||||
setSearchTerm(value);
|
||||
let newFilteredData = data.filter((item) =>
|
||||
item[name].toLowerCase().startsWith(value.toLowerCase())
|
||||
);
|
||||
setFilteredData(newFilteredData);
|
||||
setCurrentPage(0);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
setIsLoading(true)
|
||||
setTimeout(()=>{
|
||||
setNewData(
|
||||
filteredData?.slice(currentPage, numberOfSelection + currentPage)
|
||||
);
|
||||
setIsLoading(false)
|
||||
},1000)
|
||||
}, [currentPage, filteredData]);
|
||||
|
||||
useEffect(()=>{
|
||||
setCurrentPage(0)
|
||||
},[itemsPerPage])
|
||||
|
||||
return (
|
||||
<div className="p-2 w-full bg-white shadow-round_black dark:shadow-round_white dark:bg-gray-800 rounded-md">
|
||||
{data.length > 0 && filterItem && (
|
||||
<div className="mb-10 flex justify-end items-center gap-2">
|
||||
{filterItem.map((item, index) => (
|
||||
<label
|
||||
key={index}
|
||||
className="flex flex-col sm:flex-row items-center gap-2 text-slate-600 dark:text-slate-100 transition-all duration-500"
|
||||
>
|
||||
Search by {item[0].toUpperCase() + item.slice(1)}
|
||||
<input
|
||||
name={item}
|
||||
type="text"
|
||||
className="py-1 px-2 text-sm min-w-[100px] text-black dark:text-white bg-white dark:bg-slate-800 rounded-full border-0 outline-none ring-1 ring-slate-300 dark:ring-white transition-all duration-500"
|
||||
value={searchTerm}
|
||||
onChange={(e) => {
|
||||
handleSearch(e, item);
|
||||
}}
|
||||
/>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex flex-col">
|
||||
<div className="w-full overflow-x-auto">
|
||||
{children({ data: newData })}
|
||||
</div>
|
||||
|
||||
{/* PAGINATION BUTTON */}
|
||||
{newData.length > 0 &&
|
||||
<div className='p-2 w-full flex flex-col lg:flex-row justify-center items-center gap-3 md:gap-6'>
|
||||
<div className="text-sm text-center lg:text-left font-normal text-gray-500 dark:text-gray-400 block w-full">Showing <span className="font-semibold text-gray-900 dark:text-white">
|
||||
{isLoading ? '----' : `${currentPage + 1}-${currentPage + numberOfSelection >= data.length ? data.length : (currentPage + numberOfSelection)}`}</span> of <span className="font-semibold text-gray-900 dark:text-white">{data.length}</span>
|
||||
</div>
|
||||
{(newData.length >= itemsPerPage) &&
|
||||
<div className='flex items-center gap-3 md:gap-6'>
|
||||
<MainBtn
|
||||
onClick={handlePrev}
|
||||
// text='Prev'
|
||||
className={`${currentPage == 0 ? 'bg-primary/50 pointer-events-none' : 'bg-primary'} text-white-light text-center flex justify-center gap-2 items-center`}
|
||||
disabled={isLoading}
|
||||
>
|
||||
<Icons name='prev' />
|
||||
</MainBtn>
|
||||
<MainBtn
|
||||
onClick={handleNext}
|
||||
// text='Next'
|
||||
className={`${currentPage + numberOfSelection >= data.length ? 'bg-primary/50 pointer-events-none' : 'bg-primary'} text-white-light text-center flex justify-center gap-2 items-center`}
|
||||
disabled={isLoading}
|
||||
>
|
||||
<Icons name='next' />
|
||||
</MainBtn>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
{isLoading && <TableIsLoading />}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const TableIsLoading = () => {
|
||||
return (
|
||||
<div className="w-full fixed z-[991] inset-0 flex justify-center items-center">
|
||||
<p className="rounded-md shadow-md p-4 bg-white/90 dark:bg-gray-900 text-brown dark:text-white">Loading...</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
+69
-4
@@ -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>
|
||||
|
||||
@@ -29,6 +29,8 @@ module.exports = {
|
||||
}
|
||||
},
|
||||
screens: {
|
||||
xxs: '300px',
|
||||
xs: '400px',
|
||||
large: '1535px',
|
||||
max_width: '1700px'
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user