MicroClub Card

1'use client';
2 
3import * as React from 'react';
4import { cva, type VariantProps } from 'class-variance-authority';
5 
6import { cn } from '@/lib/utils';
7 
8const McCardDirectionContext = React.createContext<{ direction: 'row' | 'column' } | null>(null);
9 
10const cardVariants = cva(
11  'flex gap-4 rounded-lg border border-border bg-card p-4 text-card-foreground shadow-sm w-full',
12  {
13    variants: {
14      direction: {
15        row: 'flex-row',
16        column: 'flex-col',
17      },
18    },
19    defaultVariants: {
20      direction: 'column',
21    },
22  }
23);
24 
25function McCard({
26  className,
27  direction = 'column',
28  children,
29  ...props
30}: React.ComponentProps<'div'> & { direction?: 'row' | 'column' }) {
31  return (
32    <McCardDirectionContext.Provider value={{ direction }}>
33      <div data-slot="card" className={cn(cardVariants({ direction }), className)} {...props}>
34        {children}
35      </div>
36    </McCardDirectionContext.Provider>
37  );
38}
39 
40export interface McCardHeaderProps extends React.ComponentProps<'div'> {
41  title: string;
42  description?: string;
43}
44 
45function McCardHeader({ className, title, description, ...props }: McCardHeaderProps) {
46  return (
47    <div data-slot="card-header" className={cn('flex flex-col gap-1', className)} {...props}>
48      <h3 className="text-xl font-bold leading-normal tracking-normal">{title}</h3>
49      {description && <p className="text-xs font-normal">{description}</p>}
50    </div>
51  );
52}
53 
54const footerVariants = cva('flex gap-2', {
55  variants: {
56    cardDirection: {
57      row: 'self-stretch ms-auto',
58      column: '',
59    },
60    direction: {
61      row: 'flex-row',
62      column: 'flex-col',
63    },
64    align: {
65      start: '',
66      end: '',
67      center: '',
68      stretch: '',
69    },
70  },
71  compoundVariants: [
72    // cardDirection: column — matches previous footer-only (direction × align) behavior
73    {
74      cardDirection: 'column',
75      direction: 'row',
76      align: 'start',
77      className: 'items-center justify-start [&>*]:shrink-0 [&>*]:grow-0',
78    },
79    {
80      cardDirection: 'column',
81      direction: 'row',
82      align: 'end',
83      className: 'items-center justify-end [&>*]:shrink-0 [&>*]:grow-0',
84    },
85    {
86      cardDirection: 'column',
87      direction: 'row',
88      align: 'center',
89      className: 'items-center justify-center [&>*]:shrink-0 [&>*]:grow-0',
90    },
91    {
92      cardDirection: 'column',
93      direction: 'row',
94      align: 'stretch',
95      className: 'items-center justify-stretch *:min-w-0 *:flex-1',
96    },
97// … truncated