55 lines
1.5 KiB
TypeScript
55 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/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>
|
|
)
|
|
} |