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 {children}
;
}
/* 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 (
{children}
);
}