56 lines
1.7 KiB
TypeScript
56 lines
1.7 KiB
TypeScript
'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
|
|
headerLabel: string
|
|
headerTitle: string
|
|
backButtonLabel: string
|
|
backButtonHref: string
|
|
showSocial?: boolean
|
|
continueWithLabel?: string
|
|
}
|
|
|
|
export const CardWrapper = ({
|
|
children,
|
|
headerLabel,
|
|
headerTitle,
|
|
backButtonLabel,
|
|
backButtonHref,
|
|
showSocial,
|
|
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">
|
|
<span
|
|
className="bg-background px-2 text-muted-foreground">{continueWithLabel}</span>
|
|
</div>
|
|
</div>
|
|
<Social/>
|
|
</CardFooter>}
|
|
<CardFooter>
|
|
<BackButton label={backButtonLabel} href={backButtonHref}/>
|
|
</CardFooter>
|
|
</Card>
|
|
</Suspense>
|
|
)
|
|
} |