adilallo
39 lines
1.3 KiB
TypeScript
39 lines
1.3 KiB
TypeScript
"use client";
|
|
|
|
import type { IconViewProps } from "./Icon.types";
|
|
|
|
export function IconView({
|
|
icon,
|
|
title,
|
|
description,
|
|
className,
|
|
onClick,
|
|
onKeyDown,
|
|
}: IconViewProps) {
|
|
return (
|
|
<div
|
|
className={`border border-[var(--color-border-default-primary)] flex flex-col h-[350px] items-start justify-between p-[var(--measures-spacing-020)] relative w-[288px] bg-transparent 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 ${className}`}
|
|
tabIndex={0}
|
|
role="button"
|
|
aria-label={`${title}: ${description}`}
|
|
onClick={onClick}
|
|
onKeyDown={onKeyDown}
|
|
>
|
|
{/* Icon */}
|
|
<div className="shrink-0 w-[36px] h-[36px] flex items-center justify-center">
|
|
{icon}
|
|
</div>
|
|
|
|
{/* Title - Centered with auto space above and below */}
|
|
<h3 className="font-inter font-normal text-[32px] leading-[36px] text-[var(--color-content-default-primary)] w-full">
|
|
{title}
|
|
</h3>
|
|
|
|
{/* Description */}
|
|
<p className="font-inter font-medium text-[10px] leading-[14px] uppercase text-[var(--color-content-default-primary)] w-full">
|
|
{description}
|
|
</p>
|
|
</div>
|
|
);
|
|
}
|