AppCakes
81 lines
1.7 KiB
TypeScript
81 lines
1.7 KiB
TypeScript
import React from 'react';
|
|
import { IonIcon } from '@ionic/react';
|
|
|
|
interface RevisionInstrumentCardProps {
|
|
title: string;
|
|
subtitle?: string;
|
|
icon: string;
|
|
iconColor: string;
|
|
iconBgColor: string;
|
|
onClick: () => void;
|
|
style?: React.CSSProperties;
|
|
}
|
|
|
|
export const RevisionInstrumentCard: React.FC<RevisionInstrumentCardProps> = ({
|
|
title,
|
|
subtitle,
|
|
icon,
|
|
iconColor,
|
|
iconBgColor,
|
|
onClick,
|
|
style,
|
|
}) => {
|
|
return (
|
|
<div
|
|
onClick={onClick}
|
|
style={{
|
|
background: '#ffffff',
|
|
border: 'none',
|
|
borderRadius: '14px',
|
|
padding: '14px 10px',
|
|
textAlign: 'center',
|
|
cursor: 'pointer',
|
|
boxShadow: 'none',
|
|
transition: 'transform 0.15s ease',
|
|
...style,
|
|
}}
|
|
className="ion-activatable"
|
|
>
|
|
<div
|
|
style={{
|
|
width: '36px',
|
|
height: '36px',
|
|
borderRadius: '10px',
|
|
background: iconBgColor,
|
|
color: iconColor,
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
margin: '0 auto 8px auto',
|
|
}}
|
|
>
|
|
<IonIcon icon={icon} style={{ fontSize: '18px' }} />
|
|
</div>
|
|
<span
|
|
style={{
|
|
fontSize: '0.8rem',
|
|
fontWeight: '700',
|
|
color: 'var(--ion-color-dark)',
|
|
display: 'block',
|
|
}}
|
|
>
|
|
{title}
|
|
</span>
|
|
{subtitle && (
|
|
<span
|
|
style={{
|
|
fontSize: '0.65rem',
|
|
color: 'var(--ion-color-medium)',
|
|
display: 'block',
|
|
marginTop: '2px',
|
|
}}
|
|
>
|
|
{subtitle}
|
|
</span>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default RevisionInstrumentCard;
|