Merge pull request #4 from ubq-testing/ui-upgrade

feat: ui upgrade
ubq-testing · Oct 14, 2023 · db2cbc2 · db2cbc2
2 parents 99dc6b8 + 9c87e85
commit db2cbc2
Show file tree

Hide file tree

Showing 9 changed files with 166 additions and 27 deletions.
diff --git a/app/components/dialogue.tsx b/app/components/dialogue.tsx
@@ -0,0 +1,10 @@
+import React from "react";
+
+export default function DialogueBox({ title, content }) {
+  return (
+    <div className="dialogue-box">
+      <h2>{title}</h2>
+      <p>{content}</p>
+    </div>
+  );
+}
diff --git a/app/components/navbar.tsx b/app/components/navbar.tsx
@@ -0,0 +1,17 @@
+import Link from "next/link";
+
+export default function NavBar() {
+  return (
+    <div className="flex items-center p-4 justify-center text-center gap-14 ">
+      <Link className="text-2xl font-bold" href="/">
+        Chat
+      </Link>
+      <Link className="text-2xl font-bold" href="/docs">
+        Data
+      </Link>
+      <Link className="text-2xl font-bold" href="/data">
+        Docs
+      </Link>
+    </div>
+  );
+}
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,11 +1,12 @@
-import './globals.css';
-import { Inter } from 'next/font/google';
+import NavBar from "./components/navbar";
+import "./globals.css";
+import { Inter } from "next/font/google";
 
-const inter = Inter({ subsets: ['latin'] });
+const inter = Inter({ subsets: ["latin"] });
 
 export const metadata = {
-  title: 'Create Next App',
-  description: 'Generated by create next app',
+  title: "Create Next App",
+  description: "Generated by create next app",
 };
 
 export default function RootLayout({
@@ -15,7 +16,10 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en">
-      <body className={inter.className}>{children}</body>
+      <body className={inter.className}>
+        <NavBar />
+        {children}
+      </body>
     </html>
   );
 }
diff --git a/app/page.tsx b/app/page.tsx
@@ -1,28 +1,30 @@
-'use client';
+"use client";
 
-import { useChat } from 'ai/react';
+import { useChat } from "ai/react";
 
-export default function Chat() {
+export default function Dual() {
   const { messages, input, handleInputChange, handleSubmit, data } = useChat();
   return (
-    <div className="flex flex-col w-full max-w-md py-24 mx-auto stretch">
-      {messages.length > 0
-        ? messages.map(m => (
-            <div key={m.id} className="whitespace-pre-wrap">
-              {m.role === 'user' ? 'User: ' : 'AI: '}
-              {m.content}
-            </div>
-          ))
-        : null}
+    <div className="flex">
+      <div className="flex flex-col w-full max-w-md py-24 mx-auto stretch">
+        {messages.length > 0
+          ? messages.map((m) => (
+              <div key={m.id} className="whitespace-pre-wrap">
+                {m.role === "user" ? "User: " : "AI: "}
+                {m.content}
+              </div>
+            ))
+          : null}
 
-      <form onSubmit={handleSubmit}>
-        <input
-          className="fixed bottom-0 w-full max-w-md p-2 mb-8 border border-gray-300 rounded shadow-xl"
-          value={input}
-          placeholder="Say something..."
-          onChange={handleInputChange}
-        />
-      </form>
+        <form onSubmit={handleSubmit}>
+          <input
+            className="fixed bottom-0 w-full max-w-md p-2 mb-8 border border-gray-300 rounded shadow-xl"
+            value={input}
+            placeholder="Say something..."
+            onChange={handleInputChange}
+          />
+        </form>
+      </div>
     </div>
   );
 }
diff --git a/app/tri-display/@data/page.tsx b/app/tri-display/@data/page.tsx
@@ -0,0 +1,19 @@
+import DialogueBox from "@/app/components/dialogue";
+import React from "react";
+
+const content = `
+This is just an example dialogue box that wil be used later.
+`;
+
+export default function DataPage() {
+  return (
+    <div>
+      <h1>Data Page</h1>
+      <p>This is the Data page content.</p>
+
+      <DialogueBox title="Dialogue Box 1" content={content} />
+
+      <DialogueBox title="Dialogue Box 2" content={content} />
+    </div>
+  );
+}
diff --git a/app/tri-display/@docs/page.tsx b/app/tri-display/@docs/page.tsx
@@ -0,0 +1,38 @@
+"use client";
+import React, { useEffect, useState } from "react";
+import ReactMarkdown from "react-markdown";
+
+const demoDoc = `
+# Docs Page
+
+[Google](www.google.com)
+
+- list 1 
+- list 2
+- list 3
+
+\`\` quote \`\` 
+
+\`\`\`javascript
+function example() {
+  return 'Hello, Markdown!';
+}
+\`\`\`
+`;
+
+export default function DocsPage() {
+  const [markdown, setMarkdown] = useState("");
+
+  useEffect(() => {
+    setMarkdown(demoDoc);
+  }, []);
+
+  return (
+    <div>
+      <h1>Docs Page</h1>
+      <div className="markdown-content">
+        <ReactMarkdown children={markdown} />
+      </div>
+    </div>
+  );
+}
diff --git a/app/tri-display/layout.tsx b/app/tri-display/layout.tsx
@@ -0,0 +1,18 @@
+export const metadata = {
+  title: "Create Next App",
+  description: "Generated by create next app",
+};
+
+export default function DualLayout(props: {
+  children: React.ReactNode;
+  data: React.ReactNode;
+  docs: React.ReactNode;
+}) {
+  return (
+    <div className="grid grid-cols-3 shrink">
+      {props.data}
+      {props.children}
+      {props.docs}
+    </div>
+  );
+}
diff --git a/app/tri-display/page.tsx b/app/tri-display/page.tsx
@@ -0,0 +1,30 @@
+"use client";
+
+import { useChat } from "ai/react";
+
+export default function Dual() {
+  const { messages, input, handleInputChange, handleSubmit, data } = useChat();
+  return (
+    <div className="flex">
+      <div className="flex flex-col w-full max-w-md py-24 mx-auto stretch">
+        {messages.length > 0
+          ? messages.map((m) => (
+              <div key={m.id} className="whitespace-pre-wrap">
+                {m.role === "user" ? "User: " : "AI: "}
+                {m.content}
+              </div>
+            ))
+          : null}
+
+        <form onSubmit={handleSubmit}>
+          <input
+            className="fixed bottom-0 w-full max-w-md p-2 mb-8 border border-gray-300 rounded shadow-xl"
+            value={input}
+            placeholder="Say something..."
+            onChange={handleInputChange}
+          />
+        </form>
+      </div>
+    </div>
+  );
+}
diff --git a/package.json b/package.json
@@ -13,7 +13,8 @@
     "next": "13.4.12",
     "openai": "4.11.0",
     "react": "18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-markdown": "^9.0.0"
   },
   "devDependencies": {
     "@types/node": "^17.0.12",