frontend/app/page.js

'use client';

import RecentChats from '@components/RecentChats';
import { useRelayAPI } from '@components/RelayAPI';

export default function ChatPage() {
  const relayApi = useRelayAPI();

  const sendNotify = ()=> {
    relayApi.broadcast('NOTIFY','This is a notification')
  }
  const joinNotifyChannel = ()=> {
    relayApi.joinChannel('NOTIFY')
  }
  const leaveNotifyChannel = ()=> {
    relayApi.leaveChannel('NOTIFY')
  }

  return (
    <div style={{ width: '100%', padding: '20px', backgroundColor: 'rgb(28, 28, 47)', height: '100dvh' }}>
      <div className='pulse-and-fade' style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', height: '100%', width: '100%' }}>
        <div style={{ textAlign: 'center' }}>
          <h1 style={{ color: '#4a4a4a', fontSize: '24px', marginBottom: '20px' }}>Nexus MS</h1>
          <RecentChats/>
        </div>
        <button onClick={joinNotifyChannel}>Join Notify</button>
        <button onClick={leaveNotifyChannel}>Leave Notify</button>
        <button onClick={sendNotify}>Send Notify</button>
      </div>
    </div>
  );
}