59 lines
1.5 KiB
TypeScript
59 lines
1.5 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="tenext-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-tenext-card-border"
|
|
: ""
|
|
}`}
|
|
>
|
|
<h5
|
|
className={`icon-box-title mb-[15px] ${isLight ? "text-tenext-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-tenext-text-muted">
|
|
{description}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|