Card.tsx 943 B

123456789101112131415161718192021222324252627282930313233
  1. import type { ReactNode, MouseEvent, HTMLAttributes } from 'react';
  2. interface CardProps extends HTMLAttributes<HTMLDivElement> {
  3. children: ReactNode;
  4. className?: string;
  5. onClick?: (e: MouseEvent) => void;
  6. onContextMenu?: (e: MouseEvent) => void;
  7. }
  8. export function Card({ children, className = '', onClick, onContextMenu, ...rest }: CardProps) {
  9. return (
  10. <div
  11. className={`bg-bambu-dark-secondary rounded-xl border border-bambu-dark-tertiary card-shadow ${className}`}
  12. onClick={onClick}
  13. onContextMenu={onContextMenu}
  14. {...rest}
  15. >
  16. {children}
  17. </div>
  18. );
  19. }
  20. export function CardHeader({ children, className = '' }: CardProps) {
  21. return (
  22. <div className={`px-6 py-4 border-b border-bambu-dark-tertiary ${className}`}>
  23. {children}
  24. </div>
  25. );
  26. }
  27. export function CardContent({ children, className = '' }: CardProps) {
  28. return <div className={`p-6 ${className}`}>{children}</div>;
  29. }