import React from "react"; import styled from "styled-components"; import { CopyToClipboard } from "react-copy-to-clipboard"; const mappings = { POST: { color: "#78b993", background: "#0e1712", border: "#193123", }, GET: { color: "#7979d4", background: "#212133", border: "#47476b", }, }; const HeaderWrapper = styled.div` border: 1px solid ${(props) => mappings[props.method].border}; background: ${(props) => mappings[props.method].background}; border-radius: 4px; display: flex; align-items: center; flex-flow: row wrap; justify-content: space-between; height: 100%; margin-bottom: 24px; `; const MethodName = styled.h2` color: ${(props) => mappings[props.method].color}; font-weight: 700; font-size: 14px; margin: 0 10px 0 0; `; const EndpointUrl = styled.span``; const CopyButton = styled.button` color: ${(props) => mappings[props.method].color}; background: inherit; font-size: 14px; border: none; cursor: pointer; height: 45px; align-items: center; font-weight: 500; padding: 0 10px; &:hover { filter: brightness(0.6); } `; const Header = styled.span` padding: 10px 15px; display: flex; align-items: center; `; export default function HTTPHeader({ type, path }) { const [copied, setCopy] = React.useState(false); React.useEffect(() => { if (copied) { setTimeout(() => setCopy(false), 3000); } }, [copied]); const BASE_URL = "https://top.gg/api/"; const fullUrl = new URL(path, BASE_URL).href; const url = path; return ( <HeaderWrapper method={type}> <Header> <MethodName method={type}>{type}</MethodName> <EndpointUrl dangerouslySetInnerHTML={{ __html: url.replace(/:[a-z_]+/g, "<b>$&</b>"), }} /> </Header> <CopyToClipboard text={fullUrl} onCopy={() => setCopy(true)}> <CopyButton method={type}>{copied ? "Copied!" : "Copy URL"}</CopyButton> </CopyToClipboard> </HeaderWrapper> ); }