feat: change challenge desc to ts (#42270)

* feat: change challenge desc to ts

* Apply suggestions from code review

Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>

* fix: add return type on function

Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>

client/src/templates/Challenges/components/Challenge-Description.js

@@ -1,31 +0,0 @@
-import React, { Fragment } from 'react';
-import PropTypes from 'prop-types';
-
-import PrismFormatted from './PrismFormatted';
-import './challenge-description.css';
-
-const propTypes = {
-  block: PropTypes.string,
-  description: PropTypes.string,
-  instructions: PropTypes.string
-};
-
-function ChallengeDescription({ description, instructions, block }) {
-  return (
-    <div className={`challenge-instructions${block ? ' ' + block : ''}`}>
-      {description && <PrismFormatted text={description} />}
-      {instructions && (
-        <Fragment>
-          <hr />
-          <PrismFormatted text={instructions} />
-        </Fragment>
-      )}
-      <hr />
-    </div>
-  );
-}
-
-ChallengeDescription.displayName = 'ChallengeDescription';
-ChallengeDescription.propTypes = propTypes;
-
-export default ChallengeDescription;

client/src/templates/Challenges/components/Challenge-Description.tsx

@@ -0,0 +1,33 @@
+import React, { Fragment } from 'react';
+
+import PrismFormatted from './PrismFormatted';
+import './challenge-description.css';
+
+type Challenge = {
+  block: string;
+  description: string;
+  instructions: string;
+};
+
+function ChallengeDescription(challenge: Challenge): JSX.Element {
+  return (
+    <div
+      className={`challenge-instructions${
+        challenge.block ? ' ' + challenge.block : ''
+      }`}
+    >
+      {challenge.description && <PrismFormatted text={challenge.description} />}
+      {challenge.instructions && (
+        <Fragment>
+          <hr />
+          <PrismFormatted text={challenge.instructions} />
+        </Fragment>
+      )}
+      <hr />
+    </div>
+  );
+}
+
+ChallengeDescription.displayName = 'ChallengeDescription';
+
+export default ChallengeDescription;