gitscope
← marzneshin / nightly / dashboard/src/common/components/widgets/section-widget/index.tsx
https://dev.kronoz.win/r/marzneshin.git
dashboard/src/common/components/widgets/section-widget/index.tsx · TypeScript
Blame Raw
 1import {
 2    Card,
 3    CardContent,
 4    CardDescription,
 5    CardFooter,
 6    CardHeader,
 7    CardTitle,
 8    Separator,
 9} from '@marzneshin/common/components';
10import type { FC, PropsWithChildren } from 'react';
11
12export interface SectionWidgetProps {
13    title: any;
14    description: any;
15    content?: any;
16    footer?: any;
17    options?: any;
18    className?: string;
19}
20
21export const SectionWidget: FC<SectionWidgetProps & PropsWithChildren> = ({
22    options, footer, content, children, title, description, className
23}) => {
24    return (
25        <Card className={className}>
26            <CardHeader className="flex flex-col items-stretch space-y-0 border-b p-0 sm:flex-row">
27                <div className="flex flex-1 flex-col justify-center gap-1 px-6 py-5 sm:py-6">
28                    <CardTitle className="flex flex-row justify-start items-center gap-3 text-xl">
29                        {title}
30                    </CardTitle>
31                    <CardDescription>
32                        {description}
33                    </CardDescription>
34                </div>
35                {options &&
36                    <div className="flex items-center flex-col justify-center gap-1 px-6 py-5 sm:py-6">
37                        {options}
38                    </div>
39                }
40            </CardHeader>
41            <Separator />
42            <CardContent className="p-4 flex justify-center">
43                {content || children}
44            </CardContent>
45            {footer && <CardFooter className="flex w-full justify-center"> {footer} </CardFooter>}
46        </Card>
47    )
48}