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 ( <>
-

{title}

+ + {title} +
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: , + href: 'docs/gestures/pan-gesture', }, { title: 'Gesture.Tap()', component: , + href: 'docs/gestures/tap-gesture', }, { title: 'Gesture.Rotation()', component: , + href: 'docs/gestures/rotation-gesture', }, { title: 'Gesture.Fling()', component: , + href: 'docs/gestures/fling-gesture', }, { title: 'Gesture.LongPress()', component: , + href: 'docs/gestures/long-press-gesture', }, { title: 'Gesture.Pinch()', component: , + href: 'docs/gestures/pinch-gesture', }, ]; @@ -51,6 +57,7 @@ const Playground = () => { idx={idx} title={example.title} component={example.component} + href={example.href} /> ))}