From 09819159369928396e67c352d4ba6c9c9ff827d7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kacper=20Kapu=C5=9Bciak?=
 <39658211+kacperkapusciak@users.noreply.github.com>
Date: Mon, 19 Feb 2024 15:50:48 +0100
Subject: [PATCH] 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
---
 .../GestureExamples/GestureExampleItem/index.tsx           | 7 +++++--
 .../GestureExamples/GestureExampleItem/styles.module.css   | 1 +
 docs/src/components/GestureFeatures/styles.module.css      | 1 +
 docs/src/components/Playground/index.tsx                   | 7 +++++++
 4 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/docs/src/components/GestureExamples/GestureExampleItem/index.tsx b/docs/src/components/GestureExamples/GestureExampleItem/index.tsx
index 213fb3f74c..a8820822e6 100644
--- 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
index db31a9c300..74a63dadb4 100644
--- 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
index 96f26bcd7f..f58300ea36 100644
--- 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
index 438a8d8ea3..2987fe3881 100644
--- 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>