CHORE: migrate intro component (#43784)

* migrate intro component

* Update client/src/components/Intro/index.tsx

Co-authored-by: Nicholas Carrigan (he/him) <nhcarrigan@gmail.com>

* Update client/src/components/Intro/index.tsx

Co-authored-by: Nicholas Carrigan (he/him) <nhcarrigan@gmail.com>

Co-authored-by: Nicholas Carrigan (he/him) <nhcarrigan@gmail.com>

client/src/components/Intro/index.tsx

@@ -0,0 +1,100 @@
+import React from 'react';
+import { Trans, useTranslation } from 'react-i18next';
+import { randomQuote } from '../../utils/get-words';
+import Login from '../Header/components/Login';
+import { Link, Spacer, Loader, FullWidthRow } from '../helpers';
+import CurrentChallengeLink from '../helpers/current-challenge-link';
+import IntroDescription from './components/IntroDescription';
+
+import './intro.css';
+
+interface IntroProps {
+  complete?: boolean;
+  completedChallengeCount?: number;
+  isSignedIn?: boolean;
+  name?: string;
+  pending?: boolean;
+  slug?: string;
+  username?: string;
+}
+
+const Intro = ({
+  isSignedIn,
+  name,
+  pending,
+  complete,
+  completedChallengeCount,
+  slug
+}: IntroProps): JSX.Element => {
+  const { t } = useTranslation();
+  if (pending && !complete) {
+    return (
+      <>
+        <Spacer />
+        <Loader />
+        <Spacer />
+      </>
+    );
+  } else if (isSignedIn) {
+    const { quote, author } = randomQuote();
+    return (
+      <>
+        <Spacer />
+        <h1 className='text-center '>
+          {name
+            ? `${t('learn.welcome-1', { name: name })}`
+            : `${t('learn.welcome-2')}`}
+        </h1>
+        <Spacer />
+        <FullWidthRow>
+          {completedChallengeCount && completedChallengeCount > 0 ? (
+            <CurrentChallengeLink isLargeBtn={true}>
+              {t('buttons.current-challenge')}
+            </CurrentChallengeLink>
+          ) : (
+            ''
+          )}
+        </FullWidthRow>
+        <Spacer />
+        <div className='text-center quote-partial'>
+          <blockquote className='blockquote'>
+            <span>
+              <q>{quote}</q>
+              <footer className='quote-author blockquote-footer'>
+                <cite>{author}</cite>
+              </footer>
+            </span>
+          </blockquote>
+        </div>
+        {completedChallengeCount && slug && completedChallengeCount < 15 ? (
+          <div className='intro-description'>
+            <Spacer />
+            <p>
+              <Trans i18nKey='learn.start-at-beginning'>
+                <Link to={slug} />
+              </Trans>
+            </p>
+          </div>
+        ) : (
+          ''
+        )}
+      </>
+    );
+  } else {
+    return (
+      <>
+        <Spacer />
+        <h1>{t('learn.heading')}</h1>
+        <Spacer />
+        <IntroDescription />
+        <Spacer />
+        <Login block={true}>{t('buttons.logged-out-cta-btn')}</Login>
+        <Spacer />
+      </>
+    );
+  }
+};
+
+Intro.displayName = 'Intro';
+
+export default Intro;