lorentz
9658640c04
The soft reset to 77073ba inadvertently staged deletions of all phase 2
and 3 artifacts. This commit restores them from their source commits so
subsequent task commits build on the complete prior-phase foundation:
- components/mobile/{BottomNav,HeaderBar,KpiCardMobile,MoreDrawer,NeedsAttentionStrip,WorkerStatusRow}
- app/mobile/layout.tsx, dashboard/page.tsx, analyzer/page.tsx
- app/api/mobile/dashboard/route.ts
- All .planning/** files from phases 01-04
- CLAUDE.md, app/layout.tsx, app/styles/brand.css, public/manifest.json
51 lines
1.7 KiB
TypeScript
51 lines
1.7 KiB
TypeScript
'use client';
|
|
|
|
/* NeedsAttentionStrip — phase 03 (DASH-02).
|
|
*
|
|
* Horizontal-scroll strip of compact attention cards. Each card shows a
|
|
* count + label and is a next/link to the destination view. The strip
|
|
* uses native horizontal overflow with snap-x for momentum scroll on
|
|
* iOS/Android. Renders nothing when items=[]. */
|
|
|
|
import Link from 'next/link';
|
|
import { AlertTriangle, ChevronRight } from 'lucide-react';
|
|
|
|
export interface NeedsAttentionItem {
|
|
id: string;
|
|
label: string;
|
|
count: number;
|
|
href: string;
|
|
}
|
|
|
|
interface NeedsAttentionStripProps {
|
|
items: NeedsAttentionItem[];
|
|
}
|
|
|
|
export function NeedsAttentionStrip({ items }: NeedsAttentionStripProps) {
|
|
if (items.length === 0) return null;
|
|
return (
|
|
<div>
|
|
<p className="text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-2">
|
|
Needs attention
|
|
</p>
|
|
<div className="-mx-4 px-4 flex gap-3 overflow-x-auto snap-x snap-mandatory pb-1">
|
|
{items.map(item => (
|
|
<Link
|
|
key={item.id}
|
|
href={item.href}
|
|
className="snap-start shrink-0 w-44 rounded-2xl border bg-card p-3 hover:bg-accent transition-colors"
|
|
>
|
|
<div className="flex items-start justify-between">
|
|
<AlertTriangle className={`w-4 h-4 ${item.count > 0 ? 'text-destructive' : 'text-muted-foreground'}`} />
|
|
<ChevronRight className="w-4 h-4 text-muted-foreground" />
|
|
</div>
|
|
<p className={`mt-2 text-2xl font-bold tabular-nums ${item.count > 0 ? 'text-destructive' : ''}`}>
|
|
{item.count}
|
|
</p>
|
|
<p className="text-xs text-muted-foreground mt-0.5">{item.label}</p>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|