From d6ac2c6d2ecea2d932ad3d966cba8271c151c502 Mon Sep 17 00:00:00 2001 From: Hassan El Mghari Date: Wed, 1 Mar 2023 23:30:01 -0500 Subject: [PATCH] added scrolling down to bios when done generating --- components/ResizablePanel.tsx | 23 ----- package-lock.json | 185 ---------------------------------- package.json | 1 - pages/index.tsx | 86 ++++++++-------- 4 files changed, 45 insertions(+), 250 deletions(-) delete mode 100644 components/ResizablePanel.tsx diff --git a/components/ResizablePanel.tsx b/components/ResizablePanel.tsx deleted file mode 100644 index 04f61a92..00000000 --- a/components/ResizablePanel.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import { motion } from "framer-motion"; -import useMeasure from "react-use-measure"; - -export default function ResizablePanel({ - children, -}: { - children: React.ReactNode; -}) { - let [ref, { height }] = useMeasure(); - - return ( - -
- {children} -
- - ); -} diff --git a/package-lock.json b/package-lock.json index a2b7af7a..efd83c7d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,7 +11,6 @@ "@tailwindcss/forms": "^0.5.3", "@vercel/analytics": "^0.1.8", "eventsource-parser": "^0.0.5", - "framer-motion": "^8.4.3", "next": "latest", "react": "18.2.0", "react-dom": "18.2.0", @@ -29,21 +28,6 @@ "typescript": "4.9.4" } }, - "node_modules/@emotion/is-prop-valid": { - "version": "0.8.8", - "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz", - "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==", - "optional": true, - "dependencies": { - "@emotion/memoize": "0.7.4" - } - }, - "node_modules/@emotion/memoize": { - "version": "0.7.4", - "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz", - "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==", - "optional": true - }, "node_modules/@headlessui/react": { "version": "1.7.7", "resolved": "https://registry.npmjs.org/@headlessui/react/-/react-1.7.7.tgz", @@ -78,64 +62,6 @@ "react": ">= 16" } }, - "node_modules/@motionone/animation": { - "version": "10.15.1", - "resolved": "https://registry.npmjs.org/@motionone/animation/-/animation-10.15.1.tgz", - "integrity": "sha512-mZcJxLjHor+bhcPuIFErMDNyrdb2vJur8lSfMCsuCB4UyV8ILZLvK+t+pg56erv8ud9xQGK/1OGPt10agPrCyQ==", - "dependencies": { - "@motionone/easing": "^10.15.1", - "@motionone/types": "^10.15.1", - "@motionone/utils": "^10.15.1", - "tslib": "^2.3.1" - } - }, - "node_modules/@motionone/dom": { - "version": "10.15.5", - "resolved": "https://registry.npmjs.org/@motionone/dom/-/dom-10.15.5.tgz", - "integrity": "sha512-Xc5avlgyh3xukU9tydh9+8mB8+2zAq+WlLsC3eEIp7Ax7DnXgY7Bj/iv0a4X2R9z9ZFZiaXK3BO0xMYHKbAAdA==", - "dependencies": { - "@motionone/animation": "^10.15.1", - "@motionone/generators": "^10.15.1", - "@motionone/types": "^10.15.1", - "@motionone/utils": "^10.15.1", - "hey-listen": "^1.0.8", - "tslib": "^2.3.1" - } - }, - "node_modules/@motionone/easing": { - "version": "10.15.1", - "resolved": "https://registry.npmjs.org/@motionone/easing/-/easing-10.15.1.tgz", - "integrity": "sha512-6hIHBSV+ZVehf9dcKZLT7p5PEKHGhDwky2k8RKkmOvUoYP3S+dXsKupyZpqx5apjd9f+php4vXk4LuS+ADsrWw==", - "dependencies": { - "@motionone/utils": "^10.15.1", - "tslib": "^2.3.1" - } - }, - "node_modules/@motionone/generators": { - "version": "10.15.1", - "resolved": "https://registry.npmjs.org/@motionone/generators/-/generators-10.15.1.tgz", - "integrity": "sha512-67HLsvHJbw6cIbLA/o+gsm7h+6D4Sn7AUrB/GPxvujse1cGZ38F5H7DzoH7PhX+sjvtDnt2IhFYF2Zp1QTMKWQ==", - "dependencies": { - "@motionone/types": "^10.15.1", - "@motionone/utils": "^10.15.1", - "tslib": "^2.3.1" - } - }, - "node_modules/@motionone/types": { - "version": "10.15.1", - "resolved": "https://registry.npmjs.org/@motionone/types/-/types-10.15.1.tgz", - "integrity": "sha512-iIUd/EgUsRZGrvW0jqdst8st7zKTzS9EsKkP+6c6n4MPZoQHwiHuVtTQLD6Kp0bsBLhNzKIBlHXponn/SDT4hA==" - }, - "node_modules/@motionone/utils": { - "version": "10.15.1", - "resolved": "https://registry.npmjs.org/@motionone/utils/-/utils-10.15.1.tgz", - "integrity": "sha512-p0YncgU+iklvYr/Dq4NobTRdAPv9PveRDUXabPEeOjBLSO/1FNB2phNTZxOxpi1/GZwYpAoECEa0Wam+nsmhSw==", - "dependencies": { - "@motionone/types": "^10.15.1", - "hey-listen": "^1.0.8", - "tslib": "^2.3.1" - } - }, "node_modules/@next/env": { "version": "13.1.2", "resolved": "https://registry.npmjs.org/@next/env/-/env-13.1.2.tgz", @@ -792,23 +718,6 @@ "url": "https://www.patreon.com/infusion" } }, - "node_modules/framer-motion": { - "version": "8.4.3", - "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-8.4.3.tgz", - "integrity": "sha512-UMfJ8hEOlIObdJgI+U/VgaSSKY+W9/E0YtnFHPDsIE9rNPglaFZ+oycB0gj8ERuRBInGaIgNCFsil8iaJHZFgA==", - "dependencies": { - "@motionone/dom": "^10.15.3", - "hey-listen": "^1.0.8", - "tslib": "^2.4.0" - }, - "optionalDependencies": { - "@emotion/is-prop-valid": "^0.8.2" - }, - "peerDependencies": { - "react": "^18.0.0", - "react-dom": "^18.0.0" - } - }, "node_modules/fsevents": { "version": "2.3.2", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", @@ -860,11 +769,6 @@ "node": ">= 0.4.0" } }, - "node_modules/hey-listen": { - "version": "1.0.8", - "resolved": "https://registry.npmjs.org/hey-listen/-/hey-listen-1.0.8.tgz", - "integrity": "sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q==" - }, "node_modules/is-binary-path": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", @@ -1628,21 +1532,6 @@ } }, "dependencies": { - "@emotion/is-prop-valid": { - "version": "0.8.8", - "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz", - "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==", - "optional": true, - "requires": { - "@emotion/memoize": "0.7.4" - } - }, - "@emotion/memoize": { - "version": "0.7.4", - "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz", - "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==", - "optional": true - }, "@headlessui/react": { "version": "1.7.7", "resolved": "https://registry.npmjs.org/@headlessui/react/-/react-1.7.7.tgz", @@ -1663,64 +1552,6 @@ "integrity": "sha512-iSN5XwmagrnirWlYEWNPdCDj9aRYVD/lnK3JlsC9/+fqGF80k8C7rl+1HCvBX0dBoagKqOFBs6fMhJJ1hOg1EQ==", "requires": {} }, - "@motionone/animation": { - "version": "10.15.1", - "resolved": "https://registry.npmjs.org/@motionone/animation/-/animation-10.15.1.tgz", - "integrity": "sha512-mZcJxLjHor+bhcPuIFErMDNyrdb2vJur8lSfMCsuCB4UyV8ILZLvK+t+pg56erv8ud9xQGK/1OGPt10agPrCyQ==", - "requires": { - "@motionone/easing": "^10.15.1", - "@motionone/types": "^10.15.1", - "@motionone/utils": "^10.15.1", - "tslib": "^2.3.1" - } - }, - "@motionone/dom": { - "version": "10.15.5", - "resolved": "https://registry.npmjs.org/@motionone/dom/-/dom-10.15.5.tgz", - "integrity": "sha512-Xc5avlgyh3xukU9tydh9+8mB8+2zAq+WlLsC3eEIp7Ax7DnXgY7Bj/iv0a4X2R9z9ZFZiaXK3BO0xMYHKbAAdA==", - "requires": { - "@motionone/animation": "^10.15.1", - "@motionone/generators": "^10.15.1", - "@motionone/types": "^10.15.1", - "@motionone/utils": "^10.15.1", - "hey-listen": "^1.0.8", - "tslib": "^2.3.1" - } - }, - "@motionone/easing": { - "version": "10.15.1", - "resolved": "https://registry.npmjs.org/@motionone/easing/-/easing-10.15.1.tgz", - "integrity": "sha512-6hIHBSV+ZVehf9dcKZLT7p5PEKHGhDwky2k8RKkmOvUoYP3S+dXsKupyZpqx5apjd9f+php4vXk4LuS+ADsrWw==", - "requires": { - "@motionone/utils": "^10.15.1", - "tslib": "^2.3.1" - } - }, - "@motionone/generators": { - "version": "10.15.1", - "resolved": "https://registry.npmjs.org/@motionone/generators/-/generators-10.15.1.tgz", - "integrity": "sha512-67HLsvHJbw6cIbLA/o+gsm7h+6D4Sn7AUrB/GPxvujse1cGZ38F5H7DzoH7PhX+sjvtDnt2IhFYF2Zp1QTMKWQ==", - "requires": { - "@motionone/types": "^10.15.1", - "@motionone/utils": "^10.15.1", - "tslib": "^2.3.1" - } - }, - "@motionone/types": { - "version": "10.15.1", - "resolved": "https://registry.npmjs.org/@motionone/types/-/types-10.15.1.tgz", - "integrity": "sha512-iIUd/EgUsRZGrvW0jqdst8st7zKTzS9EsKkP+6c6n4MPZoQHwiHuVtTQLD6Kp0bsBLhNzKIBlHXponn/SDT4hA==" - }, - "@motionone/utils": { - "version": "10.15.1", - "resolved": "https://registry.npmjs.org/@motionone/utils/-/utils-10.15.1.tgz", - "integrity": "sha512-p0YncgU+iklvYr/Dq4NobTRdAPv9PveRDUXabPEeOjBLSO/1FNB2phNTZxOxpi1/GZwYpAoECEa0Wam+nsmhSw==", - "requires": { - "@motionone/types": "^10.15.1", - "hey-listen": "^1.0.8", - "tslib": "^2.3.1" - } - }, "@next/env": { "version": "13.1.2", "resolved": "https://registry.npmjs.org/@next/env/-/env-13.1.2.tgz", @@ -2099,17 +1930,6 @@ "integrity": "sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==", "dev": true }, - "framer-motion": { - "version": "8.4.3", - "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-8.4.3.tgz", - "integrity": "sha512-UMfJ8hEOlIObdJgI+U/VgaSSKY+W9/E0YtnFHPDsIE9rNPglaFZ+oycB0gj8ERuRBInGaIgNCFsil8iaJHZFgA==", - "requires": { - "@emotion/is-prop-valid": "^0.8.2", - "@motionone/dom": "^10.15.3", - "hey-listen": "^1.0.8", - "tslib": "^2.4.0" - } - }, "fsevents": { "version": "2.3.2", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", @@ -2143,11 +1963,6 @@ "function-bind": "^1.1.1" } }, - "hey-listen": { - "version": "1.0.8", - "resolved": "https://registry.npmjs.org/hey-listen/-/hey-listen-1.0.8.tgz", - "integrity": "sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q==" - }, "is-binary-path": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", diff --git a/package.json b/package.json index fe3ce025..d8f79330 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,6 @@ "@tailwindcss/forms": "^0.5.3", "@vercel/analytics": "^0.1.8", "eventsource-parser": "^0.0.5", - "framer-motion": "^8.4.3", "next": "latest", "react": "18.2.0", "react-dom": "18.2.0", diff --git a/pages/index.tsx b/pages/index.tsx index 0c0fc743..1e4bd116 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,15 +1,13 @@ -import { AnimatePresence, motion } from "framer-motion"; import type { NextPage } from "next"; import Head from "next/head"; import Image from "next/image"; -import { useState } from "react"; +import { useRef, useState } from "react"; import { Toaster, toast } from "react-hot-toast"; import DropDown, { VibeType } 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"; const Home: NextPage = () => { const [loading, setLoading] = useState(false); @@ -17,6 +15,14 @@ const Home: NextPage = () => { const [vibe, setVibe] = useState("Professional"); const [generatedBios, setGeneratedBios] = useState(""); + const bioRef = useRef(null); + + const scrollToBios = () => { + if (bioRef.current !== null) { + bioRef.current.scrollIntoView({ behavior: "smooth" }); + } + }; + const prompt = `Generate 2 ${vibe} twitter biographies with no hashtags and clearly labeled "1." and "2.". ${ vibe === "Funny" ? "Make sure there is a joke in there and it's a little ridiculous." @@ -39,7 +45,6 @@ const Home: NextPage = () => { prompt, }), }); - console.log("Edge function returned."); if (!response.ok) { throw new Error(response.statusText); @@ -61,7 +66,7 @@ const Home: NextPage = () => { const chunkValue = decoder.decode(value); setGeneratedBios((prev) => prev + chunkValue); } - + scrollToBios(); setLoading(false); }; @@ -144,42 +149,41 @@ const Home: NextPage = () => { toastOptions={{ duration: 2000 }} />
- - - - {generatedBios && ( - <> -
-

- Your generated bios -

-
-
- {generatedBios - .substring(generatedBios.indexOf("1") + 3) - .split("2.") - .map((generatedBio) => { - return ( -
{ - navigator.clipboard.writeText(generatedBio); - toast("Bio copied to clipboard", { - icon: "✂️", - }); - }} - key={generatedBio} - > -

{generatedBio}

-
- ); - })} -
- - )} - - - +
+ {generatedBios && ( + <> +
+

+ Your generated bios +

+
+
+ {generatedBios + .substring(generatedBios.indexOf("1") + 3) + .split("2.") + .map((generatedBio) => { + return ( +
{ + navigator.clipboard.writeText(generatedBio); + toast("Bio copied to clipboard", { + icon: "✂️", + }); + }} + key={generatedBio} + > +

{generatedBio}

+
+ ); + })} +
+ + )} +