type

Author: amitjimiwal

package-lock.json

@@ -20,6 +20,7 @@
     "axios": "^1.6.8",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
+    "framer-motion": "^11.1.7",
     "js-cookie": "^3.0.5",
     "lucide-react": "^0.350.0",
     "react": "^18.2.0",
@@ -31,10 +32,12 @@
     "react-router-dom": "^6.22.3",
     "tailwind-merge": "^2.2.1",
     "tailwindcss-animate": "^1.0.7",
+    "tailwindcss-animated": "^1.0.1",
     "zod": "^3.22.4"
   },
   "devDependencies": {
     "@types/js-cookie": "^3.0.6",
+    "@types/lodash": "^4.17.0",
     "@types/node": "^20.11.25",
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",
@@ -46,6 +49,7 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.3",
     "husky": "^9.0.11",
+    "lodash": "^4.17.21",
     "postcss": "^8.4.27",
     "tailwindcss": "^3.3.3",
     "typescript": "^5.0.2",

package.json

@@ -7,15 +7,22 @@ import Footer from "./components/Footer";
 import { useDispatch } from "react-redux";
 import { getUserInfo } from "./redux-store/slices/authSlice";
 import { AppDispatch } from "./redux-store/store";
+import { motion, useScroll } from "framer-motion";
 import { getSubscriptionInfo } from "./redux-store/slices/subscriptionslice";
 function App() {
+  const { scrollYProgress } = useScroll();
   const dispatch: AppDispatch = useDispatch();
+
   useEffect(() => {
     dispatch(getUserInfo());
     dispatch(getSubscriptionInfo());
   }, [dispatch]);
   return (
     <div className="min-h-screen w-full ">
+      <motion.div
+        className="fixed top-0 left-0 right-0 h-[5px] bg-red-500 origin-left z-50"
+        style={{ scaleX: scrollYProgress }}
+      />
       <Navbar />
       <ContentWrapper>
         <Outlet />

src/App.tsx

@@ -1,9 +1,15 @@
+import clsx from "clsx";
 import React from "react";
 interface Props {
   children: React.ReactNode;
+  props?: string;
 }
-const ContentWrapper: React.FC<Props> = ({ children }) => {
-  return <div className="max-w-7xl mx-auto px-8 py-12 min-h-screen">{children}</div>;
+const ContentWrapper: React.FC<Props> = ({ children, props }) => {
+  return (
+    <div className={clsx("max-w-7xl mx-auto px-8 py-12 min-h-screen", props)}>
+      {children}
+    </div>
+  );
 };
 
 export default ContentWrapper;

src/components/ContentWrapper.tsx

@@ -0,0 +1,9 @@
+import * as React from "react";
+
+export default function FadeAnimate({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return <div className="animate-fade-down">{children}</div>;
+}

src/components/FadeAnimateWrapper.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+
+const Control = () => {
+  return (
+    <nav className="w-full flex flex-col gap-5 p-3 sm:flex-row sm:justify-between sm:p-5 shadow-2xl rounded-xl border-2 border-gray-400">
+      <h1>TypeSight</h1>
+      <div className="flex justify-end gap-5">
+        <select className="px-3 rounded-xl bg-gray-200">
+          <option>30s</option>
+          <option>60s</option>
+        </select>
+        <select className="px-3 rounded-xl bg-gray-200">
+          <option>words</option>
+          <option>sentences</option>
+        </select>
+      </div>
+    </nav>
+  );
+};
+
+export default Control;

src/components/OnBoarding/OnBoarding.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+type TypeProps = {
+  text: string;
+};
+const Typing = ({ text }: TypeProps) => {
+  return <div>
+     {text}
+  </div>;
+};
+
+export default Typing;

src/components/Typing/Control.tsx

@@ -0,0 +1,2 @@
+
+

src/components/Typing/Typing.tsx

@@ -0,0 +1,48 @@
+[
+     "She had some amazing news to share but nobody to share it with.",
+     "The crowd yells and screams for more memes.",
+     "She found his complete dullness interesting.",
+     "The newly planted trees were held up by wooden frames in hopes they could survive the next storm.",
+     "You can't compare apples and oranges, but what about bananas and plantains?",
+     "He swore he just saw his sushi move.",
+     "He found the chocolate covered roaches quite tasty.",
+     "You have every right to be angry, but that doesn't give you the right to be mean.",
+     "The delicious smell came from the array of food at the buffet.",
+     "Brady met her gaze again, taking in the array of emotions crossing her features.",
+     "The array of vegetables at the flea market fascinated Wren.",
+     "If you go to the library, you will find books on an array of subjects.",
+     "It was thought advisable for me to have my examinations in a room by myself, because the noise of the typewriter might disturb the other girls.",
+     "I had made many mistakes, and Miss Sullivan had pointed them out again and again with gentle patience.",
+     "Think how much worse you'd feel if the town you visualized really existed.",
+     "It was always dangerous to drive with him since he insisted the safety cones were a slalom course.",
+     "The blue parrot drove by the hitchhiking mongoose.",
+     "If my calculator had a history, it would be more embarrassing than my browser history.",
+     "All she wanted was the answer, but she had no idea how much she would hate it.",
+     "In that instant, everything changed.",
+     "He learned the important lesson that a picnic at the beach on a windy day is a bad idea.",
+     "Potato wedges probably are not best for relationships.",
+     "People who insist on picking their teeth with their elbows are so annoying!",
+     "Whenever he saw a red flag warning at the beach he grabbed his surfboard.",
+     "Various sea birds are elegant, but nothing is as elegant as a gliding pelican.",
+     "The waves were crashing on the shore; it was a lovely sight.",
+     "When she didn't like a guy who was trying to pick her up, she started using sign language.",
+     "The hand sanitizer was actually clear glue.",
+     "Jeanne wished she has chosen the red button.",
+     "The river stole the gods.",
+     "Greetings from the galaxy MACS0647-JD, or what we call home.",
+     "Tuesdays are free if you bring a gnome costume.",
+     "Car safety systems have come a long way, but he was out to prove they could be outsmarted.",
+     "Thigh-high in the water, the fisherman's hope for dinner soon turned to despair.",
+     "His confidence would have bee admirable if it wasn't for his stupidity.",
+     "Some bathing suits just shouldn't be worn by some people.",
+     "They got there early, and they got really good seats.",
+     "He had unknowingly taken up sleepwalking as a nighttime hobby.",
+     "When she didn't like a guy who was trying to pick her up, she started using sign language.",
+     "She saw no irony asking me to change but wanting me to accept her for who she is.",
+     "She wanted a pet platypus but ended up getting a duck and a ferret instead.",
+     "Be careful with that butter knife.",
+     "The beauty of the African sunset disguised the danger lurking nearby.",
+     "The light in his life was actually a fire burning all around him.",
+     "Random words in front of other random words create a random sentence.",
+     "Red is greener than purple, for sure."
+   ]