Function DataRow

app/components/DataTable.tsx:21–49

({ title, value, icon })

};

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 (