feat: add typewriter on homepage(#212)

rupali-codes · Feb 17, 2023 · b08abea · b08abea · vercel · Feb 17, 2023
1 parent 153c52e
commit b08abea
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 5 deletions.
diff --git a/package.json b/package.json
@@ -27,7 +27,8 @@
     "react-icons": "^4.7.1",
     "react-spinners": "^0.13.8",
     "react-transition-state": "^2.1.0",
-    "typescript": "4.9.4"
+    "typescript": "4.9.4",
+    "typewriter-effect": "^2.19.0"
   },
   "devDependencies": {
     "autoprefixer": "^10.4.13",

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -2,8 +2,16 @@ import React from "react";
 import Head from "next/head";
 import Logo from "components/logo";
 import { TopBar } from "components/TopBar/TopBar";
-
+import TypewriterComponent from "typewriter-effect";
+import { sidebarData } from "../database/data";
 export default function Home() {
+  //storing sub categories names for using in typewriter effect
+  let subCategoriesNames:string[] = [];
+  sidebarData.forEach((c) => {
+      c.subcategory.forEach((a) =>{
+        subCategoriesNames.push(a.name.toUpperCase());
+      });
+    })
   return (
     <>
       <Head>
@@ -14,9 +22,22 @@ export default function Home() {
       </Head>
       <main className="lg:h-[calc(100vh-85px)] h-[calc(100vh-150px)] flex flex-col">
         <TopBar header="Home" />
-        <div className="m-auto md:text-7xl text-5xl gap-2 flex items-center justify-center">
-          <Logo />
-          <span>👾</span>
+        <div className=" m-auto flex flex-col  items-start gap-2">
+            <div className="m-auto md:text-7xl text-5xl gap-2 flex items-center justify-center">
+              <Logo />
+              <span>👾</span> 
+
+            </div>
+            <div className=" flex flex-col mt-6 justify-center items-start">
+            <p className="text-xl  ">Navigate through menu for</p>
+            <p className='text-xl text-violet-500'><TypewriterComponent  
+                  options={{
+                    strings: subCategoriesNames,
+                    autoStart: true,
+                    loop: true,
+                  }}
+                /></p>
+            </div>
         </div>
       </main>
     </>