Add handle component docs

Author: MatiPl01

packages/docs/docs/grid/examples/handle.mdx

@@ -0,0 +1 @@
+# TODO

packages/docs/docs/helper-components/handle.mdx

@@ -0,0 +1,54 @@
+---
+sidebar_position: 1
+description: 'Component that allows to drag an item by a specific area'
+---
+
+# Handle
+
+## Overview
+
+The **Handle** component allows you to drag an item by a specific area (part of the item) instead of the whole item.
+
+## Usage
+
+:::info
+
+For the complete usage example, refer to the [Handle](/grid/examples/handle) example.
+
+:::
+
+Use this component within a sortable component's child (item) component.
+
+```tsx
+import Sortable from 'react-native-sortables';
+
+// ... other components
+<Sortable.Handle>
+  {/* ... other components */}
+  <HandleComponent />
+  {/* ... other components */}
+</Sortable.Handle>;
+// ... other components
+```
+
+## Props
+
+### mode
+
+Determines the reordering behavior of the item.
+
+| type                                        | default       | required |
+| ------------------------------------------- | ------------- | -------- |
+| `'draggable' \| 'fixed' \| 'non-draggable'` | `'draggable'` | NO       |
+
+- `'draggable'` - the item **can be dragged** and **moves** when other items are reordered.
+- `'non-draggable'` - the item **cannot be dragged** but **moves** when other items are reordered.
+- `'fixed'` - the item **cannot be dragged** and **does not move** when other items are reordered.
+
+### children
+
+The handle component (can be anything, e.g. an icon, image, etc.).
+
+| type        | default | required |
+| ----------- | ------- | -------- |
+| `ReactNode` | NO      | NO       |

packages/docs/docs/helper-components/layer.mdx

@@ -1,6 +1,6 @@
 ---
-sidebar_position: 1
-description: ''
+sidebar_position: 3
+description: 'Component managing zIndex when an item is being dragged'
 ---
 
 # Layer
@@ -31,19 +31,15 @@ The **Sortable Layer** component should be used only when necessary, i.e. if you
 ```tsx
 import Sortable from 'react-native-sortables';
 
-function MyComponent() {
-  return (
-    // ... other components
-    <Sortable.Layer>
-      {/* ... other components */}
-      <Sortable.Grid // or Sortable.Flex
-      // ... sortable grid props
-      />
-      {/* ... other components */}
-    </Sortable.Layer>
-    // ... other components
-  );
-}
+// ... other components
+<Sortable.Layer>
+  {/* ... other components */}
+  <Sortable.Grid // or Sortable.Flex
+  // ... sortable grid props
+  />
+  {/* ... other components */}
+</Sortable.Layer>;
+// ... other components
 ```
 
 ## Props

packages/docs/docs/helper-components/touchables.mdx

@@ -1,6 +1,6 @@
 ---
 sidebar_position: 2
-description: ''
+description: 'Components that work well with sortable component gesture detectors'
 ---
 
 # Touchables
@@ -24,45 +24,25 @@ Use these components when you need to add **interactive elements** (buttons, lin
 
 ## Usage
 
-Use these components withing a sortable component's child (item) component.
+:::info
 
-```tsx
-import Sortable from 'react-native-sortables';
+For the complete usage example, refer to the [Touchables](/grid/examples/touchables) example.
 
-function Item({ item }: { item: string }) {
-  return (
-    // ... other components
-    <Sortable.Pressable
-      onPress={() => {
-        console.log('pressed');
-      }}>
-      {/* ... other components */}
-    </Sortable.Pressable>
-    // ... other components
-  );
-}
-```
+:::
 
-And, for example, if you use the **Sortable Grid** component:
+Use these components withing a sortable component's child (item) component.
 
 ```tsx
-import { useCallback } from 'react';
 import Sortable from 'react-native-sortables';
-import type { SortableGridRenderItem } from 'react-native-sortables';
-
-export default function Grid() {
-  const renderItem = useCallback<SortableGridRenderItem<string>>(
-    ({ item }) => <Item item={item} />,
-    []
-  );
-
-  return (
-    <Sortable.Grid
-      renderItem={renderItem}
-      // ... other props
-    />
-  );
-}
+
+// ... other components
+<Sortable.Pressable
+  onPress={() => {
+    console.log('pressed');
+  }}>
+  {/* ... other components */}
+</Sortable.Pressable>;
+// ... other components
 ```
 
 ## Props