Migrated from React to NextJS

client/pages/[channel]/index.tsx

@@ -0,0 +1,68 @@
+import { ArrowRightIcon, HeartIcon, UserIcon } from '@heroicons/react/24/outline';
+
+import Button from '../../components/Button';
+import ChatMessage from '../../components/ChatMessage';
+import Input from '../../components/Input';
+import { numFormatter } from '../../utils/format';
+import streams from '../../placeholder/GetStreams';
+import { NextPage } from 'next';
+import BrowseLayout from '../../components/BrowseLayout';
+
+const ChannelPage: NextPage = () => {
+  const stream = streams.data[1];
+
+  return (
+    <BrowseLayout>
+    <div className="flex-1 flex flex-row">
+      <div className="bg-neutral-900 flex-1">
+        <div className="w-full h-auto aspect-video bg-red-200 " />
+        <div className="flex flex-row p-4 space-x-3">
+          <div className="w-20 h-20 bg-yellow-300 rounded-full" />
+          <div className="flex-1">
+            <div className="flex flex-row justify-between items-center">
+              <div className="font-bold">{stream.user_name}</div>
+              <div>
+                <Button className="h-8 w-10">
+                  <HeartIcon className="text-gray-100 h-5 w-5 mx-auto" />
+                </Button>
+              </div>
+            </div>
+            <div className="flex flex-row justify-between items-center">
+              <div className="space-y-1">
+                <div className="font-bold">{stream.title}</div>
+                <div className="text-violet-400">{stream.game_name}</div>
+              </div>
+              <div className="flex flex-row items-center text-sm space-x-3">
+                <span>
+                  <UserIcon className="h-5 w-5 inline-block" />
+                  <span>{numFormatter.format(stream.viewer_count)}</span>
+                </span>
+                <span>{stream.started_at}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="bg-zinc-900 w-80 border-l border-l-zinc-700 flex flex-col">
+        <div className="flex flex-row justify-between items-center border-b border-b-zinc-700 p-2">
+          <Button variant="subtle" className="p-2">
+            <ArrowRightIcon className="w-4 h-4" />
+          </Button>
+          <p className="uppercase font-semibold text-sm">Stream Chat</p>
+          <div className="w-5" />
+        </div>
+        <div className="flex-1 overflow-scrollbar">
+          {new Array(60).fill(0).map((_, i) => (
+            <ChatMessage key={i} />
+          ))}
+        </div>
+        <div className="m-2">
+          <Input className="w-full p-2" placeholder="Send a message" />
+        </div>
+      </div>
+    </div>
+    </BrowseLayout>
+  );
+}
+
+export default ChannelPage;

client/pages/_app.tsx

@@ -0,0 +1,8 @@
+import '../styles/globals.css'
+import type { AppProps } from 'next/app'
+
+function MyApp({ Component, pageProps }: AppProps) {
+  return <Component {...pageProps} />
+}
+
+export default MyApp

client/pages/category/[categoryName].tsx

@@ -0,0 +1,26 @@
+import { categories } from '../../placeholder/SearchCategories';
+
+function ChannelPage() {
+  const category = categories.data[0];
+  return (
+    <div className="flex-1 flex flex-row">
+      <div className="bg-neutral-900 flex-1 text-gray-100">
+        <div className="max-w-[200rem] mx-12 mt-12">
+          <div className="flex flex-row items-center space-x-4">
+            <img src={category.box_art_url} alt={category.name} />
+            <div className="">
+              <h1>{category.name}</h1>
+              <div>
+                <p>
+                  <span>603K</span> Viewers * <span>20.8M</span> Followers
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default ChannelPage;

client/pages/login.tsx

@@ -0,0 +1,13 @@
+import { NextPage } from 'next';
+
+import LoginModal from '../components/LoginModal';
+
+const LoginPage: NextPage = () => {
+  return (
+    <div className="bg-neutral-900 w-screen h-screen">
+      <LoginModal isOpen={true} defaultPage={0} onClose={() => {}} />
+    </div>
+  );
+};
+
+export default LoginPage;

client/pages/signup.tsx

@@ -0,0 +1,13 @@
+
+import { NextPage } from 'next';
+import LoginModal from '../components/LoginModal';
+
+const SignupPage: NextPage = () => {
+  return (
+    <div className="bg-neutral-900 w-screen h-screen">
+      <LoginModal isOpen={true} defaultPage={1} onClose={() => {}} />
+    </div>
+  );
+};
+
+export default SignupPage;