61 lines
1.3 KiB
TypeScript
61 lines
1.3 KiB
TypeScript
import { ReactNode, useEffect, useState } from 'react';
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardFooter,
|
|
CardHeader,
|
|
CardTitle
|
|
} from './Card';
|
|
import { Footer } from './Footer';
|
|
|
|
interface CardProps {
|
|
title: string;
|
|
description?: string;
|
|
content: ReactNode;
|
|
className?: string;
|
|
footer?: boolean;
|
|
}
|
|
|
|
export const CustomCard = ({
|
|
title,
|
|
description,
|
|
content,
|
|
className = '',
|
|
footer = true
|
|
}: CardProps) => {
|
|
const [isLoaded, setIsLoaded] = useState(false);
|
|
|
|
useEffect(() => {
|
|
setIsLoaded(true);
|
|
}, []);
|
|
|
|
if (!isLoaded) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<div className='mx-auto w-full max-w-screen-lg px-4 sm:px-6 lg:px-8'>
|
|
<div className='gradient-border shadow-2xl shadow-black'>
|
|
<Card
|
|
className={`z-10 w-full transform p-8 transition-all duration-300 ${className}`}
|
|
>
|
|
<CardHeader>
|
|
<p className='text-xs uppercase text-gray-500'>
|
|
Hackernews + newsletter
|
|
</p>
|
|
<CardTitle>{title}</CardTitle>
|
|
{description && <CardDescription>{description}</CardDescription>}
|
|
</CardHeader>
|
|
<CardContent>{content}</CardContent>
|
|
{footer && (
|
|
<CardFooter>
|
|
<Footer />
|
|
</CardFooter>
|
|
)}
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|