You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
51 lines
2.5 KiB
51 lines
2.5 KiB
import styled from 'styled-components/macro'
|
|
|
|
const Svg = styled.svg`
|
|
margin-right: 0.472rem;
|
|
width: 0.95rem;
|
|
height: 0.95rem;
|
|
|
|
@media (max-width: 650px){
|
|
width: 11px;
|
|
height: 11px;
|
|
}
|
|
`
|
|
|
|
type StarProps = {
|
|
isFavorite: boolean,
|
|
}
|
|
|
|
export const StarIcon = ({ isFavorite }: StarProps) => (
|
|
<Svg width='100%' height='100%' viewBox='0 0 23 22' xmlns='http://www.w3.org/2000/svg'>
|
|
<g filter={`url(#${isFavorite ? 'filled' : 'outline'})`}>
|
|
{
|
|
isFavorite
|
|
? (
|
|
<path d='M11.3035 0.693359L14.2112 6.82911L20.9452 7.6985L16.0083 12.36L17.2624 19.033L11.3035 15.7783L5.34453 19.033L6.59861 12.36L1.66171 7.6985L8.3957 6.82911L11.3035 0.693359Z' fill='white' />
|
|
) : (
|
|
<path d='M11.3035 2.27156L13.6005 7.11855L13.7586 7.45214L14.1247 7.49941L19.4442 8.18619L15.5443 11.8686L15.2759 12.122L15.3441 12.4848L16.3347 17.7563L11.6274 15.1851L11.3035 15.0081L10.9795 15.1851L6.27218 17.7563L7.26285 12.4848L7.33103 12.122L7.06262 11.8686L3.16267 8.18619L8.48224 7.49941L8.84836 7.45214L9.00645 7.11855L11.3035 2.27156Z' stroke='white' strokeWidth='1.35172' />
|
|
)
|
|
}
|
|
</g>
|
|
<defs>
|
|
<filter id='outline' x='0.44043' y='0' width='19.119' height='18.2812' filterUnits='userSpaceOnUse' colorInterpolationFilters='sRGB'>
|
|
<feFlood floodOpacity='0' result='BackgroundImageFix' />
|
|
<feColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' />
|
|
<feOffset dy='1' />
|
|
<feGaussianBlur stdDeviation='0.5' />
|
|
<feColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0' />
|
|
<feBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow' />
|
|
<feBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow' result='shape' />
|
|
</filter>
|
|
<filter id='filled' x='0.309897' y='0.693359' width='21.9869' height='21.0431' filterUnits='userSpaceOnUse' colorInterpolationFilters='sRGB'>
|
|
<feFlood floodOpacity='0' result='BackgroundImageFix' />
|
|
<feColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' />
|
|
<feOffset dy='1.35172' />
|
|
<feGaussianBlur stdDeviation='0.675862' />
|
|
<feColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0' />
|
|
<feBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow' />
|
|
<feBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow' result='shape' />
|
|
</filter>
|
|
</defs>
|
|
</Svg>
|
|
)
|
|
|