Mobile app shell

import { useState } from "react";
import { Home } from "./screens/Home";
import { Search } from "./screens/Search";
import { Activity } from "./screens/Activity";
import { Profile } from "./screens/Profile";

const TABS = [
  { id: "home", label: "Home", icon: "⌂" },
  { id: "search", label: "Search", icon: "⌕" },
  { id: "activity", label: "Activity", icon: "◷" },
  { id: "profile", label: "Profile", icon: "◯" },
] as const;
type TabId = (typeof TABS)[number]["id"];

export default function App() {
  const [tab, setTab] = useState<TabId>("home");
  const title = TABS.find((t) => t.id === tab)?.label ?? "";
  return (
    <div className="mx-auto flex min-h-screen max-w-md flex-col bg-white text-slate-900 shadow-xl sm:my-4 sm:min-h-[calc(100vh-2rem)] sm:rounded-[2rem] sm:border sm:border-slate-200">
      <header className="sticky top-0 z-10 border-b border-slate-200 bg-white/90 px-4 pb-3 pt-[max(0.75rem,env(safe-area-inset-top))] backdrop-blur">
        <h1 className="text-lg font-semibold">{title}</h1>
      </header>
      <main className="flex-1 overflow-y-auto px-4 py-4" role="tabpanel" aria-label={title}>
        {tab === "home" ? <Home /> : tab === "search" ? <Search /> : tab === "activity" ? <Activity /> : <Profile />}
      </main>
      <nav className="sticky bottom-0 z-10 grid grid-cols-4 border-t border-slate-200 bg-white pb-[env(safe-area-inset-bottom)]" aria-label="Primary">
        {TABS.map((t) => (
          <button
            key={t.id}
            type="button"
            onClick={() => setTab(t.id)}
            aria-current={tab === t.id ? "page" : undefined}
            className={"flex flex-col items-center gap-0.5 py-2 text-xs " + (tab === t.id ? "text-blue-600" : "text-slate-500 hover:text-slate-900")}
          >
            <span aria-hidden="true" className="text-xl leading-none">
              {t.icon}
            </span>
            {t.label}
          </button>
        ))}
      </nav>
    </div>
  );
}