docs: add expo snack demo app link

docs/docs/index.md

@@ -2,6 +2,8 @@
 sidebar_position: 1
 ---
 
+import ButtonLink from '../src/components/ButtonLink';
+
 # Introduction
 
 :::caution
@@ -21,6 +23,12 @@ I had an idea to write a small library that would meet certain requirements:
 - **Components should not overlap each other**. Animations should be simple and smooth. The next modal window should not be shown until the previous one is closed and even more so cover it.
 - **An infinite number of components**. Just think of this library as a small framework. I did not want to limit developers to just Alert. There are two ready-to-use components in the library - Alert and Menu. However, you can implement any other own component.
 
+
+<p align="center">
+<ButtonLink to="https://snack.expo.dev/@inferusvv/react-native-unicorn-modals">Expo Snack Demo App</ButtonLink>
+</p>
+
 <p align="center">
 <img src="img/demo.gif" height="500" />
 </p>
+

docs/src/components/ButtonLink/index.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+interface ButtonProps {
+  children: string;
+  to: string;
+}
+
+const Button: React.FC<ButtonProps> = ({ children, to }) => {
+  return (
+    <a href={to} className="button button--primary button--lg" target="_blank">
+      {children}
+    </a>
+  );
+};
+
+export default Button;

docs/src/css/custom.css

@@ -7,13 +7,15 @@
 /* You can override the default Infima variables here. */
 :root {
   --ifm-color-primary: #bb4df6;
+  --ifm-color-primary-dark: #af2ef4;
+  --ifm-color-primary-darker: #a91ff4;
+  --ifm-color-primary-darkest: #900bd7;
   --ifm-code-font-size: 95%;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
 }
 
 /* For readability concerns, you should choose a lighter palette in dark mode. */
 [data-theme='dark'] {
-  --ifm-color-primary: #bb4df6;
   --ifm-heading-color: #fff;
   --ifm-font-color-base-inverse: #fff;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.2);