docs: move real world examples their own storybook page

README.md

@@ -86,9 +86,7 @@ export const Example = () => {
 
 ## Real World Examples
 
-- [Upscayl, Free and Open Source AI Image Upscaler](https://github.com/upscayl/upscayl#free-and-open-source-ai-image-upscaler)
-- [Official GOV.UK Coronavirus Dashboard](https://coronavirus.data.gov.uk/details/interactive-map/vaccinations#vaccinations-map-container)
-- [Counter-Strike 2 Website](https://www.counter-strike.net/cs2#Maps)
+Checkout out the [Real World Examples page](https://react-compare-slider.vercel.app/?path=/docs/docs-real-world-examples--docs).
 
 ## Requirements
 

docs/storybook/content/03-handles.stories.mdx

@@ -1,4 +1,4 @@
-import { Canvas, ArgsTable, Meta, Story } from '@storybook/blocks';
+import { Canvas, ArgTypes, Meta, Story } from '@storybook/blocks';
 
 import { ReactCompareSliderHandle } from 'react-compare-slider';
 
@@ -8,7 +8,7 @@ import { ReactCompareSliderHandle } from 'react-compare-slider';
 
 <p class="sb-custom-info">
 
-**Note**: You should use a non-interactive elements (`div`, `span`, etc.) for custom `handle` 
+**Note**: You should use a non-interactive elements (`div`, `span`, etc.) for custom `handle`
 components as handles are rendered within a `button` by the library.
 
 </p>
@@ -22,8 +22,8 @@ be used instead.
 ### `ReactCompareSliderHandle`
 
 `ReactCompareSliderHandle` supports the `portrait` prop to automatically flip
-itself to match the desired orientation. It also has individual props and class names to 
-style the lines and button and accepts any valid `div` component props so you can easily 
+itself to match the desired orientation. It also has individual props and class names to
+style the lines and button and accepts any valid `div` component props so you can easily
 customize it to fit your requirements.
 
 #### CSS `className`
@@ -36,12 +36,12 @@ customize it to fit your requirements.
 
 #### Props
 
-<ArgsTable of={ReactCompareSliderHandle} />
+<ArgTypes of={ReactCompareSliderHandle} />
 
 ### Custom `ReactCompareSliderHandle` usage
 
 The colors used in `ReactCompareSliderHandle` are inherited from the root element's `color`
-property using the `currentColor` keyword (except for `boxShadow`). 
+property using the `currentColor` keyword (except for `boxShadow`).
 To set all colors in sync just change the `style` property or use the `.__rcs-handle-root` class.
 
 <Canvas>
@@ -50,12 +50,10 @@ To set all colors in sync just change the `style` property or use the `.__rcs-ha
 
 ### Custom Standalone Handle Usage
 
-
 <Canvas>
-  <Story id="handles-customcomponent--custom-component" />
+  <Story id="handles-custom-component--custom-component" />
 </Canvas>
 
-
 ### Live Examples
 
 Check out the [handles examples](/story/handles--inherited-color).

docs/storybook/content/06-bounds-padding.stories.mdx

@@ -1,4 +1,4 @@
-import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks';
+import { ArgTypes, Canvas, Meta, Story } from '@storybook/blocks';
 
 import { ReactCompareSlider, ReactCompareSliderImage } from 'react-compare-slider';
 
@@ -27,7 +27,7 @@ boundsPadding={80}
   <Story id="demos--bounds-padding" />
 </Canvas>
 
-<ArgsTable of={ReactCompareSlider} />
+<ArgTypes of={ReactCompareSlider} />
 
 <br />
 

docs/storybook/content/99-real-world-examples.stories.mdx

@@ -0,0 +1,13 @@
+import { Meta } from '@storybook/blocks';
+
+<Meta title="Docs/Real World Examples" />
+
+# Real World Examples
+
+React Compare Slider is used by many companies and over 1000 open source projects, below are some examples of how it is used in the wild.
+
+- [Upscayl, Free and Open Source AI Image Upscaler](https://github.com/upscayl/upscayl#free-and-open-source-ai-image-upscaler)
+- [Official GOV.UK Coronavirus Dashboard](https://coronavirus.data.gov.uk/details/interactive-map/vaccinations#vaccinations-map-container)
+- [Counter-Strike 2 Website](https://www.counter-strike.net/cs2#Maps)
+- [RoomGPT](https://www.restorephotos.io/)
+- [RestorePhotos.io](https://www.roomgpt.io/)