Elastic Panels

"use client";

import { useEffect, useState } from "react";
import { motion, type Transition } from "motion/react";

/**
 * Harsh Dev UI · Developed by Harsh Pandav
 * https://harshpandav.dev · hello@harshpandav.dev
 *
 * ElasticPanels
 * A row of vertical panels that expand on interaction to reveal an image.
 * - Desktop (hover-capable pointer): hover a panel to expand it.
 * - Mobile / touch: tap a panel to expand it (tap again to close in closed mode).
 * - Panel width animates with a configurable spring/tween for a fluid feel.
 *
 * Variants (same expansion mechanics, different reveal):
 *   "cover"  — every panel shows its image behind a dark wash that clears on open. (default)
 *   "reveal" — collapsed panels are clean text; the image fades + zooms in on open.
 *
 * Animation effects (the `effect` prop):
 *   "spring" (default) · "gentle" · "snappy" · "smooth"
 */

export type Panel = {
  name: string;
  image: string;
  year?: string;
};

export type ElasticPanelsEffect = "spring" | "gentle" | "snappy" | "smooth";
export type ElasticPanelsVariant = "cover" | "reveal";
export type ElasticPanelsSpeed = "fast" | "normal" | "slow";

export type ElasticPanelsProps = {
  panels: Panel[];
  variant?: ElasticPanelsVariant;
  effect?: ElasticPanelsEffect;
  speed?: ElasticPanelsSpeed;
  defaultOpen?: boolean;
  defaultActive?: number;
  rounded?: boolean;
  year?: string;
  transition?: Transition;
  className?: string;
};

const EFFECTS: Record<ElasticPanelsEffect, Transition> = {
  spring: { type: "spring", duration: 0.5, bounce: 0.12 },
  gentle: { type: "spring", duration: 0.7, bounce: 0 },
  snappy: { type: "spring", duration: 0.38, bounce: 0.22 },
  smooth: { type: "tween", duration: 0.5, ease: [0.22, 1, 0.36, 1] },
};

const SPEEDS: Record<ElasticPanelsSpeed, number> = {
  fast: 0.55,
  normal: 1,
  slow: 1.8,
};

type VariantConfig = {
  panelBg: string;
  imageOpacity: (isActive: boolean) => number;
  imageScale: (isActive: boolean) => number;
  washOpacity: (isActive: boolean) => number;
  idleName: string;
};

const VARIANTS: Record<ElasticPanelsVariant, VariantConfig> = {
  cover: {
    panelBg: "bg-neutral-300 dark:bg-neutral-900",
    imageOpacity: () => 1,
    imageScale: () => 1,
    washOpacity: (isActive) => (isActive ? 0.15 : 0.72),
    idleName: "text-white/55",
  },
  reveal: {
    panelBg: "bg-neutral-100 dark:bg-neutral-950",
    imageOpacity: (isActive) => (isActive ? 1 : 0),
    imageScale: (isActive) => (isActive ? 1 : 1.12),
    washOpacity: (isActive) => (isActive ? 0.3 : 0),
    idleName: "text-neutral-600 dark:text-white/55",
  },
};

export function ElasticPanels({
  panels,
  variant = "cover",
  effect = "spring",
  speed = "normal",
  defaultOpen = true,
  defaultActive = 0,
  rounded = false,
  year = "2024",
  transition,
  className = "",
}: ElasticPanelsProps) {
  const resting = defaultOpen ? defaultActive : null;
  const [active, setActive] = useState<number | null>(resting);
  const hoverCapable = useHoverCapable();

  const v = VARIANTS[variant] || VARIANTS.cover;
  const isCover = variant === "cover";
  const base = transition || EFFECTS[effect] || EFFECTS.spring;
  const scale = SPEEDS[speed] ?? 1;
  const t: Transition =
    "duration" in base && typeof base.duration === "number"
      ? { ...base, duration: base.duration * scale }
      : base;

  useEffect(() => {
    setActive(defaultOpen ? defaultActive : null);
  }, [defaultOpen, defaultActive]);

  const handlers = (i: number) =>
    hoverCapable
      ? { onMouseEnter: () => setActive(i) }
      : {
          onClick: () =>
            setActive((prev) => (prev === i && !defaultOpen ? null : i)),
        };

  const handleRowLeave = () => {
    if (hoverCapable && !defaultOpen) setActive(null);
  };

  return (
    <div
      onMouseLeave={handleRowLeave}
      className={`flex h-full w-full flex-col overflow-hidden rounded-[inherit] sm:flex-row ${className}`}
    >
      {panels.map((panel, i) => {
        const isActive = i === active;
        return (
          <motion.div
            key={panel.name}
            {...handlers(i)}
            animate={{ flexGrow: isActive ? 20 : 1 }}
            transition={t}
            style={{ flexBasis: "2.75rem" }}
            className={`relative min-w-0 cursor-pointer overflow-hidden border-t border-black/10 first:border-t-0 dark:border-white/10 sm:border-l sm:border-t-0 sm:first:border-l-0 ${v.panelBg}`}
            role="button"
            aria-expanded={isActive}
            aria-label={panel.name}
          >
            <div
              className={`absolute overflow-hidden transition-[inset,border-radius] duration-300 ease-out ${
                rounded
                  ? "inset-2 rounded-xl sm:inset-2.5 sm:rounded-2xl"
                  : "inset-0"
              }`}
            >
              <motion.img
                src={panel.image}
                alt={panel.name}
                draggable={false}
                loading="eager"
                decoding="async"
                className="absolute inset-0 h-full w-full select-none object-cover"
                style={{ willChange: isCover ? "opacity" : "transform, opacity" }}
                animate={
                  isCover
                    ? { opacity: v.imageOpacity(isActive) }
                    : {
                        opacity: v.imageOpacity(isActive),
                        scale: v.imageScale(isActive),
                      }
                }
                transition={t}
              />

              <motion.div
                className="absolute inset-0 bg-black"
                animate={{ opacity: v.washOpacity(isActive) }}
                transition={t}
              />

              <motion.div
                aria-hidden
                className="pointer-events-none absolute inset-0"
                initial={false}
                animate={{ opacity: isCover ? 1 : 0 }}
                transition={{ duration: 0.3, ease: [0.22, 1, 0.36, 1] }}
              >
                <div className="absolute inset-0 bg-linear-to-t from-black/55 via-transparent to-black/20 sm:hidden" />
                <div className="absolute inset-0 hidden bg-linear-to-r from-black/50 via-black/10 to-transparent sm:block" />
              </motion.div>
            </div>

            <motion.span
              className="pointer-events-none absolute left-5 top-4 text-base font-medium tracking-tight text-white/85 sm:left-4 sm:top-5 sm:rotate-180 sm:[writing-mode:vertical-rl]"
              animate={{ opacity: isActive ? 1 : 0 }}
              transition={{ duration: 0.3 }}
            >
              {panel.year || year}
            </motion.span>

            <span
              className={`pointer-events-none absolute bottom-4 left-5 whitespace-nowrap text-xl tracking-tight transition-colors duration-300 sm:bottom-6 sm:left-4 sm:rotate-180 sm:text-2xl sm:[writing-mode:vertical-rl] ${
                isActive
                  ? "font-semibold text-white"
                  : `font-medium ${v.idleName}`
              }`}
            >
              {panel.name}
            </span>
          </motion.div>
        );
      })}
    </div>
  );
}

function useHoverCapable() {
  const [hoverCapable, setHoverCapable] = useState(true);
  useEffect(() => {
    const mq = window.matchMedia("(hover: hover) and (pointer: fine)");
    const update = () => setHoverCapable(mq.matches);
    update();
    mq.addEventListener("change", update);
    return () => mq.removeEventListener("change", update);
  }, []);
  return hoverCapable;
}