File size: 2,044 Bytes
5f40163 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 | import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "#/utils/utils";
const helpLinkVariants = cva("", {
variants: {
size: {
default: "text-xs",
settings: "text-sm text-[var(--oh-muted)] font-normal leading-5.5",
},
linkColor: {
default: "",
white: "text-white",
},
},
defaultVariants: {
size: "default",
linkColor: "default",
},
});
interface HelpLinkProps extends VariantProps<typeof helpLinkVariants> {
testId: string;
text: string;
linkText: string;
href: string;
suffix?: string;
/** Optional second link rendered after the suffix. */
suffixLinkText?: string;
suffixLinkHref?: string;
/** Trailing text rendered after the second link (e.g. a period). */
trailing?: string;
className?: string;
linkTextClassName?: string;
suffixClassName?: string;
}
export function HelpLink({
testId,
text,
linkText,
href,
suffix,
suffixLinkText,
suffixLinkHref,
trailing,
size,
linkColor,
className,
linkTextClassName,
suffixClassName,
}: HelpLinkProps) {
return (
<p
data-testid={testId}
className={cn(helpLinkVariants({ size }), className)}
>
{text}{" "}
<a
href={href}
rel="noreferrer noopener"
target="_blank"
className={cn(
"underline underline-offset-2",
helpLinkVariants({ size, linkColor }),
linkTextClassName,
)}
>
{linkText}
</a>
{suffix && <span className={suffixClassName}>{suffix}</span>}
{suffixLinkText && suffixLinkHref ? (
<>
{" "}
<a
href={suffixLinkHref}
rel="noreferrer noopener"
target="_blank"
className={cn(
"underline underline-offset-2",
helpLinkVariants({ size, linkColor }),
linkTextClassName,
)}
>
{suffixLinkText}
</a>
{trailing}
</>
) : null}
</p>
);
}
|