53 lines
1.5 KiB
TypeScript
53 lines
1.5 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'
|
|
|
|
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={`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">
|
|
<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>
|
|
)
|
|
} |