89 lines
1.9 KiB
TypeScript
89 lines
1.9 KiB
TypeScript
"use client"
|
|
|
|
import { type ComponentProps } from "react"
|
|
|
|
import { variants } from "./variants"
|
|
|
|
import type { VariantProps } from "class-variance-authority"
|
|
import Link from "next/link"
|
|
import { useIntl } from "react-intl"
|
|
import { MaterialIcon } from "../Icons/MaterialIcon"
|
|
import { MaterialIconName } from "../Icons/MaterialIcon/generated"
|
|
import { Typography } from "../Typography"
|
|
|
|
export interface ButtonLinkProps
|
|
extends
|
|
Omit<ComponentProps<typeof Link>, "color">,
|
|
VariantProps<typeof variants> {
|
|
leadingIconName?: MaterialIconName | null
|
|
trailingIconName?: MaterialIconName | null
|
|
isExternal?: boolean
|
|
}
|
|
|
|
export default function ButtonLink({
|
|
variant,
|
|
color,
|
|
size,
|
|
wrapping,
|
|
fullWidth,
|
|
className,
|
|
href,
|
|
target,
|
|
isExternal,
|
|
leadingIconName,
|
|
trailingIconName,
|
|
children,
|
|
...props
|
|
}: ButtonLinkProps) {
|
|
const classNames = variants({
|
|
variant,
|
|
color,
|
|
size,
|
|
wrapping,
|
|
fullWidth,
|
|
className,
|
|
})
|
|
|
|
const intl = useIntl()
|
|
const newTabText = intl.formatMessage({
|
|
id: "common.linkOpenInNewTab",
|
|
defaultMessage: "Opens in a new tab/window",
|
|
})
|
|
|
|
const LinkComponent = isExternal ? "a" : Link
|
|
|
|
return (
|
|
<Typography
|
|
variant={
|
|
size === "sm"
|
|
? "Body/Supporting text (caption)/smBold"
|
|
: "Body/Paragraph/mdBold"
|
|
}
|
|
>
|
|
<LinkComponent
|
|
className={classNames}
|
|
href={href.toString()}
|
|
target={target}
|
|
title={target === "_blank" ? newTabText : ""}
|
|
{...props}
|
|
>
|
|
{leadingIconName ? (
|
|
<MaterialIcon
|
|
icon={leadingIconName}
|
|
color="CurrentColor"
|
|
size={size === "sm" ? 20 : 24}
|
|
/>
|
|
) : null}
|
|
{children}
|
|
{trailingIconName ? (
|
|
<MaterialIcon
|
|
icon={trailingIconName}
|
|
color="CurrentColor"
|
|
size={size === "sm" ? 20 : 24}
|
|
/>
|
|
) : null}
|
|
</LinkComponent>
|
|
</Typography>
|
|
)
|
|
}
|