57 lines
1.4 KiB
TypeScript
57 lines
1.4 KiB
TypeScript
import {
|
|
Box,
|
|
Card as MantineCard,
|
|
type CardProps as MantineCardProps,
|
|
|
|
Title,
|
|
} from "@mantine/core";
|
|
import type React from "react";
|
|
import { cn } from "./utils";
|
|
|
|
interface CardComponentProps extends MantineCardProps {
|
|
// Add any specific props you had in your custom Card component
|
|
}
|
|
|
|
interface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {}
|
|
interface CardTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {}
|
|
interface CardContentProps extends React.HTMLAttributes<HTMLDivElement> {}
|
|
|
|
const Card = ({ className, children, ...props }: CardComponentProps) => (
|
|
<MantineCard
|
|
className={cn(
|
|
"rounded-xl border bg-white dark:bg-gray-800 p-6 shadow",
|
|
className,
|
|
)}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</MantineCard>
|
|
);
|
|
|
|
const CardHeader = ({ className, children, ...props }: CardHeaderProps) => (
|
|
<Box className={cn("flex flex-col space-y-1.5", className)} {...props}>
|
|
{children}
|
|
</Box>
|
|
);
|
|
|
|
const CardTitle = ({ className, children, ...props }: CardTitleProps) => (
|
|
<Title
|
|
order={3}
|
|
className={cn(
|
|
"font-semibold leading-none tracking-tight text-gray-900 dark:text-white",
|
|
className,
|
|
)}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</Title>
|
|
);
|
|
|
|
const CardContent = ({ className, children, ...props }: CardContentProps) => (
|
|
<Box className={cn("p-6 pt-0", className)} {...props}>
|
|
{children}
|
|
</Box>
|
|
);
|
|
|
|
export { Card, CardHeader, CardTitle, CardContent };
|