Create and Styling Admin Room.

src/components/Button.tsx

@@ -2,10 +2,12 @@ import { ButtonHTMLAttributes } from "react"
 
 import '../styles/button.scss'
 
-type ButttonProps = ButtonHTMLAttributes<HTMLButtonElement>;
+type ButttonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+  isOutlined?: boolean
+};
 
-export function Button(props: ButttonProps){
+export function Button({isOutlined = false, ...props}: ButttonProps){
   return (
-    <button className="button" {...props}/>
+    <button className={`button ${isOutlined ? 'outlined' : ''}` }{...props}/>
   )
 }

src/pages/AdminRoom.tsx

@@ -64,31 +64,18 @@ async function handleSendQuestion(event: FormEvent) {
       <header>
         <div className="content">
           <img src={logoImg} alt="logo" />
-          <RoomCode code={roomId} />
+         <div>
+         <RoomCode code={roomId} />
+          <Button isOutlined>Encerrar Sala</Button>
+         </div>
         </div>
       </header>
       <main>
         <div className="room-title">
           <h1>Sala {title}</h1>
           { questions.length > 0 &&  <span> {questions.length} pergunta(s)</span>  }
         </div>
-        <form onSubmit={handleSendQuestion}>
-          <textarea 
-          placeholder="O que voce quer perguntar?"
-          onChange={event => setNewQuestion(event.target.value)}
-          value={newQuestion}/>
-          <div className="form-footer">
-            {user ? (
-              <div className="user-info">
-                <img src={user?.avatar} alt={user?.name} />
-                <span>{user?.name}</span>
-              </div>
-            ) : (
-            <span>par enviar uma pergunta, <button>faca login</button>.</span>
-            )}
-            <Button type="submit" disabled={!user}>Enviar pergunta</Button>
-          </div>
-        </form>
+
 
         <div className="question-list">
         {questions.map(questions => {

src/styles/button.scss

@@ -16,6 +16,12 @@
   img {
     margin-right: 8px;
   }
+&.outlined{
+  background: #FFF;
+  border: 1px solid #835afd;
+  color: #835afd;
+}
+
   &:not(disabled):hover {
     filter: brightness(0.9);
   }

src/styles/room.scss

@@ -12,6 +12,14 @@
       > img {
         max-height: 45px;
       }
+      > div {
+        display: flex;
+        gap: 16px;
+
+        button{
+          height: 40px;
+        }
+      }
     }
   }