57 lines
1.1 KiB
TypeScript
57 lines
1.1 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 default function CustomCard({
|
|
title,
|
|
description,
|
|
content,
|
|
className,
|
|
footer = true
|
|
}: CardProps) {
|
|
const [isLoaded, setIsLoaded] = useState(false);
|
|
|
|
useEffect(() => {
|
|
setIsLoaded(true);
|
|
}, []);
|
|
|
|
if (!isLoaded) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<div className='gradient-border shadow-2xl shadow-black'>
|
|
<Card className={`z-10 max-w-[90vw] p-8 ${className}`}>
|
|
<CardHeader>
|
|
<p className='text-xs uppercase text-gray-500'>
|
|
Hackernews + newsletter
|
|
</p>
|
|
<CardTitle>{title}</CardTitle>
|
|
<CardDescription>{description}</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>{content}</CardContent>
|
|
{footer && (
|
|
<CardFooter>
|
|
<Footer />
|
|
</CardFooter>
|
|
)}
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|