initial commit

components/auth/back-button.tsx

@@ -0,0 +1,22 @@
+'use client'
+
+import { Button } from '@/components/ui/button'
+import Link from 'next/link'
+
+interface BackButtonProps {
+  label: string
+  href: string
+}
+
+export const BackButton = ({ label, href }: BackButtonProps) => {
+  return (
+    <Button
+      variant="link"
+      className="w-full mt-2 text-blue-500"
+      size="sm"
+      asChild
+    >
+      <Link href={href}>{label}</Link>
+    </Button>
+  )
+}

components/auth/card-wrapper.tsx

@@ -0,0 +1,42 @@
+'use client'
+
+import { Header } from '@/components/auth/header'
+import { Social } from '@/components/auth/social'
+import { BackButton } from '@/components/auth/back-button'
+import { Card, CardFooter, CardHeader } from '@/components/ui/card'
+
+interface CardWrapperProps {
+  children: React.ReactNode
+  headerTitle: string
+  backButtonLabel: string
+  backButtonHref: string
+  showSocial?: boolean
+}
+
+export const CardWrapper = ({
+  children,
+  headerTitle,
+  backButtonLabel,
+  backButtonHref,
+  showSocial
+}: CardWrapperProps) => {
+  return (
+    <Card className="mx-auto w-full max-w-sm bg-secondary/90 border border-foreground/5 rounded-lg px-7">
+      <CardHeader>
+        <Header title={headerTitle} />
+      </CardHeader>
+
+      <div>{children}</div>
+
+      {showSocial && (
+        <div>
+          <Social />
+        </div>
+      )}
+
+      <CardFooter>
+        <BackButton label={backButtonLabel} href={backButtonHref} />
+      </CardFooter>
+    </Card>
+  )
+}

components/auth/header.tsx

@@ -0,0 +1,11 @@
+interface HeaderProps {
+  title: string
+}
+
+export const Header = ({ title }: HeaderProps) => {
+  return (
+    <div className="w-full flex flex-col  items-center justify-center">
+      <h1 className="text-3xl font-bold ">{title}</h1>
+    </div>
+  )
+}

components/auth/social.tsx

@@ -0,0 +1,29 @@
+'use client'
+
+import { Button } from '@/components/ui/button'
+import { signIn } from 'next-auth/react'
+import { FaGithub, FaGoogle } from 'react-icons/fa'
+
+export const Social = () => {
+  const onClick = (provider: 'google' | 'github') => {
+    signIn(provider, {
+      callbackUrl: '/'
+    })
+  }
+  return (
+    <div className="flex gap-2 mt-3">
+      <Button
+        className="rounded-[5px] w-full border border-primary/20 bg-secondary text-primary hover:bg-primary/10 text-md"
+        onClick={() => onClick('google')}
+      >
+        <FaGoogle className="mr-2" /> Google
+      </Button>
+      <Button
+        className="rounded-[5px] w-full border border-primary/20 bg-secondary text-primary hover:bg-primary/10 text-md"
+        onClick={() => onClick('github')}
+      >
+        <FaGithub className="mr-2" /> Github
+      </Button>
+    </div>
+  )
+}