Tundesamson26/index.js Secret

## index.js
import Head from "next/head";


export default function Home() {
  const [username, setUsername] = useState("");
  const [typers, setTypers] = useState([]);
  const [messages, setMessages] = useState([]);
  const [message, setMessage] = useState("");

  return (
    <div className="container">
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link
          href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css"
          rel="stylesheet"
          integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor"
          crossOrigin="anonymous"
        />
        <link
          href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900,200italic,300italic,400italic,600italic,700italic,900italic"
          rel="stylesheet"
          type="text/css"
        />
        <link rel="stylesheet" href="/css/style.css" />
      </Head>

      <div className="chat_window">
        <div className="top_menu">
          <div className="is_typing">
            {typers.length > 0
              ? typers.map((username) => (
                  <em style={{ display: "block" }}>{username} is typing</em>
                ))
              : null}
          </div>
          <div className="title"> Chat App</div>
        </div>

        <ul className="messages">
        {messages.map(message => {
          return (
            <li className="message">
              <div className="message_wrapper">
                <div className="text">{message.message}</div>
              </div>
            </li>
          );
        })}
        </ul>

        <div className="input bottom_wrapper clearfix">
          <br />
          <div className="message_input_wrapper">
            <input
              id="message-text-field"
              className="message_input"
              placeholder="Type your message here..."
              value={message}
              onChange={(e) => setMessage(e.target.value)}
            />
          </div>
          <button id="send-button" className="send_message" >
            <div className="text">Send</div>
          </button>
        </div>
      </div>
    </div>
  );
}
	import Head from "next/head";


	export default function Home() {
	const [username, setUsername] = useState("");
	const [typers, setTypers] = useState([]);
	const [messages, setMessages] = useState([]);
	const [message, setMessage] = useState("");

	return (
	<div className="container">
	<Head>
	<title>Create Next App</title>
	<meta name="description" content="Generated by create next app" />
	<link
	href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css"
	rel="stylesheet"
	integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor"
	crossOrigin="anonymous"
	/>
	<link
	href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900,200italic,300italic,400italic,600italic,700italic,900italic"
	rel="stylesheet"
	type="text/css"
	/>
	<link rel="stylesheet" href="/css/style.css" />
	</Head>

	<div className="chat_window">
	<div className="top_menu">
	<div className="is_typing">
	{typers.length > 0
	? typers.map((username) => (
	<em style={{ display: "block" }}>{username} is typing</em>
	))
	: null}
	</div>
	<div className="title"> Chat App</div>
	</div>

	<ul className="messages">
	{messages.map(message => {
	return (
	<li className="message">
	<div className="message_wrapper">
	<div className="text">{message.message}</div>
	</div>
	</li>
	);
	})}
	</ul>

	<div className="input bottom_wrapper clearfix">
	<br />
	<div className="message_input_wrapper">
	<input
	id="message-text-field"
	className="message_input"
	placeholder="Type your message here..."
	value={message}
	onChange={(e) => setMessage(e.target.value)}
	/>
	</div>
	<button id="send-button" className="send_message" >
	<div className="text">Send</div>
	</button>
	</div>
	</div>
	</div>
	);
	}