34 lines
890 B
TypeScript
34 lines
890 B
TypeScript
import React, { ReactNode } from 'react';
|
||
import { useUIContext } from '../../../context/UIContext/useUIContext';
|
||
import './MainContent.css';
|
||
|
||
interface MainContentProps {
|
||
children: ReactNode;
|
||
}
|
||
|
||
export const MainContent: React.FC<MainContentProps> = ({ children }) => {
|
||
const { warningMessage, clearWarningMessage } = useUIContext();
|
||
|
||
return (
|
||
<main className="main-content">
|
||
{warningMessage && (
|
||
<div className={`warning-message warning-${warningMessage.type}`}>
|
||
<span className="warning-text">{warningMessage.text}</span>
|
||
<button
|
||
className="close-warning"
|
||
onClick={clearWarningMessage}
|
||
aria-label="Close message"
|
||
>
|
||
×
|
||
</button>
|
||
</div>
|
||
)}
|
||
|
||
<div className="content-container">
|
||
{children}
|
||
</div>
|
||
</main>
|
||
);
|
||
};
|
||
|
||
export default MainContent; |