📝 Updated Tabs page of docs to have hover effect

Etesam913 · Nov 11, 2023 · 1e8b585 · 1e8b585
1 parent 2b5e281
commit 1e8b585
Show file tree

Hide file tree

Showing 9 changed files with 82 additions and 71 deletions.
diff --git a/apps/docs/components/tabs.tsx b/apps/docs/components/tabs.tsx
@@ -45,24 +45,30 @@ export function UnderlineTabs(): JSX.Element {
   );
 }
 
-const pillTabs = ["Hobbies", "Work", "Projects", "Languages"];
+const pillTabs = [
+  "Hobbies",
+  "Work",
+  "Projects",
+  "This is a loooooooooong item",
+  "Languages",
+];
 
 export function PillTabs(): JSX.Element {
-  const [selectedIndex, setSelectedIndex] = useState(1);
+  const [hoveredIndex, setHoveredIndex] = useState(0);
 
   const tabsComponents = pillTabs.map((text, i) => {
     return (
       <button
         type="button"
         key={text}
-        onClick={() => setSelectedIndex(i)}
+        onMouseEnter={() => setHoveredIndex(i)}
         style={{
           position: "relative",
           padding: "0.65rem 0.75rem",
           color: "currentColor",
         }}
       >
-        {selectedIndex === i && (
+        {hoveredIndex === i && (
           <MagicTabSelect
             id="pillTabs"
             transition={{ type: "spring", bounce: 0.35 }}

diff --git a/apps/docs/pages/License.mdx b/apps/docs/pages/License.mdx
@@ -1,4 +1,4 @@
-# MIT License
+## MIT License
 
 Copyright (c) 2023 Etesam Ansari
 

diff --git a/apps/docs/pages/applications/accordion.mdx b/apps/docs/pages/applications/accordion.mdx
@@ -1,5 +1,4 @@
 import { Accordion } from "../../components/accordion";
-import { MagicMotion } from "react-magic-motion";
 import { ExampleComponent } from "../../components/example-component";
 
 # Accordion

diff --git a/apps/docs/pages/applications/grid-area.mdx b/apps/docs/pages/applications/grid-area.mdx
@@ -1,6 +1,6 @@
 import { GridArea } from "../../components/grid-area";
 
-# Grid Area
+## Grid Area
 
 ### Example
 

diff --git a/apps/docs/pages/applications/index.mdx b/apps/docs/pages/applications/index.mdx
@@ -1,4 +1,3 @@
-import { Callout } from "nextra/components";
 import { ExampleComponent } from "../../components/example-component";
 import { TodoList } from "../../components/todo-list";
 

diff --git a/apps/docs/pages/applications/tabs.mdx b/apps/docs/pages/applications/tabs.mdx
@@ -2,6 +2,75 @@ import { UnderlineTabs, PillTabs } from "../../components/tabs";
 
 # Tabs
 
+### Pill Example
+
+<PillTabs />
+
+#### Sample Code
+
+```jsx filename="Pill Tabs" copy showLineNumbers
+import { useState } from "react";
+import { MagicTabSelect } from "react-magic-motion";
+
+const pillTabs = [
+  "Hobbies",
+  "Work",
+  "Projects",
+  "This is a loooooooooong item",
+  "Languages",
+];
+
+export function PillTabs() {
+  const [hoveredIndex, setHoveredIndex] = useState(1);
+
+  const tabsComponents = pillTabs.map((text, i) => {
+    return (
+      <button
+        key={text}
+        onMouseEnter={() => setHoveredIndex(i)}
+        style={{
+          position: "relative",
+          padding: "0.65rem 0.75rem",
+          backgroundColor: "black",
+          color: "white",
+          border: 0,
+          borderRadius: "999px"
+        }}
+      >
+        {hoveredIndex === i && (
+          <MagicTabSelect
+            id="pillTabs"
+            transition={{ type: "spring", bounce: 0.35 }}
+          >
+            <span
+              style={{
+                borderRadius: "999px",
+                position: "absolute",
+                top: 0,
+                left: 0,
+                right: 0,
+                bottom: 0,
+                zIndex: 10,
+                backgroundColor: "white",
+                mixBlendMode: "difference"
+              }}
+            />
+          </MagicTabSelect>
+        )}
+        {text}
+      </button>
+    );
+  });
+
+  return (
+    <div style={{ display: "flex", gap: "0.75rem", margin: "0.75rem 0" }}>
+      {tabsComponents}
+    </div>
+  );
+}
+```
+
+
 ### Underline Example
 
 <UnderlineTabs />
@@ -57,62 +126,3 @@ export default function UnderlineTabs() {
 }
 ```
 
-### Pill Example
-
-<PillTabs />
-
-#### Sample Code
-
-```jsx filename="Pill Tabs" copy showLineNumbers
-import { useState } from "react";
-import { MagicTabSelect } from "react-magic-motion";
-
-const pillTabs = ["Hobbies", "Work", "Projects", "Languages"];
-
-export function PillTabs() {
-  const [selectedIndex, setSelectedIndex] = useState(1);
-
-  const tabsComponents = pillTabs.map((text, i) => {
-    return (
-      <button
-        key={text}
-        onClick={() => setSelectedIndex(i)}
-        style={{
-          position: "relative",
-          padding: "0.65rem 0.75rem",
-          backgroundColor: "black",
-          color: "white",
-        }}
-      >
-        {selectedIndex === i && (
-          <MagicTabSelect
-            id="pillTabs"
-            transition={{ type: "spring", bounce: 0.35 }}
-          >
-            <span
-              style={{
-                borderRadius: "999px",
-                position: "absolute",
-                top: 0,
-                left: 0,
-                right: 0,
-                bottom: 0,
-                zIndex: 10,
-                backgroundColor: "white",
-                mixBlendMode: "difference",
-              }}
-            />
-          </MagicTabSelect>
-        )}
-        {text}
-      </button>
-    );
-  });
-
-  return (
-    <div style={{ display: "flex", gap: "0.75rem", margin: "0.75rem 0" }}>
-      {tabsComponents}
-    </div>
-  );
-}
-```
diff --git a/apps/docs/pages/components/magic-card.mdx b/apps/docs/pages/components/magic-card.mdx
@@ -1,4 +1,4 @@
-# `<MagicCard />`
+## `<MagicCard />`
 
 ### Overview
 

diff --git a/apps/docs/pages/guides/index.mdx b/apps/docs/pages/guides/index.mdx
@@ -1,6 +1,4 @@
 import { TodoListWithExit } from "../../components/todo-list-with-exit-anim";
-import { SearchWithExit } from "../../components/search-with-exit-anim";
-import { Callout } from "nextra/components";
 
 # Adding Exit Animations
 

diff --git a/apps/docs/pages/index.mdx b/apps/docs/pages/index.mdx
@@ -1,5 +1,4 @@
 import { MyGoals } from "../components/my-goals";
-import { MagicMotion } from "react-magic-motion";
 
 <div style={{display: "flex", margin: "1.5rem 0 2rem", gap: "0.85rem"}}>
 <img