Merge pull request #738 from UTDNebula/transfer-num-credits

Show number of transfer credits taken in pill

src/components/planner/TransferBank.tsx

@@ -1,4 +1,4 @@
-import { FC, useRef } from 'react';
+import { FC, useRef, useState } from 'react';
 
 import ChevronIcon from '@/icons/ChevronIcon';
 import useAccordionAnimation from '@/shared/useAccordionAnimation';
@@ -26,6 +26,15 @@ const TransferBank: FC<TransferBankProps> = ({ transferCredits }) => {
           onClick={toggle}
         />
       </article>
+      <div className="mt-2 flex">
+        <div className="flex items-center gap-x-3 rounded-full bg-primary-100 px-2 py-1">
+          <span className="whitespace-nowrap text-[11px] font-medium text-primary-500 lg:text-sm">
+            {/*Assumes the second digit in the second word in each course code is the number of credits it provides*/}
+            {transferCredits.reduce((acc, curr) => acc + parseInt(curr.split(' ')[1][1]), 0)}{' '}
+            Credits Taken
+          </span>
+        </div>
+      </div>
       <ol
         className={`mt-4 flex flex-wrap gap-x-10 gap-y-3 transition-all duration-1000 ease-in-out`}
       >