feat(client): ts-migrate client/src/components/helpers/** (#42593)

* refactor(client): convert toggle-button to TypeScript

* chore: rename Space to tsx

* refactor(client): convert space to TypeScript

* chore: rename SlimWidthRow to tsx

* refactor(client): slim-width-row to TypeScript

* chore: rename SkeletonSprite to ts

* fix: fixed typos and resolved paths

* chore: resolve path inconsistencies

* refactor(client): skelton-sprite to TypeScript

* chore: rename loader.test to tsx

* chore: add types for react-spinkit

* refactor(client): loader to TypeScript

* refactor(client): link to TypeScript

* refactor(client): image-loader to TypeScript

* refactor(client): full-width-row to TypeScript

* refactor(client): current-challenge-link to TypeScript

* refactor(client): button to TypeScript

* refactor(client): border-color-picker to TypeScript

* refactor(client): avatar-renderer to TypeScript

* chore: changed loadertest(snap) to ts

* chore: optional types added and cleaned files

* fix: args are now optional

* push small updates for Spacer component merge

* update snapshot

* remove type defs from deps

* Revert "remove type defs from deps"

This reverts commit 9f58bf3554.

* correctly remove client type deps

* final push to remove from deps

Co-authored-by: Shaun Hamilton <shauhami020@gmail.com>

client/src/components/helpers/avatar-renderer.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { Image } from '@freecodecamp/react-bootstrap';
+import DefaultAvatar from '../../assets/icons/DefaultAvatar';
+import { defaultUserImage } from '../../../../config/misc';
+import { borderColorPicker } from '.';
+import { useTranslation } from 'react-i18next';
+
+interface AvatarRendererProps {
+  isDonating?: boolean;
+  isTopContributor?: boolean;
+  picture: string;
+  userName: string;
+}
+
+function AvatarRenderer({
+  picture,
+  userName,
+  isDonating,
+  isTopContributor
+}: AvatarRendererProps): JSX.Element {
+  const { t } = useTranslation();
+  const borderColor: string = borderColorPicker(isDonating, isTopContributor);
+  const isPlaceHolderImage =
+    /example.com|identicon.org/.test(picture) || picture === defaultUserImage;
+
+  return (
+    <div className={`avatar-container ${borderColor}`}>
+      {isPlaceHolderImage ? (
+        <DefaultAvatar className='avatar default-avatar' />
+      ) : (
+        <Image
+          alt={t('profile.avatar', { username: userName })}
+          className='avatar'
+          responsive={true}
+          src={picture}
+        />
+      )}
+    </div>
+  );
+}
+
+AvatarRenderer.displayName = 'AvatarRenderer';
+export default AvatarRenderer;