67 lines
1.6 KiB
TypeScript
67 lines
1.6 KiB
TypeScript
import { ReactNode } from 'react';
|
|
import { useMediaQuery } from 'react-responsive';
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardFooter,
|
|
CardHeader,
|
|
CardTitle
|
|
} from '../../components/ui/card';
|
|
import Footer from './footer';
|
|
|
|
type CustomCardProps = {
|
|
title: string;
|
|
description?: string;
|
|
content: ReactNode;
|
|
style?: string;
|
|
footer?: boolean;
|
|
};
|
|
|
|
export const CustomCard = ({
|
|
title,
|
|
description,
|
|
content,
|
|
style,
|
|
footer = true
|
|
}: CustomCardProps) => {
|
|
const isMobile = useMediaQuery({ query: '(max-width: 767px)' });
|
|
|
|
if (isMobile) {
|
|
console.log(isMobile);
|
|
return (
|
|
<Card className={`max-h-[90vh] w-[90%] p-4`}>
|
|
<CardHeader className='text-center'>
|
|
<CardTitle>{title}</CardTitle>
|
|
<CardDescription>{description}</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className='max-h-[60vh] overflow-auto'>
|
|
{content}
|
|
</CardContent>
|
|
{footer && (
|
|
<CardFooter className='flex justify-center p-4'>
|
|
<Footer />
|
|
</CardFooter>
|
|
)}
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Card className={`${style ?? 'sm:w-2/3 md:w-2/5 lg:w-1/3 xl:w-1/4'} p-4`}>
|
|
<CardHeader className='text-center'>
|
|
<CardTitle>{title}</CardTitle>
|
|
<CardDescription>{description}</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className='h-[80%] flex-grow overflow-auto'>
|
|
{content}
|
|
</CardContent>
|
|
{footer && (
|
|
<CardFooter className=' flex justify-center p-4'>
|
|
<Footer />
|
|
</CardFooter>
|
|
)}
|
|
</Card>
|
|
);
|
|
};
|