mirror of
https://github.com/SomboChea/ui
synced 2024-05-13 06:51:36 +07:00
47 lines
1.2 KiB
TypeScript
47 lines
1.2 KiB
TypeScript
import React, { MouseEvent } from 'react';
|
|
import styled from '@emotion/styled';
|
|
import Favorite from '@material-ui/icons/Favorite';
|
|
|
|
import Button from '../../muiComponents/Button';
|
|
import Link from '../Link';
|
|
import { Theme } from '../../design-tokens/theme';
|
|
|
|
const StyledLink = styled(Link)<{ theme?: Theme }>(({ theme }) => ({
|
|
marginTop: theme && theme.spacing(1),
|
|
marginBottom: theme && theme.spacing(1),
|
|
textDecoration: 'none',
|
|
display: 'block',
|
|
}));
|
|
|
|
const StyledFavoriteIcon = styled(Favorite)<{ theme?: Theme }>(({ theme }) => ({
|
|
color: theme && theme.palette.orange,
|
|
}));
|
|
|
|
const StyledFundStrong = styled('strong')({
|
|
marginRight: 3,
|
|
});
|
|
|
|
interface Props {
|
|
to: string;
|
|
}
|
|
|
|
/* eslint-disable react/jsx-no-bind */
|
|
const DetailSidebarFundButton: React.FC<Props> = ({ to }) => {
|
|
const preventDefault = (event: MouseEvent<HTMLButtonElement>) => event.preventDefault();
|
|
return (
|
|
<StyledLink external={true} to={to}>
|
|
<Button
|
|
color="primary"
|
|
fullWidth={true}
|
|
onClick={preventDefault}
|
|
startIcon={<StyledFavoriteIcon />}
|
|
variant="outlined">
|
|
<StyledFundStrong>{'Fund'}</StyledFundStrong>
|
|
{'this package'}
|
|
</Button>
|
|
</StyledLink>
|
|
);
|
|
};
|
|
|
|
export default DetailSidebarFundButton;
|