added mail service

components/auth/CardWrapper.tsx

@@ -0,0 +1,55 @@
+'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/BackButton'
+
+type Props = {
+  children: React.ReactNode
+  headerLabel: string
+  headerTitle: string
+  backButtonLabel: string
+  backButtonHref: string
+  showSocial?: boolean
+  continueWithLabel?: string
+}
+
+export const CardWrapper = ({
+  children,
+  headerLabel,
+  headerTitle,
+  backButtonLabel,
+  backButtonHref,
+  showSocial,
+  continueWithLabel,
+}: Props) => {
+  return (
+    <Card
+      className="max-w-[414px] w-[100%] shadow-md md:min-w-[414px] sm:w-full">
+      <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={{ display: '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>
+
+        {/*<Separator className="my-4"/>*/}
+        <Social/>
+      </CardFooter>}
+      <CardFooter>
+        <BackButton label={backButtonLabel} href={backButtonHref}/>
+      </CardFooter>
+    </Card>
+  )
+}