import { css } from "@emotion/react"; import * as React from "react"; import * as Constants from "~/common/constants"; import * as SVG from "~/common/svg"; const STYLES_VIEW_SOURCE_LINK = css` font-size: 14px; font-family: ${Constants.font.semiBold}; display: inline-block; transition: 200ms ease all; cursor: pointer; color: ${Constants.system.darkGray}; :hover { color: ${Constants.system.brand}; } :visited { color: ${Constants.system.green}; } `; export default class ViewSourceLink extends React.Component { render() { return ( <a css={STYLES_VIEW_SOURCE_LINK} href={`https://github.com/filecoin-project/slate/blob/main/pages/${ this.props.file }`} target="_blank" > <SVG.ExpandBox height="12px" style={{ marginRight: 2 }} /> View Source </a> ); } }