51 lines
1.4 KiB
TypeScript
51 lines
1.4 KiB
TypeScript
import { ArrowIcon } from "@/components/shared/icons/ArrowIcon";
|
|
import styles from "./CardShared.module.css";
|
|
|
|
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={`tenext-subheading font-sora ${subtitleClassName}`}>
|
|
{subtitle}
|
|
</div>
|
|
)}
|
|
<h4
|
|
className={`font-dm-sans text-[30px] font-medium leading-[1.16666em] tracking-[-0.03em] ${titleClassName}`}
|
|
>
|
|
{title}
|
|
</h4>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function IconButton({ className = "" }: { className?: string }) {
|
|
return (
|
|
<div className={`${styles.iconWrapper} ${className}`}>
|
|
<a
|
|
href="#"
|
|
className={`${styles.iconSlideAslant} flex h-[52px] w-[52px] items-center justify-center rounded-[15px] bg-tenext-card-dark text-white transition-all duration-300 hover:bg-tenext-teal hover:text-tenext-dark`}
|
|
aria-label="Open details"
|
|
>
|
|
<span className={styles.iconSlideAslantInner} aria-hidden="true">
|
|
<ArrowIcon className="h-3 w-3" />
|
|
<ArrowIcon className="h-3 w-3" />
|
|
</span>
|
|
</a>
|
|
</div>
|
|
);
|
|
}
|