`src/app/stars/nearby/page.tsx`

47 lines
/**
 * /stars/nearby — Mobile-GPS-aware "stars near me" page
 *
 * Browser geolocation API → query stars + Walk of Fame within 1mi radius.
 * Renders walking-distance list with click-to-open-in-Maps links.
 *
 * Server component shells the page; client component does geolocation +
 * fetches /api/stars/nearby?lat=&lng=&radius= for live results.
 */
import type { Metadata } from 'next';
import { BreadcrumbArchive } from '@/components/BreadcrumbArchive';
import { StarsNearbyClient } from './StarsNearbyClient';

export const metadata: Metadata = {
  title: 'Stars near me',
  description: 'Find Hollywood Walk of Fame stars and historical celebrity residences within walking distance of your current location.',
  alternates: { canonical: '/stars/nearby' },
};

export default function NearbyPage() {
  return (
    <>
      <div className="max-w-3xl mx-auto px-6 pt-6">
        <BreadcrumbArchive items={[
          { label: 'Archive', href: '/' },
          { label: 'Map of the stars', href: '/stars' },
          { label: 'Near me' },
        ]} />
      </div>

      <header className="max-w-3xl mx-auto px-6 py-12 border-b border-ink/10">
        <p className="text-[10px] uppercase tracking-[0.18em] text-ink/55 mb-3 font-mono">
          Mobile · GPS
        </p>
        <h1 className="font-display text-5xl md:text-6xl text-ink tracking-[-0.02em] leading-[1.02]">
          Stars near me.
        </h1>
        <p className="mt-4 font-display italic text-xl text-ink/70 max-w-prose">
          Walk of Fame stars and historical residences within walking distance of where you&rsquo;re standing right now.
        </p>
      </header>

      <StarsNearbyClient />
    </>
  );
}