55 lines
1.6 KiB
TypeScript
55 lines
1.6 KiB
TypeScript
import { ReactNode } from "react";
|
|
|
|
interface IconBoxProps {
|
|
icon?: ReactNode;
|
|
title: string;
|
|
description: string;
|
|
hasBorder?: boolean;
|
|
theme?: "dark" | "light";
|
|
}
|
|
|
|
export function IconBox({ icon, title, description, hasBorder = true, theme = "dark" }: IconBoxProps) {
|
|
const isLight = theme === "light";
|
|
|
|
return (
|
|
<div className="aiero-icon-box-widget w-full">
|
|
<div className="icon-box-item flex flex-col items-start gap-[20px] sm:flex-row sm:gap-[40px]">
|
|
{icon && (
|
|
<div className="icon-container background-type-none flex h-[88px] w-[88px] shrink-0 items-center justify-center">
|
|
<span className="icon block h-full w-full">
|
|
{icon}
|
|
</span>
|
|
</div>
|
|
)}
|
|
|
|
<div
|
|
className={`content-container flex-1 pb-[30px] pt-[5px] ${
|
|
hasBorder
|
|
? isLight
|
|
? "border-b border-gray-200"
|
|
: "border-b border-aiero-card-border"
|
|
: ""
|
|
}`}
|
|
>
|
|
<h5
|
|
className={`icon-box-title mb-[15px] ${isLight ? "text-aiero-dark" : "text-white"}`}
|
|
style={{
|
|
fontFamily: "var(--font-manrope)",
|
|
fontSize: "25px",
|
|
lineHeight: 1.4,
|
|
fontWeight: 500,
|
|
}}
|
|
>
|
|
{title}
|
|
</h5>
|
|
<div className="icon-box-info">
|
|
<p className="text-[16px] leading-[1.6] text-aiero-text-muted">
|
|
{description}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|