Action Card

1import {
2  Card,
3  CardContent,
4  CardDescription,
5  CardFooter,
6  CardHeader,
7  CardTitle,
8} from "@/components/ui/card";
9import { cn } from "@/lib/utils";
10 
11export function ActionCard({
12  children,
13  className,
14  ...props
15}: React.ComponentProps<"div">) {
16  return (
17    <Card
18      className={cn("group/action-card gap-4 py-4 shadow-none", className)}
19      {...props}
20    >
21      {children}
22    </Card>
23  );
24}
25 
26export function ActionCardHeader({
27  children,
28  className,
29  ...props
30}: React.ComponentProps<"div">) {
31  return (
32    <CardHeader className={cn("px-4 [.border-b]:pb-4", className)} {...props}>
33      {children}
34    </CardHeader>
35  );
36}
37 
38export function ActionCardGroup({
39  children,
40  className,
41  ...props
42}: React.ComponentProps<"div">) {
43  return (
44    <div className={cn("grid gap-4", className)} {...props}>
45      {children}
46    </div>
47  );
48}
49 
50export function ActionCardTitle({
51  children,
52  ...props
53}: React.ComponentProps<"div">) {
54  return <CardTitle {...props}>{children}</CardTitle>;
55}
56 
57export function ActionCardDescription({
58  children,
59  ...props
60}: React.ComponentProps<"div">) {
61  return <CardDescription {...props}>{children}</CardDescription>;
62}
63 
64export function ActionCardContent({
65  children,
66  className,
67  ...props
68}: React.ComponentProps<"div">) {
69  return (
70    <CardContent className={cn("px-4", className)} {...props}>
71      {children}
72    </CardContent>
73  );
74}
75 
76export function ActionCardFooter({
77  children,
78  className,
79  ...props
80}: React.ComponentProps<"div">) {
81  return (
82    <CardFooter className={cn("px-4 [.border-t]:pt-4", className)} {...props}>
83      {children}
84    </CardFooter>
85  );
86}