Show number of transfer credits taken in pill

src/components/planner/TransferBank.tsx

@@ -1,4 +1,4 @@
-import { FC, useState } from 'react';
+import React, { FC, useState } from 'react';
 
 import ChevronIcon from '@/icons/ChevronIcon';
 
@@ -21,6 +21,15 @@ const TransferBank: FC<TransferBankProps> = ({ transferCredits }) => {
           onClick={() => setOpen(!open)}
         />
       </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 overflow-hidden transition-all duration-1000 ${
           open ? 'max-h-[999px]' : 'max-h-0'