74 lines
2.2 KiB
TypeScript
74 lines
2.2 KiB
TypeScript
import { FunctionComponent, useState } from "react";
|
|
import { CopyTextButton } from "./CopyTextButton";
|
|
import { Title } from "./Primitives/Title";
|
|
|
|
export type DataTableProps = {
|
|
rows: DataTableRow[];
|
|
};
|
|
|
|
export type DataTableRow = {
|
|
key: string;
|
|
value: string;
|
|
icon?: JSX.Element;
|
|
};
|
|
|
|
type DataRowProps = {
|
|
title: string;
|
|
value: string;
|
|
icon?: JSX.Element;
|
|
};
|
|
|
|
const DataRow: FunctionComponent<DataRowProps> = ({ title, value, icon }) => {
|
|
const [hovering, setHovering] = useState(false);
|
|
return (
|
|
<tr className="divide-solid divide-x transition dark:divide-slate-700">
|
|
<td className="flex items-baseline py-2 pr-3 text-base dark:text-slate-400">
|
|
<div className="flex-1 ml-1">{title}</div>
|
|
</td>
|
|
<td
|
|
onMouseOver={() => setHovering(true)}
|
|
onMouseOut={() => setHovering(false)}
|
|
className={`relative w-full h-full pl-2 py-2 text-base text-slate-800 transition dark:text-slate-300 break-all ${
|
|
hovering ? "bg-slate-100 dark:bg-slate-700" : "bg-transparent"
|
|
}`}
|
|
>
|
|
{value}
|
|
<div
|
|
className={`absolute top-0 right-0 flex justify-end h-full w-full transition ${
|
|
hovering ? "opacity-100" : "opacity-0"
|
|
}`}
|
|
>
|
|
<CopyTextButton
|
|
className="bg-slate-200 hover:bg-slate-300 h-fit mt-1 mr-1 px-2 py-0.5 rounded-sm transition hover:cursor-pointer dark:text-white dark:bg-slate-600 dark:hover:bg-slate-500"
|
|
value={value}
|
|
></CopyTextButton>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
);
|
|
};
|
|
|
|
export const DataTable: FunctionComponent<DataTableProps> = ({ rows }) => {
|
|
return (
|
|
<div>
|
|
<Title className="text-slate-700 dark:text-slate-400 mb-2">
|
|
Properties
|
|
</Title>
|
|
<table className="w-full table-auto border-y-[0.5px] border-slate-300 transition dark:border-slate-700">
|
|
<tbody className="divide-solid divide-y divide-slate-300 w-full transition dark:divide-slate-700">
|
|
{rows.map((row) => {
|
|
return (
|
|
<DataRow
|
|
key={row.key}
|
|
title={row.key}
|
|
value={row.value}
|
|
icon={row.icon}
|
|
/>
|
|
);
|
|
})}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
);
|
|
};
|