WrenchBoard/Users-Wrench
3
0
Fork 0
Code Issues Pull Requests Releases Activity

Almost complete

Browse Source
This commit is contained in:
Ebube
2023-05-09 14:59:25 +01:00
parent 6dea851021
commit e49c7eb779
4 changed files with 106 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/FamilyAcc/FamilyTable.jsx
+54 -45
View File
@@ -1,8 +1,9 @@
import React, { useState } from "react";
import dataImage1 from "../../assets/images/data-table-user-1.png";
export default function FamilyTable({ className }) {
export default function FamilyTable({ className, familyList }) {
const filterCategories = ["All Categories", "Explore", "Featured"];
console.log(familyList)
const [selectedCategory, setCategory] = useState(filterCategories[0]);
return (
<div
@@ -13,56 +14,64 @@ export default function FamilyTable({ className }) {
<div className="relative w-full overflow-x-auto sm:rounded-lg">
<table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
<tbody>
<tr className="text-base text-thin-light-gray whitespace-nowrap border-b dark:border-[#5356fb29] default-border-b dark:border-[#5356fb29] ottom ">
<tr className="text-base text-thin-light-gray whitespace-nowrap border-b dark:border-[#5356fb29] default-border-bottom ">
<td className="py-4">Name</td>
<td className="py-4 text-center">Last Login</td>
<td className="py-4 text-center">No of Tasks</td>
<td className="py-4 text-right">Status</td>
</tr>
<tr className="bg-white dark:bg-dark-white border-b dark:border-[#5356fb29] hover:bg-gray-50">
<td className=" py-4">
<div className="flex space-x-2 items-center">
<div className="w-[60px] h-[60px] rounded-full overflow-hidden flex justify-center items-center">
<img
src={dataImage1}
alt="data"
className="w-full h-full"
/>
</div>
<div className="flex flex-col">
<h1 className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
Firstname Lastname (age)
</h1>
<span className="text-sm text-thin-light-gray">
Added <span className="text-purple">10-10-2029</span>
</span>
</div>
</div>
</td>
<td className="text-center py-4 px-2">
<div className="flex space-x-1 items-center justify-center">
<span className="text-base text-dark-gray dark:text-white font-medium whitespace-nowrap">
10-10-2019
</span>
</div>
</td>
<td className="text-center py-4 px-2">
<div className="flex space-x-1 items-center justify-center">
<span className="text-base text-dark-gray dark:text-white font-medium whitespace-nowrap">
100
</span>
</div>
</td>
{familyList?.length > 0 &&
familyList?.map(({firstname, lastname, age}, idx) => (
<tr className="bg-white dark:bg-dark-white border-b dark:border-[#5356fb29] hover:bg-gray-50" key={idx}>
<td className=" py-4">
<div className="flex space-x-2 items-center">
<div className="w-[60px] h-[60px] rounded-full overflow-hidden flex justify-center items-center">
<img
src={dataImage1}
alt="data"
className="w-full h-full"
/>
</div>
<div className="flex flex-col">
<h1 className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
{`${firstname} ${lastname} (${age})`}
</h1>
<span className="text-sm text-thin-light-gray">
Added <span className="text-purple">10-10-2029</span>
</span>
</div>
</div>
</td>
<td className="text-center py-4 px-2">
<div className="flex space-x-1 items-center justify-center">
<span className="text-base text-dark-gray dark:text-white font-medium whitespace-nowrap">
10-10-2019
</span>
</div>
</td>
<td className="text-center py-4 px-2">
<div className="flex space-x-1 items-center justify-center">
<span className="text-base text-dark-gray dark:text-white font-medium whitespace-nowrap">
100
</span>
</div>
</td>
<td className="text-right py-4 px-2">
<button
type="button"
className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
>
Manage
</button>
</td>
</tr>
<td className="text-right py-4 px-2">
<button
type="button"
className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
>
Manage
</button>
</td>
</tr>
))}
{familyList?.length <= 0 && (
<div className="min-h-[400px] flex items-center justify-center text-black text-2xl text-center">
Nothing to see here
</div>
)}
</tbody>
</table>
</div>