All files converted to .tsx files under the app directory

- types for dashboard has been added - use of FC for enhancing ts integration within codebase
Girishbari · May 23, 2024 · fe23a6f · fe23a6f
1 parent 806fa65
commit fe23a6f
Show file tree

Hide file tree

Showing 6 changed files with 139 additions and 7 deletions.
diff --git a/apps/client/app/dashboard/page.js → apps/client/app/dashboard/page.tsx b/apps/client/app/dashboard/page.js → apps/client/app/dashboard/page.tsx
@@ -1,20 +1,22 @@
 "use client";
 
-import { useRef, useState } from "react";
-import Navbar from "../components/navbar"
+import { ChangeEvent, useRef, useState } from "react";
+import Navbar from "../navbar";
+import { InputInit } from "../types/dashboard";
 
 export default function form() {
-  const [inputData, setInputData] = useState({
+  const [inputData, setInputData] = useState<InputInit>({
     userText: "",
     customization: "",
     diffusionKey: "",
+    prompt: ""
   });
-  const [loading, setLoading] = useState();
-  const keyRef = useRef();
 
+  //LOADING variable has no initial value set... keeping false for instance
+  const [loading, setLoading] = useState<boolean>(false);
+  const keyRef = useRef<HTMLInputElement>(null);
 
-
-  function handleChange(e) {
+  function handleChange(e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) {
     const { name, value } = e.target;
     setInputData({ ...inputData, [name]: value });
   }
@@ -51,19 +53,24 @@ export default function form() {
 
   async function handleSubmit() {
     console.log(inputData);
+
     setLoading(true);
+
     try {
+
       if (inputData.prompt === "" || inputData.customization === "") {
         alert("data is not filled");
         return;
       }
+
       const response = await fetch("http://localhost:5000/", {
         method: "POST",
         headers: {
           "Content-Type": "application/json",
         },
         body: JSON.stringify(inputData),
       });
+
       if (response.ok) {
         console.log(response.statusText);
         alert
@@ -72,16 +79,19 @@ export default function form() {
         alert(response.statusText);
         throw new Error();
       }
+
     } catch (error) {
       console.log("error message => " + error);
     }
+
     setLoading(false);
 
   }
 
   return (
     <>
       <Navbar />
+
       <div className="form-control w-full max-w-lg px-4 text-center ">
         <div>
           <span className=" drop-shadow-[0_1.2px_1.2px_rgba(0,0,0,0.8)]  text-[28px] tracking-wide font-bold">

diff --git a/apps/client/app/intro.tsx b/apps/client/app/intro.tsx
@@ -0,0 +1,32 @@
+"use client"
+import { useRouter } from 'next/navigation';
+
+function intro() {
+
+  const router = useRouter();
+
+  return (
+    <>
+      <div className="flex justify-start gap-5 hero-content text-center text-neutral-content">
+        <div className="min-w-xl">
+          <h1
+            className="mb-5 text-8xl font-bold drop-shadow-[0_1.2px_1.2px_rgba(0,0,0,0.8)]
+        text-white tracking-wider"
+          >
+            Comic-cult
+          </h1>
+          <p className="mb-5 drop-shadow-[0_1.2px_1.2px_rgba(0,0,0,0.8)] text-white tracking-wide text-2xl">
+            "redbull gives you wings we give a comic" <br />
+            provide us your story we'll generate amazing art just like you
+            see any comics <br />
+            <span>See Examples from Navigation bar</span>
+          </p>
+          <button className="btn btn-accent text-2xl tracking-wide" onClick={() => router.push
+            ('/dashboard')} >Get Started</button>
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default intro;
diff --git a/apps/client/app/layout.tsx b/apps/client/app/layout.tsx
@@ -0,0 +1,39 @@
+import { Bangers } from "next/font/google";
+import "./globals.css";
+import Navbar from "./navbar";
+import { Metadata } from "next";
+import { FC, ReactNode } from "react";
+
+const play = Bangers({
+  weight: ["400"],
+  style: ["normal"],
+  subsets: ["latin"],
+  display: "swap",
+});
+
+export const metadata: Metadata = {
+  title: "Comic-cult transform your Ideas ",
+  description:
+    "ever thought of bringing your imagination into real I am talking",
+};
+
+const RootLayout: FC<{ children: ReactNode }> = ({ children }) => {
+  return (
+    <html lang="en">
+
+      <body className={play.className}>
+
+        <div className="relative hero min-h-screen bg-[url('./assets/c2.jpg')]">
+
+          <div className=" hero-overlay bg-opacity-60"></div>
+
+          <Navbar />
+          {children}
+
+        </div>
+      </body>
+    </html>
+  );
+}
+
+export default RootLayout;
diff --git a/apps/client/app/navbar.tsx b/apps/client/app/navbar.tsx
@@ -0,0 +1,35 @@
+import Link from "next/link"
+
+export default function navbar() {
+  return (
+    <div className=" fixed top-0 navbar bg-base-200 md:px-7">
+      <div className="navbar-start">
+        <Link className="btn btn-ghost text-xl" href={"/"}>Comic-Cult</Link>
+      </div>
+      <div className="max-md:hidden  navbar-end gap-5">
+        <Link className="link link-error " href='https://political-pencil-5b5.notion.site/Some-comic-cult-examples-6d6afb1372fe42dab033ec1fe26644b0' target='_blank'>examples</Link>
+        <a className="link link-error ">How to use ?</a>
+        <a className="btn btn-success">Get Started</a>
+
+      </div>
+      {/* Mobile navbar */}
+      <div className='md:hidden navbar-end'>
+        <div className="flex-none dropdown dropdown-bottom dropdown-end  ">
+          <button className="btn btn-square btn-ghost">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" className="inline-block w-5 h-5 stroke-current"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"></path></svg>
+          </button>
+          <ul tabIndex={0} className="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52">
+            <li>
+              <Link className="link link-error " href='https://political-pencil-5b5.notion.site/Some-comic-cult-examples-6d6afb1372fe42dab033ec1fe26644b0' target='_blank'>examples</Link></li>
+            <li>
+              <a className="link link-error ">How to use ?</a>
+            </li>
+            <li>
+              <a className="btn btn-success">Get Started</a>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/client/app/page.tsx b/apps/client/app/page.tsx
@@ -0,0 +1,10 @@
+
+import Intro from "./intro";
+
+export default function Home() {
+  return (
+    <div>
+      <Intro />
+    </div>
+  );
+}
diff --git a/apps/client/app/types/dashboard.d.ts b/apps/client/app/types/dashboard.d.ts
@@ -0,0 +1,6 @@
+export interface InputInit {
+  userText: string
+  customization: string
+  diffusionKey: string
+  prompt: string
+}