Aspect Ratio

import { useState, type ReactNode } from 'react';
import { cn } from '@/lib/cn';
import { Tabs } from './Tabs';

export type AspectRatioProps = {
  ratio: number;
  children?: ReactNode;
  className?: string;
};

/** Keeps children at a fixed width/height ratio. Changes animate smoothly. */
export function AspectRatio({ ratio, children, className }: AspectRatioProps) {
  return (
    <div className={cn('relative w-full', className)}>
      <div className="transition-[padding] duration-700 ease-spring" style={{ paddingBottom: `${100 / ratio}%` }} />
      <div className="absolute inset-0">{children}</div>
    </div>
  );
}

const RATIOS = [
  { id: '16:9', label: '16:9', value: 16 / 9, use: 'Video · YouTube' },
  { id: '4:3', label: '4:3', value: 4 / 3, use: 'Presentation' },
  { id: '1:1', label: '1:1', value: 1, use: 'Instagram post' },
  { id: '9:16', label: '9:16', value: 9 / 16, use: 'Story · Reels' },
];

const BOX = 240;

export function AspectRatioDemo() {
  const [id, setId] = useState('16:9');
  const r = RATIOS.find((x) => x.id === id)!;
  const w = Math.min(BOX * 1.4, BOX * r.value);
  const h = w / r.value;

  return (
    <div className="mx-auto flex w-full max-w-lg flex-col items-center gap-6">
      <Tabs tabs={RATIOS.map(({ id, label }) => ({ id, label }))} value={id} onChange={setId} />
      <div className="flex h-[260px] items-center justify-center">
        <div
          className="relative overflow-hidden rounded-2xl shadow-pop transition-all duration-700 ease-spring"
          style={{ width: w, height: h }}
        >
          <div className="absolute inset-0 bg-[radial-gradient(circle_at_20%_20%,#38bdf8,transparent_55%),radial-gradient(circle_at_85%_80%,#14b8a6,transparent_55%),radial-gradient(circle_at_80%_10%,#fbbf24,transparent_40%)] bg-ink-900" />
          <div className="dot-bg absolute inset-0 opacity-50" />
          <div className="absolute inset-3 rounded-xl border border-dashed border-white/25" />
          <div className="relative flex h-full flex-col items-center justify-center text-white">
            <span key={id} className="animate-scale-in text-3xl font-semibold tracking-tight tabular-nums drop-shadow">
              {r.label}
            </span>
            <span key={`${id}-u`} className="mt-1 animate-fade-up text-xs text-white/80">
              {r.use}
            </span>
          </div>
        </div>
      </div>
      <p className="text-xs tabular-nums text-ink-500">
        {Math.round(w)} × {Math.round(h)} px
      </p>
    </div>
  );
}

import { useLayoutEffect, useRef, useState, type KeyboardEvent, type ReactNode } from 'react';
import { Bell, CreditCard, Settings, Users } from 'lucide-react';
import { cn } from '@/lib/cn';
import { animateOnce } from './utils';

export type TabItem = { id: string; label: string; icon?: ReactNode };

export type TabsProps = {
  tabs: TabItem[];
  value: string;
  onChange: (id: string) => void;
  variant?: 'pill' | 'underline';
  className?: string;
};

export function Tabs({ tabs, value, onChange, variant = 'pill', className }: TabsProps) {
  const listRef = useRef<HTMLDivElement>(null);
  const refs = useRef<Record<string, HTMLButtonElement | null>>({});
  const [ind, setInd] = useState({ left: 0, width: 0, ready: false });

  useLayoutEffect(() => {
    const measure = () => {
      const el = refs.current[value];
      if (el) setInd((p) => ({ left: el.offsetLeft, width: el.offsetWidth, ready: p.ready || el.offsetWidth > 0 }));
    };
    measure();
    const ro = new ResizeObserver(measure);
    if (listRef.current) ro.observe(listRef.current);
    return () => ro.disconnect();
  }, [value, tabs]);

  const onKey = (e: KeyboardEvent) => {
    const i = tabs.findIndex((t) => t.id === value);
    let next = -1;
    if (e.key === 'ArrowRight') next = (i + 1) % tabs.length;
    if (e.key === 'ArrowLeft') next = (i - 1 + tabs.length) % tabs.length;
    if (e.key === 'Home') next = 0;
    if (e.key === 'End') next = tabs.length - 1;
    if (next < 0) return;
    e.preventDefault();
    onChange(tabs[next].id);
    refs.current[tabs[next].id]?.focus();
  };

  const pill = variant === 'pill';

  return (
    <div
      ref={listRef}
      role="tablist"
      onKeyDown={onKey}
      className={cn(
        'relative inline-flex items-center',
        pill ? 'gap-0.5 rounded-xl bg-ink-900 p-1 shadow-hairline' : 'gap-1 border-b border-white/5',
        className,
      )}
    >
      <span
        aria-hidden
        className={cn(
          'absolute',
          pill ? 'inset-y-1 rounded-lg bg-ink-800 shadow-[0_0_0_1px_rgba(255,255,255,0.08),0_2px_8px_rgba(0,0,0,0.4)]' : '-bottom-px h-0.5 rounded-full bg-brand-400',
          ind.ready && 'transition-[left,width] duration-500 ease-spring',
        )}
        style={{ left: ind.left, width: ind.width, opacity: ind.ready ? 1 : 0 }}
      />
      {tabs.map((t) => {
        const active = t.id === value;
        return (
          <button
            key={t.id}
            ref={(el) => (refs.current[t.id] = el)}
            role="tab"
            aria-selected={active}
            tabIndex={active ? 0 : -1}
            onClick={() => onChange(t.id)}
            className={cn(
              'focus-ring relative z-10 inline-flex items-center gap-2 whitespace-nowrap text-sm font-medium transition-colors duration-200 active:scale-[0.97] [&_svg]:h-4 [&_svg]:w-4',
              pill ? 'h-8 rounded-lg px-3.5' : 'h-10 rounded-md px-3',
              active ? 'text-ink-50' : 'text-ink-400 hover:text-ink-200',
            )}
          >
            {t.icon && <span className={cn('transition-colors', active && !pill && 'text-brand-300')}>{t.icon}</span>}
            {t.label}
          </button>
        );
      })}
    </div>
  );
}

const SETTINGS = [
  { id: 'general', label: 'General', icon: <Settings /> },
  { id: 'team', label: 'Team', icon: <Users /> },
  { id: 'billing', label: 'Billing', icon: <CreditCard /> },
  { id: 'alerts', label: 'Alerts', icon: <Bell /> },
];

const PANELS: Record<string, { title: string; body: string; rows: [string, string][] }> = {
  general: { title: 'Workspace', body: 'Name, URL and default region.', rows: [['Name', 'Acme Inc.'], ['URL', 'acme.lumen.dev'], ['Region', 'Frankfurt (eu-central-1)']] },
  team: { title: 'Members', body: '8 people have access to this workspace.', rows: [['Owners', '2'], ['Admins', '3'], ['Members', '3']] },
  billing: { title: 'Plan', body: 'Pro · renews on Mar 14, 2025.', rows: [['Seats', '8 × $24'], ['Usage', '$38.20'], ['Total', '$230.20 / mo']] },
  alerts: { title: 'Notifications', body: 'Where we reach you about deployments.', rows: [['Email', 'On'], ['Slack', '#deploys'], ['SMS', 'Off']] },
};

export function TabsDemo() {
  const [tab, setTab] = useState('general');
  const [range, setRange] = useState('7d');
  const order = SETTINGS.map((s) => s.id);
  const [dir, setDir] = useState(1);
  const panel = PANELS[tab];

  const change = (id: string) => {
    setDir(order.indexOf(id) >= order.indexOf(tab) ? 1 : -1);
    setTab(id);
  };

  return (
    <div className="mx-auto flex w-full max-w-md flex-col items-center gap-8">
      <Tabs
        variant="underline"
        value={range}
        onChange={setRange}
        tabs={[
          { id: '24h', label: 'Last 24h' },
          { id: '7d', label: '7 days' },
          { id: '30d', label: '30 days' },
          { id: '90d', label: 'Quarter' },
        ]}
      />
      <div className="w-full">
        <div className="flex justify-center">
          <Tabs tabs={SETTINGS} value={tab} onChange={change} />
        </div>
        <div className="mt-4 overflow-hidden rounded-2xl bg-ink-900 shadow-card">
          <div
            key={tab}
            className="p-5"
            ref={(el) =>
              animateOnce(
                el,
                [
                  { opacity: 0, transform: `translateX(${dir * 24}px)`, filter: 'blur(4px)' },
                  { opacity: 1, transform: 'translateX(0)', filter: 'blur(0)' },
                ],
                { duration: 420, easing: 'cubic-bezier(0.16,1,0.3,1)' },
              )
            }
          >
            <p className="text-sm font-medium text-ink-50">{panel.title}</p>
            <p className="mt-0.5 text-sm text-ink-400">{panel.body}</p>
            <dl className="mt-4 divide-y divide-white/5">
              {panel.rows.map(([k, v]) => (
                <div key={k} className="flex justify-between py-2.5 text-sm">
                  <dt className="text-ink-400">{k}</dt>
                  <dd className="font-medium text-ink-100">{v}</dd>
                </div>
              ))}
            </dl>
          </div>
        </div>
      </div>
    </div>
  );
}

/**
 * Plays a Web Animation the first time an element mounts. Safe to call from
 * inline ref callbacks (which React re-invokes on every render).
 */
export function animateOnce(el: HTMLElement | null, keyframes: Keyframe[], options: KeyframeAnimationOptions) {
  if (!el || el.dataset.played) return;
  el.dataset.played = '1';
  el.animate(keyframes, options);
}

export const clamp = (v: number, min: number, max: number) => Math.min(max, Math.max(min, v));