gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2026-02-20 04:34:38 +01:00
Code Issues Actions 22 Packages Projects Releases Wiki Activity

client/ui/cards: add support for custom class names and action callbacks

Browse Source
This commit is contained in:
Adorian Doran 2026-02-14 00:08:00 +02:00
parent b618e5a00f
commit be12658864
1 changed files with 12 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
apps/client/src/widgets/react/Card.tsx
View File

@ -5,17 +5,21 @@ import { useContext } from "preact/hooks";
import clsx from "clsx";
interface CardProps {
className?: string;
}
export function Card(props: {children: ComponentChildren} & CardProps) {
return <div className="tn-card">
return <div className={clsx(["tn-card", props.className])}>
{props.children}
</div>;
}
interface CardSectionProps {
className?: string;
subSections?: JSX.Element | JSX.Element[];
childrenVisible?: boolean;
hasAction: boolean;
onAction?: () => void;
}
export function CardSection(props: {children: ComponentChildren} & CardSectionProps) {
@ -23,9 +27,13 @@ export function CardSection(props: {children: ComponentChildren} & CardSectionPr
const nestingLevel = (parentContext && parentContext.nestingLevel + 1) ?? 0;
return <>
<section className={clsx(["tn-card-section", {"tn-card-section-nested": nestingLevel > 0}])}
style={"--tn-card-section-nesting-level: " + nestingLevel}>
{props.children} {nestingLevel}
<section className={clsx(["tn-card-section", {
"tn-card-section-nested": nestingLevel > 0,
"tn-action": props?.hasAction}
], props.className)}
style={"--tn-card-section-nesting-level: " + nestingLevel}
onClick={() => {props.onAction?.()}}>
{props.children}
</section>
{props?.childrenVisible &&