62 lines
4.0 KiB
TypeScript
62 lines
4.0 KiB
TypeScript
import React from 'react';
|
||
import { motion } from 'framer-motion';
|
||
|
||
interface MedicineProps {
|
||
onBack: () => void;
|
||
employee: any;
|
||
}
|
||
|
||
const Medicine: React.FC<MedicineProps> = ({ onBack, employee }) => {
|
||
return (
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
exit={{ opacity: 0, y: -20 }}
|
||
transition={{ duration: 0.3 }}
|
||
className="medicine-section"
|
||
style={{ padding: '20px', maxWidth: '1200px', margin: '0 auto', paddingBottom: '80px' }}
|
||
>
|
||
<div className="top-bar" style={{ marginBottom: '25px' }}>
|
||
<button
|
||
className="back-button"
|
||
onClick={onBack}
|
||
style={{ padding: '10px 20px', background: '#6c757d', color: 'white', border: 'none', borderRadius: '8px', cursor: 'pointer', fontSize: '14px', transition: 'all 0.3s ease' }}
|
||
onMouseEnter={(e) => { e.currentTarget.style.background = '#5a6268'; e.currentTarget.style.transform = 'translateX(-2px)'; }}
|
||
onMouseLeave={(e) => { e.currentTarget.style.background = '#6c757d'; e.currentTarget.style.transform = 'translateX(0)'; }}
|
||
>
|
||
← Назад
|
||
</button>
|
||
</div>
|
||
|
||
<h2 style={{ color: '#2d3436', fontSize: '24px', fontWeight: 300, marginBottom: '30px', display: 'flex', alignItems: 'center', gap: '12px' }}>
|
||
🏥 Медицина
|
||
</h2>
|
||
|
||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: '20px' }}>
|
||
<motion.div whileHover={{ y: -5 }} style={{ background: 'white', borderRadius: '16px', padding: '25px', boxShadow: '0 4px 20px rgba(0,0,0,0.06)', cursor: 'pointer', transition: 'all 0.3s ease', border: '1px solid #f1f2f6' }}>
|
||
<div style={{ fontSize: '32px', color: '#3498db', marginBottom: '15px' }}>📋</div>
|
||
<h3 style={{ margin: '0 0 10px 0', color: '#2d3436', fontSize: '18px' }}>Медицинская карта</h3>
|
||
<p style={{ color: '#636e72', fontSize: '14px', lineHeight: 1.6, margin: 0 }}>Просмотр информации из медицинской карты</p>
|
||
</motion.div>
|
||
|
||
<motion.div whileHover={{ y: -5 }} style={{ background: 'white', borderRadius: '16px', padding: '25px', boxShadow: '0 4px 20px rgba(0,0,0,0.06)', cursor: 'pointer', transition: 'all 0.3s ease', border: '1px solid #f1f2f6' }}>
|
||
<div style={{ fontSize: '32px', color: '#2ecc71', marginBottom: '15px' }}>🏥</div>
|
||
<h3 style={{ margin: '0 0 10px 0', color: '#2d3436', fontSize: '18px' }}>Запись в поликлинику</h3>
|
||
<p style={{ color: '#636e72', fontSize: '14px', lineHeight: 1.6, margin: 0 }}>Онлайн запись к врачу</p>
|
||
</motion.div>
|
||
|
||
<motion.div whileHover={{ y: -5 }} style={{ background: 'white', borderRadius: '16px', padding: '25px', boxShadow: '0 4px 20px rgba(0,0,0,0.06)', cursor: 'pointer', transition: 'all 0.3s ease', border: '1px solid #f1f2f6' }}>
|
||
<div style={{ fontSize: '32px', color: '#f39c12', marginBottom: '15px' }}>🛡️</div>
|
||
<h3 style={{ margin: '0 0 10px 0', color: '#2d3436', fontSize: '18px' }}>Страховая компания</h3>
|
||
<p style={{ color: '#636e72', fontSize: '14px', lineHeight: 1.6, margin: 0 }}>Оформление заявок на медицинские услуги</p>
|
||
</motion.div>
|
||
</div>
|
||
|
||
<div style={{ marginTop: '30px', padding: '20px', background: '#f8f9fa', borderRadius: '12px', border: '1px solid #f1f2f6', textAlign: 'center', color: '#636e72' }}>
|
||
<p style={{ margin: 0 }}>ℹ️ Раздел в разработке. Функционал будет доступен в ближайшее время.</p>
|
||
</div>
|
||
</motion.div>
|
||
);
|
||
};
|
||
|
||
export default Medicine; |