"use client"; import { useEffect, useId, useMemo, useState } from "react"; import { AnimatePresence, motion } from "framer-motion"; import { Activity, ArrowDownRight, ArrowUpRight, CalendarDays, Clock, TrendingUp, type LucideIcon, } from "lucide-react"; import { cn } from "@/lib/utils"; export interface SegmentOption { id: string; label: string; icon?: LucideIcon; } const THUMB_SPRING = { type: "spring", stiffness: 420, damping: 34, mass: 0.9 } as const; /** * Apple-style segmented control with a sliding frosted thumb. * Controlled (pass `value` + `onChange`) or uncontrolled (pass `defaultValue`). */ export function SegmentedControl({ options, value, defaultValue, onChange, layoutId, fluid = false, ariaLabel = "Select an option", className, }: { options: SegmentOption[]; value?: string; defaultValue?: string; onChange?: (id: string) => void; layoutId?: string; fluid?: boolean; ariaLabel?: string; className?: string; }) { const reactId = useId(); const thumbId = layoutId ?? `segmented-thumb-${reactId}`; const [internal, setInternal] = useState(defaultValue ?? options[0]?.id); const active = value ?? internal; function select(id: string) { if (value === undefined) setInternal(id); onChange?.(id); } return (

{options.map((opt) => { const isActive = opt.id === active; const Icon = opt.icon; return ( select(opt.id)} whileTap={{ scale: 0.95 }} transition={{ type: "spring", stiffness: 600, damping: 30 }} className={cn( "relative flex items-center justify-center gap-1.5 rounded-[10px] px-3 py-2 text-[13px] font-medium", "outline-none transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-brand/50", fluid && "flex-1", isActive ? "text-white" : "text-zinc-400 hover:text-zinc-200" )} > {isActive && ( )} {Icon && ( )} {opt.label} ); })}

); } /* ------------------------------------------------------------------ */ /* Demo */ /* ------------------------------------------------------------------ */ interface Range extends SegmentOption { value: string; caption: string; delta: string; up: boolean; seed: number; } const RANGES: Range[] = [ { id: "today", label: "Today", icon: Clock, value: "$4,280", caption: "vs yesterday", delta: "8.2%", up: true, seed: 1.2 }, { id: "week", label: "Week", icon: Activity, value: "$28,940", caption: "vs last week", delta: "14.6%", up: true, seed: 3.7 }, { id: "month", label: "Month", icon: CalendarDays, value: "$126.5K", caption: "vs last month", delta: "3.1%", up: false, seed: 6.1 }, { id: "year", label: "Year", icon: TrendingUp, value: "$1.48M", caption: "vs last year", delta: "22.9%", up: true, seed: 9.4 }, ]; const CHART_W = 320; const CHART_H = 110; const CHART_PAD = 16; const POINTS = 24; function buildChart(seed: number) { const raw = Array.from({ length: POINTS }, (_, i) => Math.sin(seed + i * 0.55) * 0.55 + Math.sin(seed * 1.7 + i * 0.2) * 0.3 + Math.sin(seed * 0.5 + i * 0.9) * 0.15 ); const min = Math.min(...raw); const max = Math.max(...raw); const span = max - min || 1; const pts = raw.map((v, i) => { const t = (v - min) / span; const x = (i / (POINTS - 1)) * CHART_W; const y = CHART_H - (CHART_PAD + t * (CHART_H - CHART_PAD * 2)); return [Math.round(x * 100) / 100, Math.round(y * 100) / 100] as const; }); const line = "M " + pts.map((p) => `${p[0]} ${p[1]}`).join(" L "); const area = `${line} L ${CHART_W} ${CHART_H} L 0 ${CHART_H} Z`; const lastY = pts[pts.length - 1][1]; const dotTop = Math.round((lastY / CHART_H) * 10000) / 100; // percent return { line, area, dotTop }; } function RangePanel({ range }: { range: Range }) { const gid = useId().replace(/:/g, ""); const { line, area, dotTop } = useMemo(() => buildChart(range.seed), [range.seed]); return (

{range.value}

{range.caption}

{range.up ? : } {range.delta}

); } export default function Demo() { const [active, setActive] = useState("week"); const [locked, setLocked] = useState(false); const range = RANGES.find((r) => r.id === active) ?? RANGES[0]; // Idle cinema: gently cycle ranges until the user takes over. useEffect(() => { if (locked) return; const t = setInterval(() => { setActive((prev) => { const idx = RANGES.findIndex((r) => r.id === prev); return RANGES[(idx + 1) % RANGES.length].id; }); }, 2600); return () => clearInterval(t); }, [locked]); function handleChange(id: string) { setLocked(true); setActive(id); } return (

{/* soft top glow */}

Revenue

Live

); }

Segmented Control