Roadmap to becoming a developer in 2022
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

53 lines
1.1 KiB

import React from 'react';
import { Link, Text, Badge } from '@chakra-ui/react';
type BadgeLinkType = {
target: string;
badgeText: string;
href: string;
colorScheme?: string;
children: React.ReactNode;
};
export function BadgeLink(props: BadgeLinkType) {
const {
target = '_blank',
colorScheme = 'purple',
badgeText,
href,
children,
} = props;
// Is external URL or is a media URL
const isExternalUrl = /(^http(s)?:\/\/)|(\.(png|svg|jpeg|jpg)$)/.test(
props.href
);
const linkProps: Record<string, string> = {
...(isExternalUrl
? {
rel: 'nofollow',
}
: {}),
};
return (
<Text mb={'0px'}>
<Link
fontSize="14px"
color="blue.700"
fontWeight={500}
textDecoration="none"
href={href}
target={target}
_hover={{ textDecoration: 'none', color: 'purple.400' }}
{...linkProps}
>
<Badge fontSize="11px" mr="7px" colorScheme={colorScheme}>
{badgeText}
</Badge>
{children}
</Link>
</Text>
);
}