"use client" import * as React from "react" import { Database, Lock, ShieldCheck, ChevronLeft, ChevronRight, Sparkles } from "lucide-react" interface ResultItem { name: string ind: string base: string fc: string cagr: string an: string ver: string spark: string locked: boolean pick: boolean } interface Pagination { text: string pages: number[] } interface ResultsListData { title: string count: string subtitle: string sortLabel: string sortOptions: string[] items: ResultItem[] pagination: Pagination } function Sparkline({ points, locked }: { points: string; locked: boolean }) { return ( ) } export function IQResultsList({ data, onUnlock, }: { data: ResultsListData onUnlock?: () => void }) { const [sortIdx, setSortIdx] = React.useState(0) return (
{/* Results header */}
{data.title} {data.count}
{data.subtitle}
{data.sortLabel}
{/* Cards — matching HTML reference */}
{data.items.map((item, i) => { const pickBadge = item.pick ? ( Used by IQ ) : null const lockBadge = item.locked ? ( Preview ) : ( Verified · {item.ver} ) return (
{/* Left: text info */}
{item.ind} {pickBadge}
{item.locked ? ( {item.name} ) : item.name}
{item.an} Meticulous analyst {lockBadge}
{/* Sparkline */} {/* Right: forecast */}
2030
{item.locked ? "$ ●●" : item.fc}
{item.locked ? "•••" : item.cagr}
{/* Chevron */}
) })}
{/* Pagination */}
{data.pagination.text}
{data.pagination.pages.map((page, i) => ( ))} …
) }