1import { Show } from "solid-js";2import type { JSX } from "solid-js";3import { CardIcon } from "./CardIcon";4import type { StackCardSpec } from "./types";56interface StackCardProps {7 spec: StackCardSpec;8 active: boolean;9 focused?: boolean;10 concealed?: boolean;11 celebrating?: boolean;12 top: number;13 zIndex: number;14 height: number;15 onClick: () => void;16 children: JSX.Element;17}1819export function StackCard(props: StackCardProps) {20 return (21 <article22 class={`stk-card ${props.active ? "is-active" : "is-tab"} ${props.focused ? "is-focused" : ""} ${props.concealed ? "is-concealed" : ""} ${props.celebrating ? "is-celebrating" : ""}`}23 data-settings-card-id={props.spec.id}24 data-active={props.active ? "true" : "false"}25 role={props.active || props.concealed ? undefined : "button"}26 aria-hidden={props.concealed ? "true" : undefined}27 aria-label={props.active || props.concealed ? undefined : `Open ${props.spec.title}`}28 tabIndex={props.active || props.concealed ? -1 : 0}29 onClick={() => {30 if (!props.active && !props.concealed) props.onClick();31 }}32 onKeyDown={(e) => {33 if (props.active) return;34 if (e.key === "Enter" || e.key === " ") {35 e.preventDefault();36 props.onClick();37 }38 }}39 style={{40 background: `var(${props.spec.bgVar})`,41 color: `var(${props.spec.fgVar})`,42 "--stk-card-top": `${props.top}px`,43 transform: `translateY(var(--stk-card-top))`,44 "z-index": props.zIndex,45 height: `${props.height}px`,46 }}47 >48 <div class="stk-card-top">49 <span class="stk-card-num">{props.spec.num}</span>50 <Show51 when={props.spec.onIconClick}52 fallback={<span class="stk-card-icon"><CardIcon kind={props.spec.icon} /></span>}53 >54 <button55 class="stk-card-icon stk-card-icon--btn"56 type="button"57 aria-label="Celebrate"58 onClick={(e) => { e.stopPropagation(); props.spec.onIconClick!(); }}59 >60 <CardIcon kind={props.spec.icon} />61 </button>62 </Show>63 </div>64 <h2 class="stk-card-title">{props.spec.title}</h2>65 <p class="stk-card-lede">{props.spec.lede}</p>66 <div class="stk-card-body">{props.children}</div>67 </article>68 );69}