added 2FA

components/auth/card-wrapper.tsx

@@ -1,10 +1,9 @@
 'use client'
+
 import { Card, CardContent, CardFooter, CardHeader } from '@/components/ui/card'
 import { Header } from '@/components/auth/header'
 import { Social } from '@/components/auth/social'
 import { BackButton } from '@/components/auth/back-button'
-import { Suspense } from 'react'
-import { Loading } from '@/components/loading'
 
 type Props = {
   children: React.ReactNode
@@ -26,31 +25,29 @@ export const CardWrapper = ({
   continueWithLabel,
 }: Props) => {
   return (
-    <Suspense fallback={<Loading/>}>
-      <Card
-        className="border-8 border-muted shadow-2xl max-w-[430px] w-full sm:min-w-[430px]">
-        <CardHeader>
-          <Header label={headerLabel} title={headerTitle}/>
-        </CardHeader>
-        <CardContent>
-          {children}
-        </CardContent>
-        {showSocial && <CardFooter className="flex-wrap">
-          <div className="relative flex-none w-[100%] mb-4" style={{ background: 'block' }}>
-            <div className="absolute inset-0 flex items-center">
-              <span className="w-full border-t"></span>
-            </div>
-            <div className="relative flex justify-center text-xs uppercase">
+    <Card
+      className="shadow-2xl max-w-[430px] w-full sm:min-w-[430px]">
+      <CardHeader>
+        <Header label={headerLabel} title={headerTitle}/>
+      </CardHeader>
+      <CardContent>
+        {children}
+      </CardContent>
+      {showSocial && <CardFooter className="flex-wrap">
+        <div className="relative flex-none w-[100%] mb-4" style={{ background: 'block' }}>
+          <div className="absolute inset-0 flex items-center">
+            <span className="w-full border-t"></span>
+          </div>
+          <div className="relative flex justify-center text-xs uppercase">
             <span
               className="bg-background px-2 text-muted-foreground">{continueWithLabel}</span>
-            </div>
           </div>
-          <Social/>
-        </CardFooter>}
-        <CardFooter>
-          <BackButton label={backButtonLabel} href={backButtonHref}/>
-        </CardFooter>
-      </Card>
-    </Suspense>
+        </div>
+        <Social/>
+      </CardFooter>}
+      <CardFooter>
+        <BackButton label={backButtonLabel} href={backButtonHref}/>
+      </CardFooter>
+    </Card>
   )
 }