refactor: fix typo + add code/result tabs

Author: Lukasss93

docs/usage/keyboards.md docs/usage/keyboards.mdxdocs/usage/keyboards.md renamed to docs/usage/keyboards.mdx

@@ -1,19 +1,25 @@
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
 # Keyboards
 
 Nutgram provides a better way to create keyboards.
 
 ## Inline Keyboard
 
-The `InlineKeyboard` class helps you to create inline keyboards.
+The `InlineKeyboardMarkup` class helps you to create inline keyboards.
 Here is an example:
 
+<Tabs>
+<TabItem value="code" label="Code" default>
+
 ```php
 $bot->onCommand('start', function(Nutgram $bot){
     $bot->sendMessage(
         text: 'Welcome!',
         reply_markup: InlineKeyboardMarkup::make()
             ->addRow(
-                InlineKeyboardButton::make('A', callback_data: 'type:a'), 
+                InlineKeyboardButton::make('A', callback_data: 'type:a'),
                 InlineKeyboardButton::make('B', callback_data: 'type:b')
             )
     );
@@ -32,15 +38,27 @@ $bot->onCallbackQueryData('type:b', function(Nutgram $bot){
 });
 ```
 
+</TabItem>
+
+<TabItem value="result" label="Result">
+
+![img](https://i.imgur.com/TC8RLoq.png)
+
+</TabItem>
+</Tabs>
+
 :::info
 To handle inline keyboard callbacks as a Menu, you can check the [Inline Menu](/docs/usage/inline_menu) section.
 :::
 
 ## Reply Keyboard
 
-The `ReplyKeyboard` class helps you to create reply keyboards.
+The `ReplyKeyboardMarkup` class helps you to create reply keyboards.
 Here is an example:
 
+<Tabs>
+<TabItem value="code" label="Code" default>
+
 ```php
 $bot->onCommand('start', function(Nutgram $bot){
     $bot->sendMessage(
@@ -61,6 +79,15 @@ $bot->onText('Give me animal!', function (Nutgram $bot) {
 });
 ```
 
+</TabItem>
+
+<TabItem value="result" label="Result">
+
+![img](https://i.imgur.com/3BZ9W8J.png)
+
+</TabItem>
+</Tabs>
+
 ### Optional keyboard parameters
 
 You can pass optional parameters to the `ReplyKeyboardMarkup` class:
@@ -80,6 +107,9 @@ Check the [Telegram API documentation](https://core.telegram.org/bots/api#replyk
 
 To remove the reply keyboard, you can use the `ReplyKeyboardRemove` class:
 
+<Tabs>
+<TabItem value="code" label="Code" default>
+
 ```php
 $bot->onCommand('cancel', function (Nutgram $bot) {
     $bot->sendMessage(
@@ -89,11 +119,23 @@ $bot->onCommand('cancel', function (Nutgram $bot) {
 });
 ```
 
+</TabItem>
+
+<TabItem value="result" label="Result">
+
+![img](https://i.imgur.com/cB2xQXv.gif)
+
+</TabItem>
+</Tabs>
+
 ## Force Reply
 
 The `ForceReply` class helps you to force the user to reply to a message.
 Here is an example:
 
+<Tabs>
+<TabItem value="code" label="Code" default>
+
 ```php
 $bot->onCommand('start', function(Nutgram $bot){
     $bot->sendMessage(
@@ -106,3 +148,12 @@ $bot->onCommand('start', function(Nutgram $bot){
     );
 });
 ```
+
+</TabItem>
+
+<TabItem value="result" label="Result">
+
+![img](https://i.imgur.com/0ZoAu2l.png)
+
+</TabItem>
+</Tabs>