Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 | 7x 7x 1x 1x | import { ElementType } from 'react';
import styles from './ForkMe.module.css';
import { GitHub } from './Icons';
/**
* @deprecated use {@link ForkMe.Props}
*/
export type ForkMeProps = ForkMe.Props;
export function ForkMe({
icon = 'github',
slug,
backgroundColor = 'black',
color = 'white',
side = 'right',
newTab = true,
}: ForkMe.Props) {
const Icon = ForkMe.ICON_TO_COMPONENT[icon];
return (
<a
href={`https://github.com/${slug}`}
className={`${styles.forkMe} ${styles[side]}`}
style={{ fill: backgroundColor, color: color }}
target={newTab ? '_blank' : undefined}
data-testid="fork-me"
>
<Icon />
</a>
);
}
export namespace ForkMe {
export type Icon = 'github';
export const ICON_TO_COMPONENT: Record<Icon, ElementType> = {
github: GitHub,
};
export type Props = {
/**
* The Icon to display
*
* @default 'github'
*/
icon?: Icon;
/**
* The slug of your repository
*
* @example 'ribbon-studios/fork-me'
*/
slug: string;
/**
* The ribbon color
*
* @default 'black'
*/
backgroundColor?: string;
/**
* The octocat color
*
* @default 'white'
*/
color?: string;
/**
* The side you'd like the octocat to appear!
*/
side?: 'left' | 'right';
/**
* Set this to false to make it open in the current tab.
*
* @default true
*/
newTab?: boolean;
};
}
|