Spaces:
Sleeping
Sleeping
File size: 1,672 Bytes
e85fa50 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 |
import React from 'react';
interface CardProps {
children: React.ReactNode;
className?: string;
onClick?: () => void;
hoverable?: boolean;
}
const Card: React.FC<CardProps> = ({
children,
className = '',
onClick,
hoverable = false
}) => {
return (
<div
className={`
ios-card
${hoverable ? 'cursor-pointer' : ''}
${className}
`}
onClick={onClick}
>
{children}
</div>
);
};
export interface CardHeaderProps {
title: string;
subtitle?: string;
action?: React.ReactNode;
className?: string;
}
export const CardHeader: React.FC<CardHeaderProps> = ({
title,
subtitle,
action,
className = ''
}) => {
return (
<div className={`p-4 flex items-center justify-between border-b border-gray-200 ${className}`}>
<div>
<h3 className="text-lg font-medium">{title}</h3>
{subtitle && <p className="text-sm text-gray-500 mt-1">{subtitle}</p>}
</div>
{action && <div>{action}</div>}
</div>
);
};
export interface CardContentProps {
children: React.ReactNode;
className?: string;
}
export const CardContent: React.FC<CardContentProps> = ({
children,
className = ''
}) => {
return <div className={`p-4 ${className}`}>{children}</div>;
};
export interface CardFooterProps {
children: React.ReactNode;
className?: string;
}
export const CardFooter: React.FC<CardFooterProps> = ({
children,
className = ''
}) => {
return (
<div className={`p-4 border-t border-gray-200 ${className}`}>
{children}
</div>
);
};
export default Card; |