Card Component

Result

Thats how the Card Component is gonna look like without the content.

---

Usage

This Component will allow me to add different forms with the content attribute. Optionally I can even add a customized footer.

<CardCompact
	title="Create Ticket"
    description="A new ticket will be created"
    className="w-full max-w-[420px] self-center"
    content={<TicketUpsertForm />}
/>

---

Implementation

src/components/card-compact.tsx

import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "./ui/card";
 
type CardCompactProps = {
  title: string;
  description: string;
  className?: string;
  content: React.ReactNode;
  footer?: React.ReactNode;
};
 
const CardCompact = ({
  title,
  description,
  className,
  content,
  footer,
}: CardCompactProps) => {
  return (
    <Card className={className}>
      <CardHeader>
        <CardTitle>{title}</CardTitle>
        <CardDescription>{description}</CardDescription>
      </CardHeader>
      <CardContent>{content}</CardContent>
      {footer && (
        <CardFooter className="flex justify-between">{footer}</CardFooter>
      )}
    </Card>
  );
};
 
export { CardCompact };