Merge pull request #29 from toririm/feature/header

ヘッダーを追加＆接続ステータスを表示

app/components/online-status.tsx

@@ -0,0 +1,23 @@
+import { useSyncExternalStore } from "react";
+
+const subscribe = (callback: () => void) => {
+  window.addEventListener("online", callback);
+  window.addEventListener("offline", callback);
+  return () => {
+    window.removeEventListener("online", callback);
+    window.removeEventListener("offline", callback);
+  };
+};
+
+export const useOnlineStatus = () => {
+  return useSyncExternalStore(
+    subscribe,
+    () => navigator.onLine,
+    () => true,
+  );
+};
+
+export const OnlineStatus = () => {
+  const online = useOnlineStatus();
+  return online ? <p>✅オンライン</p> : <p>⛔オフライン</p>;
+};

app/routes/_header.tsx

@@ -0,0 +1,18 @@
+import { Outlet } from "@remix-run/react";
+import { OnlineStatus } from "~/components/online-status";
+
+export default function BaseHeader() {
+  return (
+    <div>
+      <header className="bg-gray-800 p-4 text-white">
+        <h1 className="text-3xl">かふぇおれPOS 2024</h1>
+        <OnlineStatus />
+      </header>
+      <Outlet />
+    </div>
+  );
+}
+
+// cacher.tsx -> _header.cacher.tsx と変更することで
+// cacher.tsx ページに対して上記ヘッダーを付与することができる
+// 子となったcacher.tsxの中身が <Outlet /> に入るイメージ