<commit_before>import { c } from 'ttag';
import { Spotlight, SettingsLink } from '@proton/components';
import { APPS, PLANS, PLAN_NAMES } from '@proton/shared/lib/constants';
import starImg from '@proton/styles/assets/img/illustrations/spotlight-stars.svg';

interface Props {
    children: React.ReactElement;
    anchorRef: React.RefObject<HTMLElement>;
    show: boolean;
    onDisplayed: () => void;
    onClose: () => void;
}

const ReferralSpotlight = ({ children, show, onDisplayed, anchorRef }: Props) => {
    const planName = PLAN_NAMES[PLANS.MAIL];

    return (
        <Spotlight
            show={show}
            onDisplayed={onDisplayed}
            style={{ maxWidth: '25rem' }}
            content={
                <>
                    <div className="flex flex-nowrap mt0-5 mb0-5">
                        <div className="flex-item-noshrink mr1">
                            <img src={starImg} alt="star" className="w4e" />
                        </div>
                        <div>
                            <p className="mt0 mb0-5 text-bold">{c('Spotlight').t`Invite friends and earn rewards!`}</p><commit_msg>Fix some react type imports<commit_after>import { c } from 'ttag';
import { ReactElement, RefObject } from 'react';
import { Spotlight, SettingsLink } from '@proton/components';
import { APPS, PLANS, PLAN_NAMES } from '@proton/shared/lib/constants';
import starImg from '@proton/styles/assets/img/illustrations/spotlight-stars.svg';

interface Props {
    children: ReactElement;
    anchorRef: RefObject<HTMLElement>;
    show: boolean;
    onDisplayed: () => void;
    onClose: () => void;
}

const ReferralSpotlight = ({ children, show, onDisplayed, anchorRef }: Props) => {
    const planName = PLAN_NAMES[PLANS.MAIL];

    return (
        <Spotlight
            show={show}
            onDisplayed={onDisplayed}
            style={{ maxWidth: '25rem' }}
            content={
                <>
                    <div className="flex flex-nowrap mt0-5 mb0-5">
                        <div className="flex-item-noshrink mr1">
                            <img src={starImg} alt="star" className="w4e" />
                        </div>
                        <div>
                            <p className="mt0 mb0-5 text-bold">{c('Spotlight').t`Invite friends and earn rewards!`}</p>
{'fraction_non_alphanumeric': 0.13138686131386862, 'fraction_numerical': 0.009446114212108201, 'mean_word_length': 2.123324396782842, 'pattern_counts': {'":': 0, '<': 23, '<?xml version=': 0, '>': 27, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5830237', 'n_tokens_mistral': 705, 'n_tokens_neox': 685, 'n_words': 150}