112 lines
2.3 KiB
TypeScript
112 lines
2.3 KiB
TypeScript
import React from 'react';
|
|
import type { BaseComponentProps } from '../types';
|
|
import '../../styles/card.css';
|
|
|
|
/**
|
|
* Props for Card component
|
|
* Enhanced with Fusion Design System variants
|
|
*/
|
|
export interface CardProps extends BaseComponentProps {
|
|
children: React.ReactNode;
|
|
variant?: 'default' | 'manga' | 'neon' | 'nature' | 'elevated' | 'glass';
|
|
interactive?: boolean;
|
|
spacing?: 'compact' | 'normal' | 'spacious';
|
|
borderless?: boolean;
|
|
flat?: boolean;
|
|
}
|
|
|
|
export interface CardHeaderProps extends BaseComponentProps {
|
|
children: React.ReactNode;
|
|
}
|
|
|
|
export interface CardBodyProps extends BaseComponentProps {
|
|
children: React.ReactNode;
|
|
}
|
|
|
|
export interface CardFooterProps extends BaseComponentProps {
|
|
children: React.ReactNode;
|
|
}
|
|
|
|
export const Card = ({
|
|
children,
|
|
variant = 'default',
|
|
interactive = false,
|
|
spacing = 'normal',
|
|
borderless = false,
|
|
flat = false,
|
|
className = '',
|
|
...props
|
|
}: CardProps) => {
|
|
const baseClass = 'card-veza';
|
|
const variantClass = `card-veza--${variant}`;
|
|
const interactiveClass = interactive ? 'card-veza--interactive' : '';
|
|
const spacingClass = spacing !== 'normal' ? `card-veza--${spacing}` : '';
|
|
const borderlessClass = borderless ? 'card-veza--borderless' : '';
|
|
const flatClass = flat ? 'card-veza--flat' : '';
|
|
|
|
const classes = [
|
|
baseClass,
|
|
variantClass,
|
|
interactiveClass,
|
|
spacingClass,
|
|
borderlessClass,
|
|
flatClass,
|
|
className,
|
|
]
|
|
.filter(Boolean)
|
|
.join(' ');
|
|
|
|
return (
|
|
<div className={classes} {...props}>
|
|
{children}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export const CardHeader = ({
|
|
children,
|
|
className = '',
|
|
...props
|
|
}: CardHeaderProps) => {
|
|
return (
|
|
<div className={`card-veza__header ${className}`} {...props}>
|
|
{children}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export const CardTitle = ({
|
|
children,
|
|
className = '',
|
|
...props
|
|
}: CardHeaderProps) => {
|
|
return (
|
|
<h3 className={`card-veza__title ${className}`} {...props}>
|
|
{children}
|
|
</h3>
|
|
);
|
|
};
|
|
|
|
export const CardBody = ({
|
|
children,
|
|
className = '',
|
|
...props
|
|
}: CardBodyProps) => {
|
|
return (
|
|
<div className={`card-veza__body ${className}`} {...props}>
|
|
{children}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export const CardFooter = ({
|
|
children,
|
|
className = '',
|
|
...props
|
|
}: CardFooterProps) => {
|
|
return (
|
|
<div className={`card-veza__footer ${className}`} {...props}>
|
|
{children}
|
|
</div>
|
|
);
|
|
};
|