adilallo
113 lines
3.0 KiB
TypeScript
113 lines
3.0 KiB
TypeScript
"use client";
|
|
|
|
/**
|
|
* Figma: "Card / Mini" (see registry)
|
|
*/
|
|
|
|
import { memo, useMemo } from "react";
|
|
import { useTranslation } from "../../../contexts/MessagesContext";
|
|
import MiniView from "./Mini.view";
|
|
import type { MiniProps } from "./Mini.types";
|
|
|
|
const MiniContainer = memo<MiniProps>(
|
|
({
|
|
children,
|
|
className = "",
|
|
backgroundColor = "bg-[var(--color-surface-default-brand-royal)]",
|
|
panelContent,
|
|
label,
|
|
labelLine1,
|
|
labelLine2,
|
|
onClick,
|
|
href,
|
|
ariaLabel,
|
|
featureGridShell = false,
|
|
panelWidth,
|
|
panelHeight,
|
|
panelImageClassName,
|
|
}) => {
|
|
const t = useTranslation("controlsChrome");
|
|
|
|
// Compute aria-label
|
|
const computedAriaLabel = useMemo(
|
|
() =>
|
|
ariaLabel ||
|
|
(labelLine1 && labelLine2
|
|
? `${labelLine1} ${labelLine2}`
|
|
: label || t("miniFeatureFallback")),
|
|
[ariaLabel, labelLine1, labelLine2, label, t],
|
|
);
|
|
|
|
// Determine wrapper element and props
|
|
const { wrapperElement, wrapperProps } = useMemo(() => {
|
|
const baseProps = {
|
|
"aria-label": computedAriaLabel,
|
|
};
|
|
|
|
if (href) {
|
|
return {
|
|
wrapperElement: "a" as const,
|
|
wrapperProps: {
|
|
...baseProps,
|
|
href,
|
|
className:
|
|
"block focus:outline-none focus:ring-2 focus:ring-[var(--color-surface-default-brand-royal)] focus:ring-offset-2 rounded-[var(--radius-measures-radius-xlarge)] transition-all duration-200 hover:scale-[1.02]",
|
|
tabIndex: 0,
|
|
},
|
|
};
|
|
}
|
|
|
|
if (onClick) {
|
|
return {
|
|
wrapperElement: "button" as const,
|
|
wrapperProps: {
|
|
...baseProps,
|
|
onClick,
|
|
className:
|
|
"block w-full text-left focus:outline-none focus:ring-2 focus:ring-[var(--color-surface-default-brand-royal)] focus:ring-offset-2 rounded-[var(--radius-measures-radius-xlarge)] transition-all duration-200 hover:scale-[1.02]",
|
|
tabIndex: 0,
|
|
onKeyDown: (e: React.KeyboardEvent<HTMLButtonElement>) => {
|
|
if (e.key === "Enter" || e.key === " ") {
|
|
e.preventDefault();
|
|
onClick();
|
|
}
|
|
},
|
|
},
|
|
};
|
|
}
|
|
|
|
return {
|
|
wrapperElement: "div" as const,
|
|
wrapperProps: {
|
|
...baseProps,
|
|
className: "block",
|
|
},
|
|
};
|
|
}, [href, onClick, computedAriaLabel]);
|
|
|
|
return (
|
|
<MiniView
|
|
className={className}
|
|
backgroundColor={backgroundColor}
|
|
panelContent={panelContent}
|
|
label={label}
|
|
labelLine1={labelLine1}
|
|
labelLine2={labelLine2}
|
|
computedAriaLabel={computedAriaLabel}
|
|
wrapperElement={wrapperElement}
|
|
wrapperProps={wrapperProps}
|
|
featureGridShell={featureGridShell}
|
|
panelWidth={panelWidth}
|
|
panelHeight={panelHeight}
|
|
panelImageClassName={panelImageClassName}
|
|
>
|
|
{children}
|
|
</MiniView>
|
|
);
|
|
},
|
|
);
|
|
|
|
MiniContainer.displayName = "Mini";
|
|
|
|
export default MiniContainer;
|