update Fav button to fav icon
This commit is contained in:
parent
c963d5f014
commit
ae1e532446
|
@ -1,23 +0,0 @@
|
|||
import React from 'react';
|
||||
import { styled } from '@mui/material';
|
||||
const HeartUI = styled('button')<{
|
||||
isClick: boolean;
|
||||
size: number;
|
||||
}>`
|
||||
width: ${(props) => props.size}px;
|
||||
height: ${(props) => props.size}px;
|
||||
float: right;
|
||||
background: url('/fav-button.png') no-repeat;
|
||||
cursor: pointer;
|
||||
background-size: cover;
|
||||
border: none;
|
||||
${({ isClick, size }) =>
|
||||
isClick &&
|
||||
`background-position: -${
|
||||
28 * size
|
||||
}px;transition: background 1s steps(28);`}
|
||||
`;
|
||||
|
||||
export default function FavButton({ isClick, onClick, size }) {
|
||||
return <HeartUI isClick={isClick} onClick={onClick} size={size} />;
|
||||
}
|
30
src/components/icons/FavIcon.tsx
Normal file
30
src/components/icons/FavIcon.tsx
Normal file
|
@ -0,0 +1,30 @@
|
|||
import React from 'react';
|
||||
import { styled } from '@mui/material';
|
||||
const HeartUI = styled('div')<{
|
||||
isActive: boolean;
|
||||
size: number;
|
||||
}>(
|
||||
({ isActive, size }) => `
|
||||
width: ${size}px;
|
||||
height: ${size}px;
|
||||
float: right;
|
||||
background: url('/fav-button.png') no-repeat;
|
||||
cursor: pointer;
|
||||
background-size: cover;
|
||||
border: none;
|
||||
${
|
||||
isActive &&
|
||||
`background-position: -${
|
||||
size * 44
|
||||
}px;transition: background 1s steps(28);`
|
||||
}
|
||||
`
|
||||
);
|
||||
|
||||
export default function FavIcon({ isActive, size }) {
|
||||
return <HeartUI isActive={isActive} size={size} />;
|
||||
}
|
||||
|
||||
FavIcon.defaultProps = {
|
||||
size: 44,
|
||||
};
|
Loading…
Reference in a new issue