Add links to each gesture on landing in docs (#2763)

Added links to each gesture example on landing so its easier to explore the gestures in the docs https://github.com/software-mansion/react-native-gesture-handler/assets/39658211/01aef876-b078-41a3-bc25-120d0c8851c3
software-mansion · Feb 19, 2024 · 0981915 · 0981915
1 parent a3309b6
commit 0981915
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 2 deletions.
diff --git a/docs/src/components/GestureExamples/GestureExampleItem/index.tsx b/docs/src/components/GestureExamples/GestureExampleItem/index.tsx
@@ -6,13 +6,16 @@ interface Props {
   title: string;
   component?: React.ReactNode;
   idx: number;
+  href: string;
 }
 
-const GestureExampleItem = ({ title, component, idx }: Props) => {
+const GestureExampleItem = ({ title, component, idx, href }: Props) => {
   return (
     <>
       <div className={styles.exampleContainer}>
-        <h2 className={styles.title}>{title}</h2>
+        <a className={styles.title} href={href}>
+          {title}
+        </a>
         <div className={styles.interactiveExampleWrapper}>
           <InteractiveExampleComponent idx={idx} component={component} />
         </div>

diff --git a/docs/src/components/GestureExamples/GestureExampleItem/styles.module.css b/docs/src/components/GestureExamples/GestureExampleItem/styles.module.css
@@ -30,6 +30,7 @@
 .title {
   font-size: 20px;
   font-weight: 400;
+  display: block;
   text-align: center;
   margin-bottom: 2rem;
 }

diff --git a/docs/src/components/GestureFeatures/styles.module.css b/docs/src/components/GestureFeatures/styles.module.css
@@ -18,6 +18,7 @@
 [data-theme='dark'] .featuresButton:hover {
   background-color: var(--swm-purple-light-100);
   border-color: var(--swm-purple-light-100);
+  color: var(--swm-off-white);
 }
 
 .featuresButton svg {

diff --git a/docs/src/components/Playground/index.tsx b/docs/src/components/Playground/index.tsx
@@ -12,26 +12,32 @@ const examples = [
   {
     title: 'Gesture.Pan()',
     component: <PanExample />,
+    href: 'docs/gestures/pan-gesture',
   },
   {
     title: 'Gesture.Tap()',
     component: <TapExample />,
+    href: 'docs/gestures/tap-gesture',
   },
   {
     title: 'Gesture.Rotation()',
     component: <RotationExample />,
+    href: 'docs/gestures/rotation-gesture',
   },
   {
     title: 'Gesture.Fling()',
     component: <FlingExample />,
+    href: 'docs/gestures/fling-gesture',
   },
   {
     title: 'Gesture.LongPress()',
     component: <LongPressExample />,
+    href: 'docs/gestures/long-press-gesture',
   },
   {
     title: 'Gesture.Pinch()',
     component: <PinchExample />,
+    href: 'docs/gestures/pinch-gesture',
   },
 ];
 
@@ -51,6 +57,7 @@ const Playground = () => {
             idx={idx}
             title={example.title}
             component={example.component}
+            href={example.href}
           />
         ))}
       </div>