1import { FC, PropsWithChildren, HTMLAttributes } from 'react'
 2import {
 3    Card,
 4    CardContent,
 5    ScrollArea,
 6    CardFooter,
 7    CardHeader,
 8    CardTitle,
 9} from '@marzneshin/common/components';
10import { cn } from '@marzneshin/common/utils';
11
12interface PageProps {
13    title: JSX.Element | string;
14    content?: JSX.Element | string;
15    footer?: JSX.Element | string;
16}
17
18export const Page: FC<PageProps & PropsWithChildren & HTMLAttributes<HTMLDivElement>> = ({
19    footer,
20    content,
21    children,
22    title,
23    className
24}) => {
25    return (
26        <ScrollArea className="w-full h-full overflow-auto">
27            <div className="flex flex-col justify-center items-center h-full w-full">
28                <Card className="shadow-none sm:w-screen md:w-full border-none p-0 w-full h-full">
29                    <CardHeader className="border-none sm:flex-row">
30                        <CardTitle className="flex flex-row justify-start items-center text-2xl text-sans">
31                            {title}
32                        </CardTitle>
33                    </CardHeader>
34                    <CardContent className={cn("flex w-full max-w-full", className)}>
35                        {content || children}
36                    </CardContent>
37                    {footer && <CardFooter> {footer} </CardFooter>}
38                </Card>
39            </div>
40        </ScrollArea>
41    );
42}