fixed some UI bugs

januff · Jan 15, 2023 · b4e99d0 · b4e99d0
1 parent d749d14
commit b4e99d0
Show file tree

Hide file tree

Showing 6 changed files with 131 additions and 100 deletions.
diff --git a/README.md b/README.md
@@ -1,31 +1,21 @@
-# Next.js + Tailwind CSS Example
-
-This example shows how to use [Tailwind CSS](https://tailwindcss.com/) [(v3.2)](https://tailwindcss.com/blog/tailwindcss-v3-2) with Next.js. It follows the steps outlined in the official [Tailwind docs](https://tailwindcss.com/docs/guides/nextjs).
-
-## Deploy your own
-
-Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-tailwindcss)
-
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-tailwindcss&project-name=with-tailwindcss&repository-name=with-tailwindcss)
-
-## How to use
-
-Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init), [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/), or [pnpm](https://pnpm.io) to bootstrap the example:
-
-```bash
-npx create-next-app --example with-tailwindcss with-tailwindcss-app
-```
-
-```bash
-yarn create next-app --example with-tailwindcss with-tailwindcss-app
-```
-
-```bash
-pnpm create next-app --example with-tailwindcss with-tailwindcss-app
-```
-
-Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).
-
-Make coming soon page with
-
-Maybe add "Job" to another dropdown
+# TwitterBio
+
+## Todos v1
+
+- [x] v1 of desktop UI
+- [x] v1 of edge functions working
+- [ ] Optimize for mobile
+- [ ] Push it to Vercel github repo and deploy to Vercel
+- [ ] Check lighthouse scores and optimize
+
+## Todos v2
+
+- [ ] Clean up code for generatebio function, create helper for that + for backend
+- [ ] Make 'active' work in dropdown
+- [ ] Make console.logs pretty and tell folks they can look at them, maybe through tooltip on the loading button
+- [ ] Can try doing the same thing with a serverless function and running benchmarks
+- [ ] Maybe generate 3 variations and position them more creatively on desktop
+- [ ] Make better README
+- [ ] Add to templates marketplace
+- [ ] Launch on Twitter
+- [ ] Write blog post
diff --git a/components/DropDown.tsx b/components/DropDown.tsx
@@ -6,7 +6,6 @@ function classNames(...classes: string[]) {
   return classes.filter(Boolean).join(" ");
 }
 
-// TODO: Make sure 'active' is working
 export default function DropDown({ vibe, setVibe }: any) {
   return (
     <Menu as="div" className="relative block text-left w-full">

diff --git a/components/ResizablePanel.tsx b/components/ResizablePanel.tsx
@@ -15,7 +15,14 @@ export default function ResizablePanel({
       className="relative w-full overflow-hidden"
       transition={{ type: "tween", duration: 0.5 }}
     >
-      <div ref={ref} className={height ? "absolute inset-x-0" : "relative"}>
+      <div
+        ref={ref}
+        className={
+          height
+            ? "absolute inset-x-0 top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
+            : "relative"
+        }
+      >
         {children}
       </div>
     </motion.div>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -15,6 +15,7 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-hook-form": "^7.42.0",
+    "react-hot-toast": "^2.4.0",
     "react-use-measure": "^2.1.1"
   },
   "devDependencies": {

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -3,19 +3,14 @@ import type { NextPage } from "next";
 import Head from "next/head";
 import Image from "next/image";
 import { useState } from "react";
+import { Toaster, toast } from "react-hot-toast";
 import DropDown from "../components/DropDown";
 import Footer from "../components/Footer";
 import Github from "../components/GitHub";
 import Header from "../components/Header";
 import LoadingDots from "../components/LoadingDots";
 import ResizablePanel from "../components/ResizablePanel";
 
-// TODO: Optimize for mobile
-// TODO: Push it to Vercel github repo and deploy to Vercel
-// TODO: Check lighthouse scores and optimize
-// TODO: Make console.logs pretty and tell folks they can look at them, maybe through tooltip on the loading button
-// TODO: Test on mobile
-
 const Home: NextPage = () => {
   const [loading, setLoading] = useState(false);
   const [bio, setBio] = useState("");
@@ -24,7 +19,6 @@ const Home: NextPage = () => {
   >("Professional Vibe");
   const [generatedBios, setGeneratedBios] = useState<String>("");
 
-  // TODO: Clean up code for this
   const generateBio = async (e: any) => {
     e.preventDefault();
     setGeneratedBios("");
@@ -128,76 +122,80 @@ const Home: NextPage = () => {
         <h1 className="text-6xl max-w-2xl font-bold text-slate-900">
           Generate your next Twitter bio in seconds
         </h1>
-        {/* TODO: Make sure Resizable panel is centered */}
+        <div className="max-w-xl">
+          <div className="flex mt-10 items-center space-x-3">
+            <Image src="/1-black.png" width={30} height={30} alt="1 icon" />
+            <p className="">
+              Copy your current bio{" "}
+              <span className="text-slate-500">
+                (or write some sentences about yourself)
+              </span>
+              .
+            </p>
+          </div>
+          <textarea
+            value={bio}
+            onChange={(e) => setBio(e.target.value)}
+            rows={4}
+            className="w-full rounded-md border-gray-300 shadow-sm focus:border-black focus:ring-black my-5"
+            placeholder={
+              "Senior Developer Advocate @vercel. Tweeting about web development, AI, and React / Next.js."
+            }
+          />
+          <div className="flex mb-5 items-center space-x-3">
+            <Image src="/2-black.png" width={30} height={30} alt="1 icon" />
+            <p className="">Select your vibe.</p>
+          </div>
+          <div className="block">
+            <DropDown vibe={vibe} setVibe={setVibe} />
+          </div>
+
+          {!loading && (
+            <button
+              className="bg-black rounded-xl text-white font-medium px-4 py-2 sm:mt-10 mt-8 hover:bg-black/80 w-full"
+              onClick={(e) => generateBio(e)}
+            >
+              Generate your bio &rarr;
+            </button>
+          )}
+          {loading && (
+            <button className="bg-black rounded-xl text-white font-medium px-4 py-2 sm:mt-10 mt-8 hover:bg-black/80 w-full">
+              <LoadingDots color="white" style="large" />
+            </button>
+          )}
+        </div>
+        <Toaster
+          position="top-center"
+          reverseOrder={false}
+          toastOptions={{ duration: 2000 }}
+        />
         <ResizablePanel>
-          <AnimatePresence exitBeforeEnter>
-            <motion.div className="max-w-xl">
-              <div className="flex mt-10 items-center space-x-3">
-                <Image src="/1-black.png" width={30} height={30} alt="1 icon" />
-                <p className="">
-                  Copy your current bio{" "}
-                  <span className="text-slate-500">
-                    (or write some sentences about yourself)
-                  </span>
-                  .
-                </p>
-              </div>
-              <textarea
-                value={bio}
-                onChange={(e) => setBio(e.target.value)}
-                rows={4}
-                className="w-full rounded-md border-gray-300 shadow-sm focus:border-black focus:ring-black my-5"
-                placeholder={
-                  "Senior Developer Advocate @vercel. Tweeting about web development, AI, and React / Next.js."
-                }
-              />
-              <div className="flex mb-5 items-center space-x-3">
-                <Image src="/2-black.png" width={30} height={30} alt="1 icon" />
-                <p className="">Select your vibe.</p>
-              </div>
-              <div className="block">
-                <DropDown vibe={vibe} setVibe={setVibe} />
-              </div>
-
-              {!loading && (
-                <button
-                  className="bg-black rounded-xl text-white font-medium px-4 py-2 sm:mt-10 mt-8 hover:bg-black/80 w-full"
-                  onClick={(e) => generateBio(e)}
-                >
-                  Generate your bio &rarr;
-                </button>
-              )}
-              {loading && (
-                <button className="bg-black rounded-xl text-white font-medium px-4 py-2 sm:mt-10 mt-8 hover:bg-black/80 w-full">
-                  <LoadingDots color="white" style="large" />
-                </button>
-              )}
-            </motion.div>
-            <div className="space-y-10 my-10 max-w-lg">
+          <AnimatePresence mode="wait">
+            <motion.div className="space-y-10 my-10">
               {generatedBios && !loading && (
-                <div className="space-y-5 flex flex-col items-center justify-center">
+                <div className="space-y-8 flex flex-col items-center justify-center">
                   {generatedBios
                     .substring(5)
                     .split("2.")
                     .map((generatedBio) => {
                       return (
-                        <div className="bg-white rounded-xl shadow-md p-4 hover:bg-gray-100 transition cursor-copy">
+                        <div
+                          className="bg-white rounded-xl shadow-md p-4 hover:bg-gray-100 transition cursor-copy"
+                          onClick={() => {
+                            navigator.clipboard.writeText(generatedBio);
+                            toast("Bio copied to clipboard", {
+                              icon: "✂️",
+                            });
+                          }}
+                          key={generatedBio}
+                        >
                           <p>{generatedBio}</p>
                         </div>
                       );
                     })}
                 </div>
               )}
-              {/* TODO: Make sure to split generatedBios into two things */}
-              {/* <p>
-            <b>Variation 1:</b> Professional coder by day, amateur pun-smith by
-            night. Come join me on my journey of turning 0s and 1s into humor!
-          </p>
-          <p>
-            <b>Variation 2:</b> Just a programmer looking to make the world a
-            funnier place one line of code at a time.
-          </p> */}
-            </div>
+            </motion.div>
           </AnimatePresence>
         </ResizablePanel>
       </main>