113 lines
3.5 KiB
TypeScript
113 lines
3.5 KiB
TypeScript
import React, { FC } from "react";
|
|
import styled, { css } from "styled-components";
|
|
import CSS from "csstype";
|
|
|
|
type IconNames = "copy" | "download" | "fileinput";
|
|
|
|
export interface IconProps {
|
|
style?: CSS.Properties;
|
|
iconName: IconNames;
|
|
onClick: () => void;
|
|
}
|
|
|
|
const Icon: FC<IconProps> = ({ style, iconName, onClick }) => {
|
|
const generateIcon = (iconName: IconNames) => {
|
|
if (iconName === "download") {
|
|
return (
|
|
<svg
|
|
width="2rem"
|
|
height="2rem"
|
|
viewBox="0 0 16 14"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
fill-rule="evenodd"
|
|
clip-rule="evenodd"
|
|
d="M15.5 6H14.5C14.2 6 14 6.2 14 6.5V12H2V6.5C2 6.2 1.8 6 1.5 6H0.5C0.2 6 0 6.2 0 6.5V13C0 13.6 0.4 14 1 14H15C15.6 14 16 13.6 16 13V6.5C16 6.2 15.8 6 15.5 6Z"
|
|
fill="white"
|
|
/>
|
|
<path
|
|
fill-rule="evenodd"
|
|
clip-rule="evenodd"
|
|
d="M7.70015 9.8C7.90015 10 8.20015 10 8.30015 9.8L10.9001 6.5C11.1001 6.3 11.0001 6 10.7001 6H9.00015V0.5C9.00015 0.2 8.80015 0 8.50015 0H7.50015C7.20015 0 7.00015 0.2 7.00015 0.5V6H5.30015C5.00015 6 4.90015 6.3 5.10015 6.5L7.70015 9.8Z"
|
|
fill="white"
|
|
/>
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
if (iconName === "copy") {
|
|
return (
|
|
<svg
|
|
width="2rem"
|
|
height="2rem"
|
|
viewBox="0 0 14 16"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
fill-rule="evenodd"
|
|
clip-rule="evenodd"
|
|
d="M13.6 3.6L10.3 0.3C10.2 0.2 9.8 0 9.5 0H1C0.4 0 0 0.4 0 1V15C0 15.6 0.4 16 1 16H13C13.6 16 14 15.6 14 15V4.5C14 4.2 13.8 3.8 13.6 3.6ZM12 14H2V2H8V5.5C8 5.8 8.2 6 8.5 6H12V14Z"
|
|
fill="#091132"
|
|
/>
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
if (iconName === "fileinput") {
|
|
return (
|
|
<svg
|
|
width="2rem"
|
|
height="2rem"
|
|
viewBox="0 0 17 16"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<g clip-path="url(#clip0)">
|
|
<path
|
|
d="M5.3 15.6C4 15.6 2.6 15 1.6 14C0.6 13 0 11.6 0 10.2C0 8.79998 0.6 7.39998 1.6 6.39998L6.9 1.09998C8.4 -0.400024 10.8 -0.400024 12.3 1.09998C13.8 2.59998 13.8 4.99998 12.3 6.49998L7 11.9C6.1 12.8 4.6 12.8 3.7 11.9C2.8 11 2.8 9.49998 3.7 8.59998L9 3.19998C9.3 2.89998 9.9 2.89998 10.2 3.19998C10.5 3.49998 10.5 4.09998 10.2 4.39998L4.9 9.79998C4.6 10.1 4.6 10.5 4.9 10.7C5.2 11 5.6 11 5.8 10.7L11.1 5.39998C11.9 4.59998 11.9 3.19998 11.1 2.39998C10.3 1.59998 8.9 1.59998 8.1 2.39998L2.8 7.59998C2.1 8.29998 1.7 9.19998 1.7 10.2C1.7 11.2 2.1 12.1 2.8 12.8C4.2 14.2 6.5 14.2 8 12.8L15.4 5.39998C15.7 5.09998 16.3 5.09998 16.6 5.39998C16.9 5.69998 16.9 6.29998 16.6 6.59998L8.8 14.4C7.8 15.2 6.6 15.6 5.3 15.6Z"
|
|
fill="#091132"
|
|
/>
|
|
</g>
|
|
<defs>
|
|
<clipPath id="clip0">
|
|
<rect width="16.8" height="15.6" fill="white" />
|
|
</clipPath>
|
|
</defs>
|
|
</svg>
|
|
);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<StyledSpan iconName={iconName} onClick={onClick}>
|
|
{generateIcon(iconName)}
|
|
</StyledSpan>
|
|
);
|
|
};
|
|
|
|
export default Icon;
|
|
|
|
const StyledSpan = styled.span<IconProps>`
|
|
position: absolute;
|
|
top: calc(50% - 1rem);
|
|
right: 1.5rem;
|
|
z-index: 100;
|
|
|
|
width: 3rem;
|
|
height: 3rem;
|
|
font-size: 1.6rem;
|
|
|
|
cursor: pointer;
|
|
|
|
color: black;
|
|
|
|
${(props) =>
|
|
props.iconName === "download" &&
|
|
css`
|
|
color: white;
|
|
`}
|
|
`;
|