feat(08-01): create JKChatHeader component with close button

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
Nuwan 2026-01-27 13:35:43 +05:30
parent f8a3a7bb84
commit 33f9a357bd
1 changed files with 54 additions and 0 deletions

View File

@ -0,0 +1,54 @@
import React from 'react';
import PropTypes from 'prop-types';
/**
* JKChatHeader - Header component for chat window
*
* Displays channel name and close button in the chat window header.
* Uses inline styles (SCSS styling deferred to Plan 8.3).
*
* @param {Object} props - Component props
* @param {string} props.channelName - Channel name to display
* @param {Function} props.onClose - Callback when close button is clicked
*/
const JKChatHeader = ({ channelName, onClose }) => {
return (
<div style={{
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
padding: '12px 16px',
borderBottom: '1px solid #e0e0e0',
backgroundColor: '#f8f9fa'
}}>
<h5 style={{ margin: 0, fontSize: '16px', fontWeight: 600 }}>
{channelName || 'Session Chat'}
</h5>
<button
onClick={onClose}
style={{
background: 'transparent',
border: 'none',
fontSize: '20px',
cursor: 'pointer',
padding: '0 8px',
color: '#6c757d'
}}
aria-label="Close chat"
>
×
</button>
</div>
);
};
JKChatHeader.propTypes = {
channelName: PropTypes.string,
onClose: PropTypes.func.isRequired
};
JKChatHeader.defaultProps = {
channelName: null
};
export default JKChatHeader;