46 lines
No EOL
1.1 KiB
TypeScript
46 lines
No EOL
1.1 KiB
TypeScript
|
|
import styles from './ViewForm.module.css';
|
|
|
|
// Field configuration interface for ViewForm
|
|
export interface ViewFieldConfig {
|
|
key: string;
|
|
label: string;
|
|
formatter?: (value: any) => string;
|
|
}
|
|
|
|
// ViewForm props - for display-only purposes
|
|
export interface ViewFormProps<T = any> {
|
|
data: T;
|
|
fields: ViewFieldConfig[];
|
|
className?: string;
|
|
}
|
|
|
|
// ViewForm component - displays data in read-only format
|
|
export function ViewForm<T extends Record<string, any>>({
|
|
data,
|
|
fields,
|
|
className = ''
|
|
}: ViewFormProps<T>) {
|
|
|
|
// Render field in view-only mode
|
|
const renderField = (field: ViewFieldConfig) => {
|
|
const value = data[field.key];
|
|
|
|
return (
|
|
<div className={styles.fieldGroup} key={field.key}>
|
|
<label className={styles.fieldLabel}>{field.label}</label>
|
|
<div className={styles.fieldValue}>
|
|
{field.formatter ? field.formatter(value) : (value || 'N/A')}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<div className={`${styles.viewForm} ${className}`}>
|
|
{fields.map(field => renderField(field))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default ViewForm;
|