refactor: organized component folder structure

fix: scrolling in login page

src/components/buttons/icon-button.tsx

@@ -0,0 +1,20 @@
+import { Button } from '@/components/ui/button';
+
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+export function IconButton({
+  icon,
+  children,
+  ...props
+}: {
+  icon: IconProp;
+  children: React.ReactNode;
+} & React.ComponentProps<typeof Button>) {
+  return (
+    <Button type='button' variant='secondary' {...props}>
+      <FontAwesomeIcon icon={icon} className='mr-2' />
+      {children}
+    </Button>
+  );
+}

src/components/buttons/redirect-button.tsx

@@ -0,0 +1,16 @@
+import { Button } from '../ui/button';
+import Link from 'next/link';
+
+export function RedirectButton({
+  redirectUrl,
+  buttonText,
+}: {
+  redirectUrl: string;
+  buttonText: string;
+}) {
+  return (
+    <Link href={redirectUrl}>
+      <Button>{buttonText}</Button>
+    </Link>
+  );
+}

src/components/buttons/sso-login-button.tsx

@@ -0,0 +1,30 @@
+import { signIn } from '@/auth';
+import { IconButton } from '@/components/buttons/icon-button';
+import { faOpenid } from '@fortawesome/free-brands-svg-icons';
+
+export default function SSOLogin({
+  provider,
+  providerDisplayName,
+}: {
+  provider: string;
+  providerDisplayName: string;
+}) {
+  return (
+    <form
+      className='flex flex-col items-center w-full'
+      action={async () => {
+        'use server';
+        await signIn(provider);
+      }}
+    >
+      <IconButton
+        className='w-full'
+        type='submit'
+        variant='secondary'
+        icon={faOpenid}
+      >
+        Login with {providerDisplayName}
+      </IconButton>
+    </form>
+  );
+}