adilallo
50 lines
2.1 KiB
TypeScript
50 lines
2.1 KiB
TypeScript
"use client";
|
||
|
||
import type { IconViewProps } from "./Icon.types";
|
||
|
||
export function IconView({
|
||
icon,
|
||
title,
|
||
description,
|
||
className,
|
||
interactive,
|
||
layoutTitleId,
|
||
onClick,
|
||
onKeyDown,
|
||
}: IconViewProps) {
|
||
const interactionClass = interactive
|
||
? "cursor-pointer transition-all duration-200 hover:scale-[1.02] hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-content-default-brand-primary)] focus:ring-offset-2"
|
||
: "cursor-default";
|
||
|
||
return (
|
||
<div
|
||
data-figma-node="22084-859659"
|
||
className={`relative flex h-[350px] w-full min-w-[240px] max-w-[480px] flex-col items-start justify-between border border-solid border-[var(--color-border-default-secondary)] bg-transparent p-[var(--measures-spacing-020)] ${interactionClass} ${className}`}
|
||
tabIndex={interactive ? 0 : undefined}
|
||
role={interactive ? "button" : "article"}
|
||
aria-label={interactive ? `${title}: ${description}` : undefined}
|
||
aria-labelledby={interactive ? undefined : layoutTitleId}
|
||
onClick={interactive ? onClick : undefined}
|
||
onKeyDown={interactive ? onKeyDown : undefined}
|
||
>
|
||
{/* Icon */}
|
||
<div className="flex h-9 w-9 shrink-0 items-center justify-center">
|
||
{icon}
|
||
</div>
|
||
|
||
{/* Title — Figma XX Large / Label (32 / 36) */}
|
||
<h3
|
||
id={interactive ? undefined : layoutTitleId}
|
||
className="w-full text-left font-inter text-[32px] font-normal leading-[36px] text-[var(--color-content-default-primary)]"
|
||
>
|
||
{title}
|
||
</h3>
|
||
|
||
{/* Body: X Small / Paragraph (12/16) per Figma; 14/20 on md–<lg only (Section 22084-859062) */}
|
||
<p className="w-full text-left font-inter font-normal text-[length:var(--text-x-small-paragraph)] leading-[length:var(--text-x-small-paragraph--line-height)] text-[var(--color-content-default-primary)] md:text-[length:var(--text-small-paragraph)] md:leading-[length:var(--text-small-paragraph--line-height)] lg:text-[length:var(--text-x-small-paragraph)] lg:leading-[length:var(--text-x-small-paragraph--line-height)]">
|
||
{description}
|
||
</p>
|
||
</div>
|
||
);
|
||
}
|