From e6e132e90578a6083b5dd67faefe4e42a800c38a Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Sun, 22 Feb 2026 19:42:08 +0200
Subject: [PATCH] ui/card frame: add support for arbitrary HTML attributes and
 event handlers

---
 apps/client/src/widgets/react/Card.tsx | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/apps/client/src/widgets/react/Card.tsx b/apps/client/src/widgets/react/Card.tsx
index afc09b343..1abd259f0 100644
--- a/apps/client/src/widgets/react/Card.tsx
+++ b/apps/client/src/widgets/react/Card.tsx
@@ -1,23 +1,24 @@
 import "./Card.css";
 import { ComponentChildren, createContext } from "preact";
-import { JSX } from "preact";
+import { JSX, HTMLAttributes } from "preact";
 import { useContext } from "preact/hooks";
 import clsx from "clsx";
 
 // #region Card Frame
 
-export interface CardFrameProps {
+export interface CardFrameProps extends HTMLAttributes<HTMLDivElement> {
     className?: string;
     highlightOnHover?: boolean;
     children: ComponentChildren;
 }
 
-export function CardFrame(props: CardFrameProps) {
-    return <div className={clsx("tn-card-frame", props.className, {
-                    "tn-card-highlight-on-hover": props.highlightOnHover
+export function CardFrame({className, highlightOnHover, children, ...rest}: CardFrameProps) {
+    return <div {...rest}
+                className={clsx("tn-card-frame", className, {
+                    "tn-card-highlight-on-hover": highlightOnHover
                 })}>
 
-        {props.children}
+        {children}
     </div>;
 }