"use client";
import { use, useEffect, useState } from "react";
import { now } from "./data.mjs";
// Client-side chrome around whatever the entry passes as `children`. Owns no
// fixture data — that lets the entry control whether the heavy sections render
// as server components (RSC variant) or as client components (SSR shortcut
// variant) just by choosing where it composes the tree.
export default function App({ children }) {
// `now()` is a `"use cache: request"` function. The use-cache-inline plugin
// compiles it into a SYNCHRONOUS wrapper on the SSR/client side that reads
// from the request-scoped shared cache. During SSR, render-dom.mjs flushes
// resolved cache entries into the HTML stream as
// `self.__react_server_request_cache_entries__` so the browser-side wrapper
// resolves it synchronously during hydration — no async client component.
const [time, setTime] = useState(use(now()));
useEffect(() => {
const interval = setInterval(() => setTime(new Date()), 1000);
return () => clearInterval(interval);
}, []);
return (
<div className="min-h-screen bg-gray-50 text-gray-900">
<header className="bg-white border-b">
<div className="max-w-6xl mx-auto px-6 py-6 flex items-center justify-between">
<div>
<h1 className="text-3xl font-bold">@lazarv/react-server</h1>
<p className="text-sm text-gray-500 mt-1">
SPA benchmark fixture — heavy client tree
</p>
</div>
<div className="text-right">
<p className="text-xs text-gray-500 uppercase tracking-wide">Now</p>
<p className="font-mono text-lg">{time.toLocaleTimeString()}</p>
</div>
</div>
</header>
<main className="max-w-6xl mx-auto px-6 py-8 space-y-12">{children}</main>
<footer className="bg-white border-t mt-12">
<div className="max-w-6xl mx-auto px-6 py-6 text-center text-sm text-gray-500">
Built with @lazarv/react-server
</div>
</footer>
</div>
);
}