example & readme updated

Author: ritwickdey

README.md

@@ -6,7 +6,7 @@
 
 `React Jsx Templating` will give you templating syntax like Angular `*ngIf`
 
-**_Live Example: https://codesandbox.io/s/j312l1m2x9_**
+***Live Example: [Open in Codesandbox](https://codesandbox.io/s/j312l1m2x9)***
 
 ## Install
 

example/src/App.js

@@ -6,12 +6,12 @@ function App() {
   return (
     <div>
       <section>
-        <header>If else</header>
+        <h2>If-Else Example</h2>
         <IfElse />
       </section>
 
       <section>
-        <header>Switch Case</header>
+        <h2>Switch-Case Example</h2>
         <SwitchCase />
       </section>
     </div>

example/src/components/MySomeComponent.js renamed to example/src/components/Helper/MySomeComponent.js

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 
 import { Div, P, Button, Br, Span } from 'react-jsx-templating';
-import MySomeComponent from './MySomeComponent';
+import MySomeComponent from './Helper/MySomeComponent';
 
 function IfElse() {
   const [show, setShow] = useState(true);
@@ -14,17 +14,15 @@ function IfElse() {
       <MySomeComponent $if={show} $else={() => <P>Yay! It works</P>}>
         Welcome here
       </MySomeComponent>
-      <Button $if={showToggler} onClick={() => setShow(v => !v)}>
-        Toogle
-      </Button>
-      <Div></Div>
-      <Br $if={showToggler} />
-      <Br $if={showToggler} />
       <Button onClick={() => setShowToggler(v => !v)}>
         <Span $if={!showToggler} $else={<Span>Hide Toggler</Span>}>
           Show Toggler
         </Span>
       </Button>
+      <Br $if={showToggler} />
+      <Button $if={showToggler} onClick={() => setShow(v => !v)}>
+        Toogle Language
+      </Button>
     </Div>
   );
 }

example/src/components/IfElse.js

@@ -10,11 +10,13 @@ function SwitchCase() {
         value={animal}
         onChange={e => setAnimal(e.target.value)}
       />
+        <br />
+        <br />
       <Div $if={animal} $else={() => <div>Please type!! </div>}>
-        <Div $switch={animal}>
+        <Div $switch={animal.trim().toLowerCase()}>
           <div $case={'dog'}>woof-woof 🐕</div>
           <div $case={'cat'}>meows meows 🐈</div>
-          <div $default>Ops!! No Match! </div>
+          <div $default>Ops!! No Match with `{`${animal}`} ` </div>
         </Div>
       </Div>
     </div>

example/src/components/SwitchCase.js

@@ -1,11 +1,11 @@
 body {
-  margin: 0;
+  margin: 18px;
   padding: 0;
   font-family: sans-serif;
 }
 
 .App {
   margin-top: 18px;
   font-family: sans-serif;
-  text-align: center;
+  /* text-align: center; */
 }