2022-08-28 20:12:09 +02:00
|
|
|
import { ArrowRight } from 'iconoir-react';
|
|
|
|
import styled from 'styled-components';
|
|
|
|
import {
|
|
|
|
DonateButton,
|
|
|
|
DonateContainer,
|
|
|
|
DonateHeader,
|
|
|
|
DonateRight,
|
|
|
|
} from '../pages/support';
|
2023-01-11 19:08:14 +01:00
|
|
|
import { GITHUB_TREE_PREFIX } from '../lib/constants';
|
2022-08-28 20:12:09 +02:00
|
|
|
import { Text18 } from './Typography';
|
|
|
|
|
|
|
|
export interface ReadOnGitHubProps {
|
|
|
|
path: string;
|
2023-01-11 19:08:14 +01:00
|
|
|
resource?: string;
|
2022-08-28 20:12:09 +02:00
|
|
|
}
|
2023-01-11 19:08:14 +01:00
|
|
|
export function ReadOnGitHub({
|
|
|
|
path,
|
|
|
|
resource = 'our documentation',
|
|
|
|
}: ReadOnGitHubProps) {
|
2022-08-28 20:12:09 +02:00
|
|
|
return (
|
|
|
|
<DonateContainer style={{ marginTop: 88 }}>
|
|
|
|
<div>
|
|
|
|
<DonateHeader>Read it on GitHub</DonateHeader>
|
|
|
|
<Text18>
|
2023-01-11 19:08:14 +01:00
|
|
|
If you prefer, you can take a look at {resource} on our GitHub
|
2022-08-28 20:12:09 +02:00
|
|
|
repository.
|
|
|
|
</Text18>
|
|
|
|
</div>
|
|
|
|
<DonateRight>
|
|
|
|
<a
|
2023-01-11 19:08:14 +01:00
|
|
|
href={`${GITHUB_TREE_PREFIX}/${
|
|
|
|
path.startsWith('/') ? path.slice(1) : path
|
|
|
|
}`}
|
2022-08-28 20:12:09 +02:00
|
|
|
target={'_blank'}
|
|
|
|
rel={'noreferrer'}
|
|
|
|
>
|
|
|
|
<DonateIconButton>
|
|
|
|
<ArrowRight />
|
|
|
|
</DonateIconButton>
|
|
|
|
</a>
|
|
|
|
</DonateRight>
|
|
|
|
</DonateContainer>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
export const DonateIconButton = styled(DonateButton)`
|
|
|
|
border-radius: 50%;
|
|
|
|
width: 50px;
|
|
|
|
height: 50px;
|
|
|
|
padding: 0;
|
|
|
|
justify-content: center;
|
|
|
|
&::after {
|
|
|
|
border-radius: 50%;
|
|
|
|
}
|
|
|
|
`;
|