ente/src/components/FavButton.tsx

25 lines
16 KiB
TypeScript
Raw Normal View History

2021-01-15 11:11:24 +00:00
import React from "react";
import styled from "styled-components";
const HeartUI = styled.button.attrs(props => ({
className: props.className,
}))`
width: 100px;
height: 100px;
float:right;
background: url("data:image/png;base64,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
cursor: pointer;
${({ isClick }) => isClick && `background-position: -2799px 2px;transition: background 1s steps(28);`}
`;
const SVGcontainer = styled.div`
position:relative;
`;
export default function FavButton({ isClick, onClick }) {
return (
<SVGcontainer>
<HeartUI isClick={isClick} onClick={onClick} />
</SVGcontainer>
);
}