67 lines
1.9 KiB
TypeScript
67 lines
1.9 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
|
import type { ReactElement } from 'react';
|
|
import Head from 'next/head';
|
|
import LayoutGuest from '../../layouts/Guest';
|
|
import WebSiteHeader from '../../components/WebPageComponents/Header';
|
|
import WebSiteFooter from '../../components/WebPageComponents/Footer';
|
|
|
|
type User = {
|
|
id: string;
|
|
firstName: string;
|
|
lastName: string;
|
|
email: string;
|
|
};
|
|
|
|
export default function Users() {
|
|
const [users, setUsers] = useState<User[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
useEffect(() => {
|
|
fetch('/api/users')
|
|
.then((res) => res.json())
|
|
.then((data) => {
|
|
setUsers(data.rows);
|
|
setLoading(false);
|
|
})
|
|
.catch(() => setLoading(false));
|
|
}, []);
|
|
|
|
return (
|
|
<div className="flex flex-col min-h-screen">
|
|
<Head>
|
|
<title>Users - Strategic Intelligence Engine</title>
|
|
<meta
|
|
name="description"
|
|
content="Public list of users for the Strategic Intelligence Engine."
|
|
/>
|
|
</Head>
|
|
|
|
<WebSiteHeader projectName="IntelliLedger Consulting" />
|
|
|
|
<main className="flex-grow bg-white px-4 py-8">
|
|
<section className="max-w-4xl mx-auto">
|
|
<h1 className="text-4xl font-bold mb-4">Users</h1>
|
|
{loading ? (
|
|
<p>Loading users...</p>
|
|
) : (
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
|
|
{users.map((user) => (
|
|
<div key={user.id} className="bg-white shadow p-4 rounded-lg">
|
|
<p className="font-medium text-lg">{user.firstName} {user.lastName}</p>
|
|
<p className="text-sm text-gray-500">{user.email}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</section>
|
|
</main>
|
|
|
|
<WebSiteFooter projectName="IntelliLedger Consulting" />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
Users.getLayout = function getLayout(page: ReactElement) {
|
|
return <LayoutGuest>{page}</LayoutGuest>;
|
|
};
|