Merge branch 'main' into feature/mailings

components/ui/Button.tsx

@@ -0,0 +1,17 @@
+import { useState } from 'react';
+
+export default function Button(props) {
+    const [loading, setLoading] = useState(false);
+
+    return(
+        <button type="submit" className="btn btn-primary" onClick={setLoading}>
+            {!loading && props.children}
+            {loading && 
+                <svg className="animate-spin mx-4 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                    <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                    <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                </svg>
+            }
+        </button>
+    );
+}

pages/[user]/book.tsx

@@ -12,6 +12,7 @@ import 'react-phone-number-input/style.css';
 import PhoneInput from 'react-phone-number-input';
 import { LocationType } from '../../lib/location';
 import Avatar from '../../components/Avatar';
+import Button from '../../components/ui/Button';
 
 dayjs.extend(utc);
 dayjs.extend(timezone);
@@ -146,7 +147,7 @@ export default function Book(props) {
                                     <textarea name="notes" id="notes" rows={3}  className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md" placeholder="Please share anything that will help prepare for our meeting."></textarea>
                                 </div>
                                 <div>
-                                    <button type="submit" className="btn btn-primary">Confirm</button>
+                                    <Button type="submit" className="btn btn-primary">Confirm</Button>
                                     <Link href={"/" + props.user.username + "/" + props.eventType.slug}>
                                         <a className="ml-2 btn btn-white">Cancel</a>
                                     </Link>