FocusTile

import type { ReactNode } from "react";

type FocusGroupProps = {
  children: ReactNode;
  /** Layout of the group, a grid by default. */
  className?: string;
};

type FocusTileProps = {
  children: ReactNode;
  className?: string;
};

/* FocusGroup: holds FocusTiles. When one tile is hovered or focused, the rest fade and blur. CSS only. */
export function FocusGroup({ children, className = "grid grid-cols-2 gap-3" }: FocusGroupProps) {
  return <div className={`group/focus ${className}`}>{children}</div>;
}

/* FocusTile: one tile inside a FocusGroup. It stays sharp while it has the focus. */
export function FocusTile({
  children,
  className = "rounded-xl border border-white/10 bg-[#16132a] p-5 text-white",
}: FocusTileProps) {
  return (
    <div
      tabIndex={0}
      className={`outline-none transition-[opacity,filter,scale] duration-300 ease-out focus-visible:ring-2 focus-visible:ring-[#a78bfa] motion-reduce:transition-none group-hover/focus:scale-[0.98] group-hover/focus:opacity-40 group-hover/focus:blur-[2px] group-focus-within/focus:scale-[0.98] group-focus-within/focus:opacity-40 group-focus-within/focus:blur-[2px] hover:scale-100! hover:opacity-100! hover:blur-none! focus-within:scale-100! focus-within:opacity-100! focus-within:blur-none! ${className}`}
    >
      {children}
    </div>
  );
}