52 lines
1.3 KiB
TypeScript
52 lines
1.3 KiB
TypeScript
import { ArrowIcon } from "@/components/shared/icons/ArrowIcon";
|
|
|
|
interface CardHeadingProps {
|
|
title: string;
|
|
subtitle?: string;
|
|
titleClassName?: string;
|
|
subtitleClassName?: string;
|
|
wrapperClassName?: string;
|
|
}
|
|
|
|
export function CardHeading({
|
|
title,
|
|
subtitle,
|
|
titleClassName = "",
|
|
subtitleClassName = "",
|
|
wrapperClassName = "",
|
|
}: CardHeadingProps) {
|
|
return (
|
|
<div className={`mb-5 ${wrapperClassName}`}>
|
|
{subtitle && (
|
|
<div
|
|
className={`aiero-subheading ${subtitleClassName}`}
|
|
style={{ fontFamily: "var(--font-sora)" }}
|
|
>
|
|
{subtitle}
|
|
</div>
|
|
)}
|
|
<h4
|
|
className={`tracking-[-0.03em] ${titleClassName}`}
|
|
style={{
|
|
fontFamily: "var(--font-dm-sans)",
|
|
fontSize: "30px",
|
|
fontWeight: 500,
|
|
lineHeight: "1.16666em",
|
|
}}
|
|
>
|
|
{title}
|
|
</h4>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function IconButton({ className = "" }: { className?: string }) {
|
|
return (
|
|
<div className={`absolute bottom-0 right-0 icon-decoration ${className}`}>
|
|
<div className="icon-inner flex h-[52px] w-[52px] items-center justify-center rounded-tl-[30px] bg-white text-[#333333] transition-colors hover:bg-[#333333] hover:text-white">
|
|
<ArrowIcon className="h-3 w-3" />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|