polygon-hover.tsx

polygon-hover.tsx

import styled from "styled-components"

const primaryColor = "#966ae0"
const secondaryColor = "#F6F6F6"

const PolygonLogo = () => 
  <PolygonSVG x="0px" y="0px" viewBox="0 0 38.4 33.5" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M29,10.2c-0.7-0.4-1.6-0.4-2.4,0L21,13.5l-3.8,2.1l-5.5,3.3c-0.7,0.4-1.6,0.4-2.4,0L5,16.3
    c-0.7-0.4-1.2-1.2-1.2-2.1v-5c0-0.8,0.4-1.6,1.2-2.1l4.3-2.5c0.7-0.4,1.6-0.4,2.4,0L16,7.2c0.7,0.4,1.2,1.2,1.2,2.1v3.3l3.8-2.2V7
    c0-0.8-0.4-1.6-1.2-2.1l-8-4.7c-0.7-0.4-1.6-0.4-2.4,0L1.2,5C0.4,5.4,0,6.2,0,7v9.4c0,0.8,0.4,1.6,1.2,2.1l8.1,4.7
    c0.7,0.4,1.6,0.4,2.4,0l5.5-3.2l3.8-2.2l5.5-3.2c0.7-0.4,1.6-0.4,2.4,0l4.3,2.5c0.7,0.4,1.2,1.2,1.2,2.1v5c0,0.8-0.4,1.6-1.2,2.1
    L29,28.8c-0.7,0.4-1.6,0.4-2.4,0l-4.3-2.5c-0.7-0.4-1.2-1.2-1.2-2.1V21l-3.8,2.2v3.3c0,0.8,0.4,1.6,1.2,2.1l8.1,4.7
    c0.7,0.4,1.6,0.4,2.4,0l8.1-4.7c0.7-0.4,1.2-1.2,1.2-2.1V17c0-0.8-0.4-1.6-1.2-2.1L29,10.2z" fill="#8247E5"/>
  </PolygonSVG>

export const PolygonSVG = styled.svg`
	height: 50px;
	margin-bottom: 20px;
`;

export default function IconPolygon() {
    return (
        <ProtocolBox primary_color={primaryColor} secondary_color={secondaryColor}>
            <PolygonLogo  />
            <Label>Polygon</Label>
        </ProtocolBox>
    )
}

const ProtocolBox = styled.div<{primary_color: string; secondary_color: string }>`
	height: 170px;
	border: solid 1px #eee;
	background-color: #f8f8f8;
	border-radius: 5px;

	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	opacity: 1;

	${({ primary_color, secondary_color }) => `
		&:hover {
			border: none;
			color: ${secondary_color};
			background: ${primary_color};
			cursor: pointer;
		}
	`}

	&:hover > svg {
		path {
			fill: ${({ secondary_color }) => `${secondary_color}`};
		}
	}
`;

const Label = styled.div`
	font-size: 16px;
	font-weight: 500;
`;