aboutsummaryrefslogtreecommitdiffhomepage
path: root/frontend/app/components/Gaming/DataTable.tsx
blob: 098f4a250e5c2f94477d7083da9d822d91192177 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
import type React from "react";

type Props = {
	headers: React.ReactNode[];
	children: React.ReactNode;
};

export default function DataTable({ headers, children }: Props) {
	return (
		<div className="overflow-x-auto border-2 border-brand-600 rounded-xl">
			<table className="min-w-full divide-y divide-gray-400 border-collapse">
				<thead className="bg-gray-50">
					<tr>
						{headers.map((header, i) => (
							<th
								key={i}
								scope="col"
								className="px-6 py-3 text-left font-medium text-gray-800"
							>
								{header}
							</th>
						))}
					</tr>
				</thead>
				<tbody className="bg-white divide-y divide-gray-300">{children}</tbody>
			</table>
		</div>
	);
}

export function DataTableCell({ children }: { children: React.ReactNode }) {
	return (
		<td className="px-6 py-4 whitespace-nowrap text-gray-900">{children}</td>
	);
}

export function formatUnixTimestamp(timestamp: number): string {
	const date = new Date(timestamp * 1000);
	const year = date.getFullYear();
	const month = (date.getMonth() + 1).toString().padStart(2, "0");
	const day = date.getDate().toString().padStart(2, "0");
	const hours = date.getHours().toString().padStart(2, "0");
	const minutes = date.getMinutes().toString().padStart(2, "0");
	return `${year}-${month}-${day} ${hours}:${minutes}`;
}