useOS

"use client";
import { useOS } from "@/hooks/use-os";

export function UseOSDemo() {
  const model = useOS();
  return (
    <table>
      <tbody>
        <tr>
          <td>Browser</td>
          <td>
            <p suppressHydrationWarning className="ml-4 flex flex-row items-center gap-2">
              {model.browser?.icon && <model.browser.icon size={32} />}
              <span>{String(model.browser?.name)}</span>
            </p>
          </td>
        </tr>
        <tr>
          <td colSpan={2}>
            <hr className="my-4 border-t" />
          </td>
        </tr>
        <tr>
          <td>Model</td>
          <td>
            <p suppressHydrationWarning className="ml-4 flex flex-row items-center gap-2">
              <model.device.icon size={32} />
              <span>{String(model.device.name)}</span>
            </p>
          </td>
        </tr>
      </tbody>
    </table>
  );
}