2020-11-04 00:33:04 +00:00
|
|
|
/**
|
|
|
|
* External dependencies
|
|
|
|
*/
|
|
|
|
import React from '@wordpress/element';
|
|
|
|
import { external, Icon } from '@wordpress/icons';
|
|
|
|
import { Link } from '@woocommerce/components';
|
2021-01-07 23:57:09 +00:00
|
|
|
import { Text } from '@woocommerce/experimental';
|
2020-11-04 00:33:04 +00:00
|
|
|
|
|
|
|
/**
|
|
|
|
* Internal dependencies
|
|
|
|
*/
|
|
|
|
import './style.scss';
|
|
|
|
|
|
|
|
export const QuickLink = ( { icon, title, href, linkType, onClick } ) => {
|
|
|
|
const isExternal = linkType === 'external';
|
|
|
|
|
|
|
|
return (
|
|
|
|
<div className="woocommerce-quick-links__item">
|
|
|
|
<Link
|
|
|
|
onClick={ onClick }
|
|
|
|
href={ href }
|
2020-11-18 15:31:21 +00:00
|
|
|
type={ linkType }
|
2021-05-18 08:40:02 +00:00
|
|
|
target={ isExternal ? '_blank' : null }
|
2020-11-04 00:33:04 +00:00
|
|
|
className="woocommerce-quick-links__item-link"
|
|
|
|
>
|
|
|
|
<Icon
|
|
|
|
className="woocommerce-quick-links__item-link__icon"
|
|
|
|
icon={ icon }
|
|
|
|
/>
|
|
|
|
<Text
|
|
|
|
className="woocommerce-quick-links__item-link__text"
|
|
|
|
as="div"
|
|
|
|
variant="button"
|
2021-06-28 01:14:59 +00:00
|
|
|
weight="600"
|
|
|
|
size="14"
|
|
|
|
lineHeight="20px"
|
2020-11-04 00:33:04 +00:00
|
|
|
>
|
|
|
|
{ title }
|
|
|
|
</Text>
|
|
|
|
{ isExternal && <Icon icon={ external } /> }
|
|
|
|
</Link>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
};
|