spb/satelliteindex

1import Link from 'next/link';2import { OrbitBadge, StatusBadge } from '@/components/ui/badges';3import { Section } from '@/components/ui/section';4import { Unavailable } from '@/components/ui/unavailable';5import { fmtInt, fmtKm, num } from '@/lib/format';6import { routes } from '@/lib/site';7import type { HomePayload } from '@/lib/types';89/** Trending (by views) — or "Featured" when the view counters are still at zero. Honest label, real rows. */10export function FeaturedObjects({ items }: { items: HomePayload['trending'] }) {11  const hasViews = items.some((t) => (num(t.views) ?? 0) > 0);12  return (13    <Section eyebrow={hasViews ? 'Trending' : 'Featured'} title={hasViews ? 'Most viewed objects' : 'Notable objects'} action={{ href: routes.explore(), label: 'Find them on the globe' }} className="py-0">14      {items.length === 0 ? (15        <Unavailable what="Featured objects" />16      ) : (17        <ul className="divide-y divide-rule border-t border-rule">18          {items.map((t) => (19            <li key={t.id}>20              <Link href={routes.satellite(t.slug)} className="group grid min-h-[56px] grid-cols-[minmax(0,1fr)_auto] items-center gap-x-4 gap-y-1 py-2.5 md:grid-cols-[minmax(0,1.4fr)_minmax(0,1fr)_auto_auto]">21                <span className="min-w-0">22                  <span className="block truncate text-[15px] font-medium text-ink group-hover:text-accent">{t.name}</span>23                  <span className="mono block text-2xs text-ink-3">NORAD {t.norad_id ?? '—'}</span>24                </span>25                <span className="col-span-2 min-w-0 truncate text-xs text-ink-2 md:col-span-1">{[t.operator_name, t.constellation_name].filter(Boolean).join(' · ') || '—'}</span>26                <span className="flex items-center gap-1.5 md:justify-end">27                  <OrbitBadge orbitClass={t.orbit_class} />28                  <StatusBadge status={t.status} />29                </span>30                <span className="tnum hidden text-right text-xs text-ink-3 md:block" title="Perigee">31                  {fmtKm(t.perigee_km)}32                  {hasViews && <span className="ml-2">{fmtInt(t.views)} views</span>}33                </span>34              </Link>35            </li>36          ))}37        </ul>38      )}39    </Section>40  );41}42