Tundesamson26/index.js Secret

## index.js
/* eslint-disable react/jsx-key */
import Head from "next/head";
import { useState, useEffect } from "react";
import "@appwrite.io/pink";
import ReactPlayer from 'react-player'

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

  return (
    <>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main className="container u-height-100-percent u-main-center">
        <div className="u-main-center" >
        <ReactPlayer style={{maxWidth: "500px", margin: "auto", paddingBottom: "10px"}} url='https://www.youtube.com/watch?v=xO9QDQaVHxU' />
        </div>
        <div className="card" style={{maxWidth: "500px", margin: "auto"}}>
          <div className="">
            <div className="u-text-center u-bold u-line-height-1-25"> Classroom Chat</div>
          </div>

          <ul className="u-padding-24" style={{minHeight: "300px"}}>
            {messages.map((message) => {
              return (
                <li className="message">
                  <div className="message_wrapper">
                    <div className="">{message.message}</div>
                  </div>
                </li>
              );
            })}
          </ul>

          <div className="">
            {/* <br /> */}
            <div className="u-flex" style={{maxWidth: "400px"}}>
              <div className="input">
                <input
                  id="message-text-field"
                  className="u-max-width-500"
                  type="text"
                  placeholder="Type your message here..."
                  value={message}
                  onChange={(e) => setMessage(e.target.value)}
                />
              </div>
              <button id="send-button" className="button">
                <div className="text">Send</div>
              </button>
            </div>
          </div>
        </div>
      </main>
    </>
  );
}
	/* eslint-disable react/jsx-key */
	import Head from "next/head";
	import { useState, useEffect } from "react";
	import "@appwrite.io/pink";
	import ReactPlayer from 'react-player'

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

	return (
	<>
	<Head>
	<title>Create Next App</title>
	<meta name="description" content="Generated by create next app" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<link rel="icon" href="/favicon.ico" />
	</Head>
	<main className="container u-height-100-percent u-main-center">
	<div className="u-main-center" >
	<ReactPlayer style={{maxWidth: "500px", margin: "auto", paddingBottom: "10px"}} url='https://www.youtube.com/watch?v=xO9QDQaVHxU' />
	</div>
	<div className="card" style={{maxWidth: "500px", margin: "auto"}}>
	<div className="">
	<div className="u-text-center u-bold u-line-height-1-25"> Classroom Chat</div>
	</div>

	<ul className="u-padding-24" style={{minHeight: "300px"}}>
	{messages.map((message) => {
	return (
	<li className="message">
	<div className="message_wrapper">
	<div className="">{message.message}</div>
	</div>
	</li>
	);
	})}
	</ul>

	<div className="">
	{/* <br /> */}
	<div className="u-flex" style={{maxWidth: "400px"}}>
	<div className="input">
	<input
	id="message-text-field"
	className="u-max-width-500"
	type="text"
	placeholder="Type your message here..."
	value={message}
	onChange={(e) => setMessage(e.target.value)}
	/>
	</div>
	<button id="send-button" className="button">
	<div className="text">Send</div>
	</button>
	</div>
	</div>
	</div>
	</main>
	</>
	);
	}