refactor: update Spinner component to accept size prop

This commit updates the `Spinner` component to accept a `size` prop that determines the width of the spinner

components/ui/Spinner.tsx

@@ -1,8 +1,22 @@
-const Spinner = () => (
+import { FC } from 'react';
+
+interface SpinnerProps {
+  size?: 'xs' | 'sm' | 'md' | 'lg';
+}
+
+const Spinner: FC<SpinnerProps> = ({ size = 'md' }) => {
+  const spinnerWidths: Record<NonNullable<SpinnerProps['size']>, `w-[${number}px]`> = {
+    xs: 'w-[10px]',
+    sm: 'w-[20px]',
+    md: 'w-[100px]',
+    lg: 'w-[150px]',
+  };
+
+  return (
     <div role="status" className="flex flex-col items-center justify-center rounded-3xl">
       <svg
         aria-hidden="true"
-      className="w-[100px] animate-spin fill-success text-gray-500"
+        className={`${spinnerWidths[size]} animate-spin fill-success text-gray-500`}
         viewBox="0 0 100 101"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
@@ -18,6 +32,7 @@ const Spinner = () => (
       </svg>
       <span className="sr-only">Loading...</span>
     </div>
-);
+  );
+};
 
 export default Spinner;