69 lines
1.9 KiB
TypeScript
69 lines
1.9 KiB
TypeScript
import React, { memo } from '../../../lib/teact/teact';
|
|
|
|
import buildClassName from '../../../util/buildClassName';
|
|
import { hexToRgb, lerpRgb } from '../../../util/switchTheme';
|
|
import renderText from '../../common/helpers/renderText';
|
|
|
|
import useLastCallback from '../../../hooks/useLastCallback';
|
|
|
|
import ListItem from '../../ui/ListItem';
|
|
|
|
import styles from './PremiumFeatureItem.module.scss';
|
|
|
|
type OwnProps<T> = {
|
|
icon: string;
|
|
isFontIcon?: boolean;
|
|
title: string;
|
|
text: string;
|
|
index: number;
|
|
count: number;
|
|
section: T;
|
|
onClick?: (section: T) => void;
|
|
};
|
|
|
|
const COLORS = [
|
|
'#F2862D', '#EB7B4D', '#E46D72', '#DD6091', '#CC5FBA', '#B464E7',
|
|
'#9873FF', '#768DFF', '#55A5FC', '#52B0C9', '#4FBC93', '#4CC663',
|
|
].map(hexToRgb);
|
|
|
|
// eslint-disable-next-line @typescript-eslint/comma-dangle
|
|
const PremiumFeatureItem = <T,>({
|
|
icon,
|
|
isFontIcon,
|
|
title,
|
|
text,
|
|
index,
|
|
count,
|
|
section,
|
|
onClick,
|
|
}: OwnProps<T>) => {
|
|
const newIndex = (index / count) * COLORS.length;
|
|
const colorA = COLORS[Math.floor(newIndex)];
|
|
const colorB = COLORS[Math.ceil(newIndex)] ?? colorA;
|
|
const { r, g, b } = lerpRgb(colorA, colorB, 0.5);
|
|
|
|
const handleClick = useLastCallback(() => {
|
|
onClick?.(section);
|
|
});
|
|
|
|
return (
|
|
<ListItem buttonClassName={styles.root} onClick={handleClick} inactive={!onClick}>
|
|
{isFontIcon ? (
|
|
<i
|
|
className={buildClassName(styles.fontIcon, `icon icon-${icon}`)}
|
|
aria-hidden
|
|
style={`--item-color: rgb(${r},${g},${b})`}
|
|
/>
|
|
) : (
|
|
<img src={icon} className={styles.icon} alt="" style={`--item-color: rgb(${r},${g},${b})`} draggable={false} />
|
|
)}
|
|
<div className={styles.text}>
|
|
<div className={styles.title}>{renderText(title, ['br'])}</div>
|
|
<div className={styles.description}>{text}</div>
|
|
</div>
|
|
</ListItem>
|
|
);
|
|
};
|
|
|
|
export default memo(PremiumFeatureItem);
|