docs: update website with example usages and readme

README.md

@@ -10,7 +10,7 @@ A performant, easy to use hold to open context menu for React Native powered by
 - Smooth interactions & animations.
 - Supports dark/light Mode. 🌚 🌝
 - Supports device orientation change.
-- Compatible with Expo. [CHECK]
+- Compatible with Expo.
 - Written in `TypeScript`.
 
 ## Getting Started

website/docs/examples.md

@@ -0,0 +1,154 @@
+---
+id: examples
+title: Examples
+slug: /examples
+---
+
+## Configuring List
+
+### Sample List
+
+**Code**
+
+```js
+<HoldItem
+  items={[
+    { text: 'Reply', onPress: () => {} },
+    { text: 'Edit', onPress: () => {} },
+    { text: 'Delete', onPress: () => {} },
+  ]}
+/>
+```
+
+**Result**
+
+![list-simple](/img/examples/list-simple.png)
+
+### List with title
+
+**Code**
+
+```js
+<HoldItem
+  items={[
+    { text: 'Actions', isTitle: true, onPress: () => {} },
+    { text: 'Reply', onPress: () => {} },
+    { text: 'Edit', onPress: () => {} },
+    { text: 'Delete', onPress: () => {} },
+  ]}
+/>
+```
+
+**Result**
+
+![list-with-title](/img/examples/list-with-title.png)
+
+### List with seperator
+
+**Code**
+
+```js
+<HoldItem
+  items={[
+    { text: 'Actions', isTitle: true, onPress: () => {} },
+    { text: 'Reply', onPress: () => {} },
+    { text: 'Edit', onPress: () => {} },
+    { text: 'Delete', withSeperator: true, onPress: () => {} },
+    { text: 'Share', onPress: () => {} },
+  ]}
+/>
+```
+
+**Result**
+
+![list-with-seperator](/img/examples/list-with-seperator.png)
+
+### List with destructive button
+
+**Code**
+
+```js
+<HoldItem
+  items={[
+    { text: 'Actions', isTitle: true, onPress: () => {} },
+    { text: 'Reply', onPress: () => {} },
+    { text: 'Edit', onPress: () => {} },
+    {
+      text: 'Delete',
+      withSeperator: true,
+      isDestructive: true,
+      onPress: () => {},
+    },
+    { text: 'Share', onPress: () => {} },
+  ]}
+/>
+```
+
+**Result**
+
+![list-with-destructive](/img/examples/list-with-destructive.png)
+
+### List with icons
+
+**Code**
+
+```js
+<HoldItem
+  items={[
+    { text: 'Action', isTitle: true, onPress: () => {} },
+    {
+      text: 'Home',
+      icon: () => <Icon name="home" size={18} />,
+      onPress: () => {},
+    },
+    {
+      text: 'Edit',
+      icon: () => <Icon name="edit" size={18} />,
+      onPress: () => {},
+    },
+    {
+      text: 'Delete',
+      icon: () => <Icon name="delete" size={18} />,
+      withSeperator: true,
+      isDestructive: true,
+      onPress: () => {},
+    },
+    {
+      text: 'Share',
+      icon: () => <Icon name="share" size={18} />,
+      onPress: () => {},
+    },
+    {
+      text: 'More',
+      icon: () => <Icon name="more-horizontal" size={18} />,
+      onPress: () => {},
+    },
+  ]}
+/>
+```
+
+**Result**
+
+![list-with-destructive](/img/examples/list-with-icons.png)
+
+<!-- ## Configuring Hold Item -->
+
+<!-- ## Menu from bottom
+
+**Code**
+
+```js
+<HoldItem
+  bottom
+  items={[
+    { text: 'Action', isTitle: true, onPress: () => {} },
+    { text: 'Action 1', onPress: () => {} },
+    { text: 'Action 2', withSeperator: true, onPress: () => {} },
+    { text: 'Action 3', isDestructive: true, onPress: () => {} },
+  ]}
+/>
+```
+
+**Result**
+
+![sample-menu](/img/og.png) -->

website/docs/getting-started.md

@@ -32,7 +32,7 @@ yarn add react-native-hold-menu
 This library needs these dependencies to be installed in your project before you can use it:
 
 ```bash
-yarn add [email protected].2 react-native-gesture-handler
+yarn add [email protected].0 react-native-gesture-handler
 ```
 
 :::info

website/docs/props.md

@@ -10,11 +10,14 @@ slug: /props
 
 Array of menu items.
 
-| name    | type                          | required |
-| ------- | ----------------------------- | -------- |
-| title   | string                        | YES      |
-| icon    | () => React.ReactNode \| null | NO       |
-| onPress | function                      | YES      |
+| name          | type                          | required |
+| ------------- | ----------------------------- | -------- |
+| text          | string                        | YES      |
+| icon          | () => React.ReactNode \| null | NO       |
+| onPress       | function                      | YES      |
+| isTitle       | boolean                       | NO       |
+| isDestructive | boolean                       | NO       |
+| withSeperator | boolean                       | NO       |
 
 #### Example
 
@@ -27,6 +30,8 @@ Array of menu items.
 />
 ```
 
+Check out the other examples [here](examples).
+
 ### `menuAnchorPosition`
 
 Menu anchor position is calculated automaticly. But you can override the calculation by passing an anchor position.

website/docs/usage.md

@@ -3,28 +3,23 @@ id: usage
 title: Usage
 slug: /usage
 hide_table_of_contents: true
+hide_title: true
 ---
 
 ## Usage
 
 Before using Hold Menu in your application, you need to wrap your app with `HoldMenuProvider` first.
 
 ```tsx
-import 'react-native-gesture-handler';
-
 import React from 'react';
 
-import { NavigationContainer } from '@react-navigation/native';
-
 // Hold Menu
 import { HoldMenuProvider } from 'react-native-hold-menu';
 
 const App = () => {
   return (
     <HoldMenuProvider theme="light">
-      <NavigationContainer>
-        {/* Your navigation components */}
-      </NavigationContainer>
+      {/* Your app components */}
     </HoldMenuProvider>
   );
 };
@@ -43,9 +38,10 @@ import { HoldItem } from 'react-native-hold-menu';
 import styles from './styles';
 
 const MenuItems = [
-  { text: 'Action 1', icon: null, onPress: () => {} },
-  { text: 'Action 2', icon: null, onPress: () => {} },
-  { text: 'Action 3', icon: null, onPress: () => {} },
+  { text: 'Actions', isTitle: true, onPress: () => {} },
+  { text: 'Action 1', onPress: () => {} },
+  { text: 'Action 2', withSeperator: true, onPress: () => {} },
+  { text: 'Action 3', isDestructive: true, onPress: () => {} },
 ];
 
 const Example = () => {

website/sidebars.js

@@ -1,5 +1,5 @@
 module.exports = {
   someSidebar: {
-    Documents: ['getting-started', 'usage', 'props'],
+    Documents: ['getting-started', 'usage', 'props', 'examples'],
   },
 };