Adding demo

dapize · Nov 5, 2023 · 5aae9b3 · 5aae9b3
1 parent c3fe81c
commit 5aae9b3
Show file tree

Hide file tree

Showing 8 changed files with 82 additions and 4 deletions.
diff --git a/README-es_ES.md b/README-es_ES.md
@@ -55,7 +55,7 @@ import { Box } from 'react-layouter';
 
 const App = () => {
   return (
-    <Box w="100" h={100} c="13/15">
+    <Box w="100" h={100} c="13/15" as="main">
       contenido
     </Box>
   );
@@ -66,6 +66,14 @@ export default App;
 
 **Y listo!**, eso es todo lo que necesitamos para usar el **layouter** en React. Solo usa el componente Box por todo lugar donde lo requieras.
 
+## 🚀 Demo
+
+<p align="center">
+    <img src="screenshot.png" alt="Layouter DEMO"/>
+    <br>
+    <b><a href="https://dapize.github.io/react-layouter/">⚓ LINK DEMO ⚓</a></b>
+</p>
+
 ## ⚡ Directivas
 
 Son practicamente las mismas que la [librería](https://github.com/dapize/layouter.js), solo que se an cambiado las directivas de tipo `kebab-case` por `camelCase`, veamos:

diff --git a/README.md b/README.md
@@ -55,7 +55,7 @@ import { Box } from 'react-layouter';
 
 const App = () => {
   return (
-    <Box w="100" h={100} c="13/15">
+    <Box w="100" h={100} c="13/15" as="main">
       content
     </Box>
   );
@@ -66,6 +66,14 @@ export default App;
 
 **That's it!**, that is all of we have to do to use the **layouter** in React. Just use the component `Box` wherever you want.
 
+## 🚀 Demo
+
+<p align="center">
+    <img src="screenshot.png" alt="Layouter DEMO"/>
+    <br>
+    <b><a href="https://dapize.github.io/react-layouter/">⚓ LINK DEMO ⚓</a></b>
+</p>
+
 ## ⚡ Directives
 
 Are practically the same of the [library](https://github.com/dapize/layouter.js), just the names was changed from `kebab-case` to `camelCase`, let see:

diff --git a/assets/index-72c55f36.js b/assets/index-72c55f36.js
diff --git a/assets/index-8d16d58a.css b/assets/index-8d16d58a.css
diff --git a/favicon.png b/favicon.png
diff --git a/index.html b/index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/png" href="favicon.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>React Layouter DEMO</title>
+    <script type="module" crossorigin src="/assets/index-72c55f36.js"></script>
+    <link rel="stylesheet" href="/assets/index-8d16d58a.css" />
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -69,6 +69,5 @@
     "layouter.js": "^1.9.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
-  },
-  "dependencies": {}
+  }
 }
diff --git a/screenshot.png b/screenshot.png