adilallo
42 lines
1.0 KiB
TypeScript
42 lines
1.0 KiB
TypeScript
"use client";
|
|
|
|
import { memo, useId } from "react";
|
|
import { IconView } from "./Icon.view";
|
|
import type { IconProps } from "./Icon.types";
|
|
|
|
const IconContainer = memo<IconProps>(
|
|
({ icon, title, description, className = "", onClick, interactive: interactiveProp = true }) => {
|
|
const layoutTitleId = useId();
|
|
|
|
const handleClick = () => {
|
|
if (!interactiveProp) return;
|
|
if (onClick) onClick();
|
|
};
|
|
|
|
const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
|
|
if (!interactiveProp) return;
|
|
if (event.key === "Enter" || event.key === " ") {
|
|
event.preventDefault();
|
|
handleClick();
|
|
}
|
|
};
|
|
|
|
return (
|
|
<IconView
|
|
icon={icon}
|
|
title={title}
|
|
description={description}
|
|
className={className}
|
|
interactive={interactiveProp}
|
|
layoutTitleId={layoutTitleId}
|
|
onClick={handleClick}
|
|
onKeyDown={handleKeyDown}
|
|
/>
|
|
);
|
|
},
|
|
);
|
|
|
|
IconContainer.displayName = "Icon";
|
|
|
|
export default IconContainer;
|