RevealPanel

import type { ReactNode } from "react";

type RevealPanelProps = {
  /** What always shows. */
  children: ReactNode;
  /** What slides up on hover or keyboard focus. */
  reveal: ReactNode;
  className?: string;
  /** Look of the panel that slides up. */
  panelClassName?: string;
};

/* RevealPanel: a panel slides up from the bottom of the card on hover or focus. CSS only. */
export function RevealPanel({
  children,
  reveal,
  className = "rounded-2xl border border-white/10 bg-[#16132a] p-6 text-white",
  panelClassName = "bg-[#a78bfa] p-6 text-[#0b0a14]",
}: RevealPanelProps) {
  return (
    <div tabIndex={0} className={`group relative overflow-hidden outline-none focus-visible:ring-2 focus-visible:ring-[#a78bfa] ${className}`}>
      <div className="transition-[opacity,transform] duration-500 ease-[cubic-bezier(.2,.8,.2,1)] group-hover:-translate-y-3 group-hover:opacity-40 group-focus-within:-translate-y-3 group-focus-within:opacity-40 motion-reduce:transition-none">
        {children}
      </div>
      <div
        className={`absolute inset-x-0 bottom-0 translate-y-full transition-transform duration-500 ease-[cubic-bezier(.2,.8,.2,1)] group-hover:translate-y-0 group-focus-within:translate-y-0 motion-reduce:transition-none ${panelClassName}`}
      >
        {reveal}
      </div>
    </div>
  );
}