Forward/ballistic-builder
3
0
Fork 0
mirror of https://gitea.gofwd.group/dstrawsb/ballistic-builder.git synced 2025-12-06 10:46:44 -05:00
Code Issues Packages Projects Releases Wiki Activity

users page and a function to populate table headers

Browse Source
This commit is contained in:
Don Strawsburg
2025-01-16 16:06:34 -05:00
parent 4ca7c393ef
commit 9580f78ef5
9 changed files with 319 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

137
src/components/admin/UsersTable/index.tsx Normal file
View File

@@ -0,0 +1,137 @@
import { ChevronDownIcon } from "@heroicons/react/20/solid";
import { PlusCircleIcon } from "@heroicons/react/20/solid";
import Image from "next/image";
import Link from "next/link";
export default async function UsersTable(props: any) {
return (
<div className="pb-12">
<div className="mt-8 flow-root">
<div className="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
<div className="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
<table className="min-w-full divide-y divide-gray-300">
<thead>
<tr>
<th
scope="col"
className="py-3.5 pl-4 pr-3 text-left text-xs font-semibold text-gray-900 "
>
<a href="#" className="group inline-flex">
{props.newColumnHeadings.getHeading()}
<span className="invisible ml-2 flex-none rounded text-gray-400 group-hover:visible group-focus:visible">
<ChevronDownIcon
aria-hidden="true"
className="size-5"
/>
</span>
</a>
</th>
<th
scope="col"
className="px-3 py-3.5 text-left text-xs font-semibold text-gray-900"
>
<a href="#" className="group inline-flex">
{props.newColumnHeadings.getHeading()}
<span className="ml-2 flex-none rounded bg-gray-100 text-gray-900 group-hover:bg-gray-200">
<ChevronDownIcon
aria-hidden="true"
className="size-5"
/>
</span>
</a>
</th>
<th
scope="col"
className="px-3 py-3.5 text-left text-xs font-semibold text-gray-900"
>
<a href="#" className="group inline-flex">
{props.newColumnHeadings.getHeading()}
<span className="ml-2 flex-none rounded bg-gray-100 text-gray-900 group-hover:bg-gray-200">
<ChevronDownIcon
aria-hidden="true"
className="size-5"
/>
</span>
</a>
</th>
<th
scope="col"
className="px-3 py-3.5 text-left text-xs font-semibold text-gray-900"
>
<a href="#" className="group inline-flex">
{props.newColumnHeadings.getHeading()}
<span className="invisible ml-2 flex-none rounded text-gray-400 group-hover:visible group-focus:visible">
<ChevronDownIcon
aria-hidden="true"
className="invisible ml-2 size-5 flex-none rounded text-gray-400 group-hover:visible group-focus:visible"
/>
</span>
</a>
</th>
<th
scope="col"
className="px-3 py-3.5 text-left text-xs font-semibold text-gray-900"
>
<a href="#" className="group inline-flex">
{props.newColumnHeadings.getHeading()}
<span className="invisible ml-2 flex-none rounded text-gray-400 group-hover:visible group-focus:visible">
<ChevronDownIcon
aria-hidden="true"
className="invisible ml-2 size-5 flex-none rounded text-gray-400 group-hover:visible group-focus:visible"
/>
</span>
</a>
</th>
</tr>
</thead>
<tbody className=" divide-y divide-gray-200 bg-white">
{props.data.map((item: any) => (
<tr key={item.uuid}>
<td className="whitespace-wrap flex items-center py-4 pl-4 pr-3 text-xs font-medium text-gray-900 ">
<Link href={{
pathname: '/userProfile',
query: {
uuid: item.uuid,
},
}}><span className="pl-2"> {item.email}</span></Link>
</td>
<td className="whitespace-nowrap px-3 py-4 text-xs text-gray-900">
{item.first_name}
</td>
<td className="whitespace-nowrap px-3 py-4 text-xs text-gray-900">
{item.last_name}
</td>
<td className="whitespace-nowrap px-3 py-4 text-xs text-gray-900">
${item.username}
</td>
<td className="whitespace-nowrap px-3 py-4 text-xs text-gray-900">
<button
type="button"
className="inline-flex items-center gap-x-1.5 rounded-xl bg-lime-800 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-lime-900 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-lime-900"
>
Edit
<PlusCircleIcon
aria-hidden="true"
className="-mr-0.5 size-5"
/>
</button>
</td>
<td style={{display:'none'}}>
</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
</div>
</div>
);
}