packages/components/containers/onboarding/OnboardingSetDisplayName.tsx

   1 import { c } from 'ttag';
   2
   3 import InputFieldTwo from '@proton/components/components/v2/field/InputField';
   4 import onboardingDisplayName from '@proton/styles/assets/img/onboarding/display-name.svg';
   5
   6 import type { Props as OnboardingContentProps } from './OnboardingContent';
   7 import OnboardingContent from './OnboardingContent';
   8
   9 interface Props extends Omit<OnboardingContentProps, 'img' | 'text' | 'description'> {
  10     displayName: string;
  11     setDisplayName: (displayName: string) => void;
  12     displayNameError?: string;
  13 }
  14
  15 const OnboardingSetDisplayName = ({ displayName, setDisplayName, displayNameError, ...rest }: Props) => {
  16     return (
  17         <OnboardingContent
  18             description={c('Onboarding Proton')
  19                 .t`This is what people will see when you send them an email, invite them to an event, or share a file with them.`}
  20             img={<img src={onboardingDisplayName} alt={c('Onboarding Proton').t`Choose a display name`} />}
  21             title={c('Onboarding Proton').t`Choose a display name`}
  22             {...rest}
  23         >
  24             <InputFieldTwo
  25                 id="displayName"
  26                 label={c('Label').t`Display name`}
  27                 autoFocus
  28                 placeholder={c('Placeholder').t`e.g. Julia Smith`}
  29                 value={displayName}
  30                 onValue={setDisplayName}
  31                 error={displayNameError}
  32             />
  33         </OnboardingContent>
  34     );
  35 };
  36
  37 export default OnboardingSetDisplayName;