46 lines
1.1 KiB
TypeScript
46 lines
1.1 KiB
TypeScript
import type { FC } from '../../../../lib/teact/teact';
|
|
import React, { memo, useMemo } from '../../../../lib/teact/teact';
|
|
|
|
import { lerp } from '../../../../util/math';
|
|
|
|
import PremiumLimitsCompare from './PremiumLimitsCompare';
|
|
|
|
import styles from './PremiumLimitPreview.module.scss';
|
|
|
|
type OwnProps = {
|
|
title: string;
|
|
description: string;
|
|
leftValue?: string;
|
|
rightValue?: string;
|
|
colorStepProgress: number;
|
|
};
|
|
|
|
const COLOR_START = [91, 160, 255];
|
|
const COLOR_END = [197, 100, 243];
|
|
|
|
const PremiumLimitPreview: FC<OwnProps> = ({
|
|
title,
|
|
description,
|
|
leftValue,
|
|
rightValue,
|
|
colorStepProgress,
|
|
}) => {
|
|
const color = useMemo(() => {
|
|
return COLOR_START.map((start, i) => lerp(start, COLOR_END[i], colorStepProgress));
|
|
}, [colorStepProgress]);
|
|
|
|
return (
|
|
<div className={styles.root}>
|
|
<div className={styles.title}>{title}</div>
|
|
<div className={styles.description}>{description}</div>
|
|
<PremiumLimitsCompare
|
|
leftValue={leftValue}
|
|
rightValue={rightValue}
|
|
rightStyle={`background: rgb(${color.join(',')})`}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default memo(PremiumLimitPreview);
|