feat(web): draft layout

brunocroh · May 19, 2024 · 75058e6 · 75058e6
1 parent 469bdc5
commit 75058e6
Show file tree

Hide file tree

Showing 12 changed files with 854 additions and 1,019 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "https://json.schemastore.org/eslintrc",
+  "root": true,
+  "extends": [
+    "next/core-web-vitals",
+    "turbo",
+    "prettier",
+    "plugin:tailwindcss/recommended"
+  ],
+  "plugins": ["tailwindcss"],
+  "rules": {
+    "@next/next/no-html-link-for-pages": "off",
+    "tailwindcss/no-custom-classname": "off",
+    "tailwindcss/classnames-order": "error"
+  },
+  "settings": {
+    "tailwindcss": {
+      "callees": ["cn", "cva"],
+      "config": "tailwind.config.cjs"
+    },
+    "next": {
+      "rootDir": ["apps/*/"]
+    }
+  },
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx"],
+      "parser": "@typescript-eslint/parser"
+    }
+  ]
+}
diff --git a/apps/web/.eslintrc.js b/apps/web/.eslintrc.js
diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx
@@ -1,5 +1,10 @@
+import { Github } from "lucide-react";
 import "./globals.css";
+import { GeistSans } from "geist/font/sans";
 import type { Metadata } from "next";
+import Image from "next/image";
+import Link from "next/link";
+import { Header } from "@/components/header";
 
 export const metadata: Metadata = {
   title: "Create Turborepo",
@@ -12,8 +17,19 @@ export default function RootLayout({
   children: React.ReactNode;
 }): JSX.Element {
   return (
-    <html lang="en">
-      <body className="h-screen flex flex-col dark">{children}</body>
+    <html lang="en" className={GeistSans.className}>
+      <body className="dark flex h-screen flex-col">
+        <Header />
+        <Image
+          src="/light-ray.svg"
+          alt="Purple light ray"
+          width="800"
+          height="800"
+          className="animate-in fade-in slide-in-from-bottom-1 absolute"
+          style={{ color: "transparent", animationDuration: "10s" }}
+        />
+        <section>{children}</section>
+      </body>
     </html>
   );
 }
diff --git a/apps/web/app/page.tsx b/apps/web/app/page.tsx
@@ -1,28 +1,21 @@
-import { Button } from "@/components/ui/button";
-import Image from "next/image";
-import Link from "next/link";
 import React from "react";
+import Link from "next/link";
+import { ChevronRight } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
 
 export default function Page(): JSX.Element {
   return (
-    <main className="flex flex-col h-full">
+    <main className="flex h-full flex-col">
       <div>
-        <Image
-          src="/light-ray.svg"
-          alt="Purple light ray"
-          width="1024"
-          height="800"
-          className="absolute animate-in fade-in slide-in-from-bottom-1"
-          style={{ color: "transparent", animationDuration: "10s" }}
-        />
-        <div className="flex flex-row w-full">
+        <div className="flex w-full flex-row">
           <div className="flex">
             <video
-              className="w-full max-w-2xl rounded-lg animation-scale-in-fade"
+              className="w-full max-w-4xl"
               style={{
                 display: "block",
-                width: "920px",
-                height: "700px",
+                width: "600px",
+                height: "400px",
               }}
               playsInline
               loop={true}
@@ -31,10 +24,21 @@ export default function Page(): JSX.Element {
               src="/earth.mp4"
             ></video>
           </div>
-          <div className="content-center">
-            <Link href={`room/queue`}>
-              <Button className="bg-red-500 min-w-max">Start a chat</Button>
-            </Link>
+          <div className="z-10 mt-16 w-full p-10">
+            <h2 className="w-full text-center text-[3rem] leading-10 text-gray-300">
+              Practice english for free
+            </h2>
+            <h3 className="my-4 text-center text-[1rem] text-slate-400 antialiased">
+              The quickest path to learning English is by speaking it regularly. Just find someone to chat with.
+            </h3>
+            <div className="flex w-full justify-center">
+              <Link href={`room/queue`}>
+                <Button className="h-12 min-w-max rounded-full text-base font-semibold text-black">
+                  Get Started
+                  <ChevronRight size={16} />
+                </Button>
+              </Link>
+            </div>
           </div>
         </div>
       </div>

diff --git a/apps/web/app/room/queue/page.tsx b/apps/web/app/room/queue/page.tsx
@@ -12,8 +12,8 @@ import {
 import { Button } from "@/components/ui/button";
 import { useRouter } from "next/navigation";
 import { useUserMedia } from "@/hooks/useUserMedia";
-import { Header } from "@/components/header";
 import { Mic } from "lucide-react";
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
 
 export default function Page(): JSX.Element {
   const router = useRouter();
@@ -26,7 +26,6 @@ export default function Page(): JSX.Element {
     switchVideo,
     selectedVideoDevice,
     switchMic,
-    accessGranted,
     activeStream: stream,
     stopStreaming,
   } = useUserMedia();
@@ -77,71 +76,80 @@ export default function Page(): JSX.Element {
     return () => {
       stopStreaming(stream!);
     };
-  }, [stream]);
+  }, [stream, stopStreaming]);
 
   return (
-    <main className="flex flex-col h-full">
-      <Header />
-      <section className="flex h-full place-content-center justify-center content-center align-center">
+    <main className="flex h-full flex-col">
+      <section className="align-center flex h-full place-content-center content-center justify-center">
         <div>
-          <h1>Estamos procurando alguém para praticar inglês contigo</h1>
-          <h1>QueueSize: {usersOnline}</h1>
-          <h1>acessGranted: {accessGranted}</h1>
-          <h1>userId: {me}</h1>
-          <video
-            className="[transform:rotateY(180deg)] w-96 h-96"
-            ref={videoRef}
-            playsInline
-            autoPlay={true}
-            muted={true}
-          ></video>
-          <h2>Confira sue microfone e webcam, enquanto aguarda</h2>
-          <div className="flex flex-row gap-6 w-full">
-            <Select onValueChange={switchMic} value={selectedAudioDevice}>
-              <SelectTrigger className="w-[180px]">
-                <SelectValue placeholder="Audio" />
-              </SelectTrigger>
-              <SelectContent>
-                {audioDevices.map((audio) => {
-                  return (
-                    <SelectItem
-                      key={audio.deviceId}
-                      value={audio.deviceId || audio.label}
-                    >
-                      <div className="flex flex-row gap-2 items-center">
-                        <Mic size={12} /> {audio.label}
-                      </div>
-                    </SelectItem>
-                  );
-                })}
-              </SelectContent>
-            </Select>
-            <Select onValueChange={switchVideo} value={selectedVideoDevice}>
-              <SelectTrigger className="w-[180px]">
-                <SelectValue placeholder="Video" />
-              </SelectTrigger>
-              <SelectContent>
-                {videoDevices.map((video) => {
-                  return (
-                    <SelectItem
-                      key={video.deviceId}
-                      value={video.deviceId || video.label}
-                    >
-                      {video.label}
-                    </SelectItem>
-                  );
-                })}
-              </SelectContent>
-            </Select>
+          <h1 className="text-[2em]">Before you start practicing, make sure to check your microphone and camera.</h1>
+          <h2>users online now: {usersOnline}</h2>
+          <div className="flex flex-col justify-center">
+            <div className="m-5 flex w-full flex-col items-center">
+              <Card className="w-[500px] p-5">
+                <CardContent>
+                  <div className="z-10 h-[300px] w-[410px] overflow-hidden rounded-lg">
+                    <video
+                      className="h-[310px] w-[420px] rounded-lg [transform:rotateY(180deg)]"
+                      ref={videoRef}
+                      playsInline
+                      autoPlay={true}
+                      muted={true}
+                    ></video>
+                  </div>
+                  <div className="mt-5 flex w-full flex-row gap-6">
+                    <Select onValueChange={switchMic} value={selectedAudioDevice}>
+                      <SelectTrigger className="z-10 w-[200px]">
+                        <Mic size={18} /><SelectValue placeholder="Audio" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {audioDevices.map((audio) => {
+                          return (
+                            <SelectItem
+                              key={audio.deviceId}
+                              value={audio.deviceId || audio.label}
+                              className="flex flex-row items-center gap-2"
+                            >
+                             {audio.label}
+                            </SelectItem>
+                          );
+                        })}
+                      </SelectContent>
+                    </Select>
+                    <Select onValueChange={switchVideo} value={selectedVideoDevice}>
+                      <SelectTrigger className="z-10 w-[180px]">
+                        <SelectValue placeholder="Video" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {videoDevices.map((video) => {
+                          return (
+                            <SelectItem
+                              key={video.deviceId}
+                              value={video.deviceId || video.label}
+                            >
+                              {video.label}
+                            </SelectItem>
+                          );
+                        })}
+                      </SelectContent>
+                    </Select>
+                  </div>
+
+                  <div className="mt-6 flex h-12 w-full items-center justify-between gap-6">
+                    <h2>
+                      {inQueue
+                        ? "Finding a practice buddy"
+                        : "Hit the 'Ready' button when you feel ready to start practicing with someone."}
+                    </h2>
+                    <Button onClick={onConnect} className="z-10 rounded-xl">
+                      {inQueue ? "Cancel" : "I'm Ready"}
+                    </Button>
+                  </div>
+                </CardContent>
+
+              </Card>
+            </div>
           </div>
-          <h2>
-            {inQueue
-              ? "Procurando outro usuário"
-              : "Quando você estiver pronto entre em uma sala"}
-          </h2>
-          <Button onClick={onConnect}>
-            {inQueue ? "Cancelar" : "Entrar em uma sala"}
-          </Button>
         </div>
       </section>
     </main>

diff --git a/apps/web/components/header.tsx b/apps/web/components/header.tsx
@@ -1,13 +1,20 @@
+import { Github } from "lucide-react";
 import Link from "next/link";
 import React from "react";
 
 export const Header = () => {
   return (
-    <section className="flex p-5 justify-between">
+    <nav className="flex p-5 justify-between z-10">
       <Link href="/">
-        <h1>Header</h1>
+        <h1 className="text-base font-semibold text-purple-200">
+          BolhaDev.Chat
+        </h1>
       </Link>
-      <h2>Github</h2>
-    </section>
+      <Link href="https://github.com/brunocroh/bolhadev.chat">
+        <h2 className="hover:bg-white hover:text-black p-1 rounded-lg">
+          <Github color="currentColor" />
+        </h2>
+      </Link>
+    </nav>
   );
 };