158 lines
9.5 KiB
XML
158 lines
9.5 KiB
XML
import type { FC } from '../../../lib/teact/teact';
|
|
import { memo } from '../../../lib/teact/teact';
|
|
|
|
import buildClassName from '../../../util/buildClassName';
|
|
|
|
import useUniqueId from '../../../hooks/useUniqueId';
|
|
|
|
import styles from './StarIcon.module.scss';
|
|
|
|
type OwnProps = {
|
|
type?: 'gold' | 'premium' | 'regular';
|
|
size?: 'small' | 'middle' | 'big' | 'adaptive';
|
|
className?: string;
|
|
style?: string;
|
|
onClick?: VoidFunction;
|
|
};
|
|
|
|
/* eslint-disable @stylistic/max-len */
|
|
const STAR_PATH = 'M6.63869 12.1902L3.50621 14.1092C3.18049 14.3087 2.75468 14.2064 2.55515 13.8807C2.45769 13.7216 2.42864 13.5299 2.47457 13.3491L2.95948 11.4405C3.13452 10.7515 3.60599 10.1756 4.24682 9.86791L7.6642 8.22716C7.82352 8.15067 7.89067 7.95951 7.81418 7.80019C7.75223 7.67116 7.61214 7.59896 7.47111 7.62338L3.66713 8.28194C2.89387 8.41581 2.1009 8.20228 1.49941 7.69823L0.297703 6.69116C0.00493565 6.44581 -0.0335059 6.00958 0.211842 5.71682C0.33117 5.57442 0.502766 5.48602 0.687982 5.47153L4.35956 5.18419C4.61895 5.16389 4.845 4.99974 4.94458 4.75937L6.36101 1.3402C6.5072 0.987302 6.91179 0.819734 7.26469 0.965925C7.43413 1.03612 7.56876 1.17075 7.63896 1.3402L9.05539 4.75937C9.15496 4.99974 9.38101 5.16389 9.6404 5.18419L13.3322 5.47311C13.713 5.50291 13.9975 5.83578 13.9677 6.2166C13.9534 6.39979 13.8667 6.56975 13.7269 6.68896L10.9114 9.08928C10.7131 9.25826 10.6267 9.52425 10.6876 9.77748L11.5532 13.3733C11.6426 13.7447 11.414 14.1182 11.0427 14.2076C10.8642 14.2506 10.676 14.2208 10.5195 14.1249L7.36128 12.1902C7.13956 12.0544 6.8604 12.0544 6.63869 12.1902Z';
|
|
/* eslint-enable @stylistic/max-len */
|
|
|
|
const StarIcon: FC<OwnProps> = ({
|
|
type = 'regular',
|
|
size = 'small',
|
|
className,
|
|
style,
|
|
onClick,
|
|
}) => {
|
|
const randomId = useUniqueId();
|
|
const validSvgRandomId = `svg-${randomId}`; // ID must start with a letter
|
|
|
|
const renderIcon = () => {
|
|
switch (type) {
|
|
case 'gold':
|
|
return <GoldStarIcon randomId={validSvgRandomId} />;
|
|
case 'premium':
|
|
return <PremiumStarIcon randomId={validSvgRandomId} />;
|
|
default:
|
|
return <RegularStarIcon />;
|
|
}
|
|
};
|
|
|
|
return (
|
|
<i
|
|
onClick={onClick}
|
|
className={buildClassName(
|
|
'StarIcon',
|
|
styles.root,
|
|
className,
|
|
onClick && styles.clickable,
|
|
styles[size],
|
|
)}
|
|
style={style}
|
|
>
|
|
{renderIcon()}
|
|
</i>
|
|
);
|
|
};
|
|
|
|
function GoldStarIcon({ randomId }: { randomId: string }) {
|
|
const mask1Id = `${randomId}-mask1`;
|
|
const mask2Id = `${randomId}-mask2`;
|
|
const gradient1Id = `${randomId}-gradient1`;
|
|
const gradient2Id = `${randomId}-gradient2`;
|
|
const gradient3Id = `${randomId}-gradient3`;
|
|
|
|
return (
|
|
<svg className={styles.svg} width="20" height="20" viewBox="0 0 20 20" fill="none">
|
|
<g clip-path="url(#clip0_4913_7387)">
|
|
<mask id={mask1Id} style="mask-type:luminance" maskUnits="userSpaceOnUse" x="-2" y="-2" width="24" height="24">
|
|
<path d="M21.416 -1.42493H-1.08398V21.0751H21.416V-1.42493Z" fill="white" />
|
|
</mask>
|
|
<g mask={`url(#${mask1Id})`}>
|
|
<mask
|
|
id={mask2Id}
|
|
style="mask-type:luminance"
|
|
maskUnits="userSpaceOnUse"
|
|
x="-2"
|
|
y="-2"
|
|
width="24"
|
|
height="24"
|
|
>
|
|
<path d="M-1.08398 -1.42493H21.416V21.0751H-1.08398V-1.42493Z" fill="white" />
|
|
</mask>
|
|
<g mask={`url(#${mask2Id})`}>
|
|
<path d="M7.26843 6.25162L9.28943 2.22541C9.52311 1.76121 10.0884 1.5749 10.5494 1.80857C10.7294 1.90015 10.8747 2.04857 10.9662 2.23172L12.8767 6.11583C13.0314 6.43477 13.3378 6.64951 13.6883 6.69056L17.6829 7.17055C18.2261 7.23686 18.6145 7.73264 18.5513 8.27894C18.5229 8.50314 18.4218 8.71156 18.2608 8.86945L15.0998 11.9862C14.9703 12.1125 14.9103 12.2894 14.9324 12.4694L15.4598 16.6756C15.5356 17.2787 15.1093 17.8282 14.5093 17.904C14.2819 17.9324 14.0546 17.8913 13.8525 17.7808L10.5147 15.9556C10.2715 15.823 9.98099 15.8198 9.73784 15.9461L6.27687 17.7208C5.79057 17.9703 5.1969 17.7745 4.94743 17.285C4.8527 17.1019 4.82112 16.8966 4.84954 16.6945L5.12427 14.7619C5.26006 13.8177 5.84425 12.9967 6.69055 12.5641L10.5305 10.6031C10.6315 10.5526 10.6726 10.4263 10.622 10.322C10.581 10.2431 10.4957 10.1957 10.4073 10.2084L5.70847 10.8841C4.99164 10.9852 4.26535 10.7831 3.7001 10.322L2.13698 9.04629C1.69173 8.68314 1.6191 8.02 1.98225 7.57159C2.15277 7.36317 2.39592 7.22739 2.66118 7.19265L6.6716 6.67793C6.92739 6.64319 7.15159 6.4853 7.26843 6.25162Z" fill={`url(#${gradient1Id})`} />
|
|
<path d="M10.8242 2.9422C10.4168 2.85062 9.98417 3.0464 9.78839 3.43797L7.76423 7.46419C7.64739 7.69787 7.42634 7.85576 7.1674 7.89049L3.15698 8.40837C2.89804 8.44311 2.6612 8.56942 2.49384 8.76837L3.97801 9.98097C4.44537 10.3631 5.05167 10.5304 5.64849 10.4452L10.3442 9.77255C10.6221 9.73466 10.8936 9.8736 11.0168 10.1231C11.1778 10.442 11.0515 10.8336 10.7326 10.9978L9.50734 11.623L10.9031 11.4209C10.9915 11.4083 11.0799 11.4557 11.1178 11.5346C11.1715 11.6388 11.1273 11.7651 11.0263 11.8157L7.18635 13.7767C6.34006 14.2093 5.75586 15.0303 5.62007 15.9745L5.44008 17.2282C5.60428 17.3924 5.86322 17.4366 6.07796 17.326L9.53261 15.5514C9.90839 15.3587 10.3536 15.365 10.7231 15.5671L14.0609 17.3924C14.1809 17.4587 14.3199 17.4839 14.4556 17.4682C14.8093 17.4239 15.0651 17.0955 15.0209 16.7324L14.4967 12.523C14.4588 12.2072 14.5662 11.8946 14.7904 11.6736L17.9513 8.55679C18.005 8.50311 18.0461 8.43995 18.0745 8.37048L14.1841 7.90312C13.8336 7.86207 13.5304 7.64418 13.3725 7.3284L13.2209 7.01578C12.902 6.87683 12.6399 6.63052 12.482 6.31159L10.8242 2.9422Z" fill={`url(#${gradient2Id})`} />
|
|
<path d="M10.7484 1.41397C10.0663 1.06977 9.23893 1.3445 8.89789 2.02659L6.87373 6.05596C6.8232 6.15701 6.72531 6.22649 6.61478 6.23912L2.60436 6.757C2.22542 6.80437 1.87806 7.00015 1.63807 7.29699C1.12334 7.93486 1.22124 8.86958 1.85596 9.38746L3.42223 10.6664C4.08222 11.2032 4.93167 11.44 5.77165 11.32L9.09051 10.8432L6.48847 12.1727C5.51271 12.6716 4.84325 13.6126 4.68852 14.6989L4.41063 16.6315C4.36958 16.9252 4.41695 17.222 4.55273 17.4873C4.90956 18.1915 5.77481 18.4725 6.479 18.1125L9.93681 16.3378C10.0505 16.2778 10.1863 16.281 10.3 16.3441L13.6378 18.1662C13.9188 18.3209 14.2441 18.3841 14.563 18.343C15.4061 18.2357 15.9998 17.462 15.8956 16.622L15.3714 12.4126C15.3651 12.3716 15.3809 12.3274 15.4093 12.299L18.5703 9.1822C18.8008 8.95168 18.9492 8.65169 18.9871 8.32959C19.0787 7.5433 18.5229 6.82963 17.7366 6.73489L13.7388 6.25491C13.5399 6.2328 13.363 6.10649 13.2715 5.92334L11.3641 2.03606C11.2315 1.76765 11.0136 1.54976 10.7484 1.41397ZM9.68418 2.42132C9.80734 2.17501 10.1073 2.07712 10.3505 2.20027C10.4452 2.24764 10.5242 2.32974 10.5715 2.42763L12.482 6.31175C12.7031 6.76332 13.1357 7.06962 13.6346 7.12962L17.6324 7.60961C17.9324 7.64435 18.1471 7.91908 18.1124 8.22538C18.0966 8.3517 18.0398 8.46854 17.9513 8.55695L14.7904 11.6737C14.5662 11.8948 14.4588 12.2074 14.4967 12.5232L15.0209 16.7325C15.0651 17.0957 14.8093 17.4241 14.4556 17.4683C14.3199 17.4841 14.1809 17.4588 14.0609 17.3925L10.7231 15.5673C10.3536 15.3652 9.90839 15.362 9.53261 15.5547L6.0748 17.3294C5.80638 17.4652 5.47797 17.3578 5.33903 17.0862C5.2885 16.9852 5.26956 16.8683 5.28534 16.7546L5.56007 14.8252C5.67376 14.0231 6.17269 13.3253 6.88952 12.959L10.7294 10.9979C11.0515 10.8337 11.1778 10.4422 11.0168 10.1232C10.8905 9.87376 10.6221 9.73482 10.3442 9.77271L5.64534 10.4453C5.04851 10.5306 4.44537 10.3632 3.97801 9.98113L2.41489 8.70221C2.15595 8.49064 2.1149 8.10854 2.32647 7.8496C2.42436 7.72961 2.56331 7.65066 2.71488 7.63171L6.72531 7.11383C7.12951 7.06331 7.48003 6.81384 7.66318 6.45069L9.68418 2.42132Z" fill={`url(#${gradient3Id})`} />
|
|
</g>
|
|
</g>
|
|
</g>
|
|
<defs>
|
|
<linearGradient
|
|
id={gradient1Id}
|
|
x1="10.1547"
|
|
y1="1.70752"
|
|
x2="10.1547"
|
|
y2="17.9134"
|
|
gradientUnits="userSpaceOnUse"
|
|
>
|
|
<stop stop-color="#FFF0C2" />
|
|
<stop offset="1" stop-color="#FFEBBA" />
|
|
</linearGradient>
|
|
<linearGradient
|
|
id={gradient2Id}
|
|
x1="10.2842"
|
|
y1="2.92009"
|
|
x2="14.7304"
|
|
y2="17.4713"
|
|
gradientUnits="userSpaceOnUse"
|
|
>
|
|
<stop stop-color="#FFD147" />
|
|
<stop offset="1" stop-color="#FFB526" />
|
|
</linearGradient>
|
|
<linearGradient
|
|
id={gradient3Id}
|
|
x1="10.1547"
|
|
y1="1.26556"
|
|
x2="14.0546"
|
|
y2="18.3525"
|
|
gradientUnits="userSpaceOnUse"
|
|
>
|
|
<stop stop-color="#E58F0D" />
|
|
<stop offset="1" stop-color="#EB7814" />
|
|
</linearGradient>
|
|
<clipPath id="clip0_4913_7387">
|
|
<rect width="20" height="20" fill="white" />
|
|
</clipPath>
|
|
</defs>
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
function PremiumStarIcon({ randomId }: { randomId: string }) {
|
|
return (
|
|
<svg className={styles.svg} width="14" height="15" viewBox="0 0 14 15" fill="none">
|
|
<defs>
|
|
<linearGradient id={randomId} x1="3" y1="63.5001" x2="84.1475" y2="-1.32262" gradientUnits="userSpaceOnUse">
|
|
<stop stop-color="#6B93FF" />
|
|
<stop offset="0.439058" stop-color="#976FFF" />
|
|
<stop offset="1" stop-color="#E46ACE" />
|
|
</linearGradient>
|
|
</defs>
|
|
<path fill-rule="evenodd" clip-rule="evenodd" d={STAR_PATH} fill={`url(#${randomId})`} />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
function RegularStarIcon() {
|
|
return (
|
|
<svg className={styles.svg} width="14" height="15" viewBox="0 0 14 15" fill="none">
|
|
<path fill-rule="evenodd" clip-rule="evenodd" d={STAR_PATH} fill="var(--color-fill)" />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
export default memo(StarIcon);
|