add example spa

react-a11y · Oct 22, 2024 · 941cb01 · 941cb01
1 parent 331ddd4
commit 941cb01
Show file tree

Hide file tree

Showing 2 changed files with 86 additions and 0 deletions.
diff --git a/src/App.scss b/src/App.scss
@@ -0,0 +1,49 @@
+.example {
+  h2,
+  h3 {
+    color: var(--color-text);
+    margin-bottom: 10px;
+  }
+
+  p {
+    color: var(--color-text);
+    line-height: 1.6;
+    margin-bottom: 20px;
+  }
+
+  ul {
+    padding-left: 20px;
+    margin-bottom: 20px;
+  }
+
+  ul li {
+    list-style-type: disc;
+    margin-bottom: 5px;
+    color: var(--primary);
+    font-weight: bold;
+  }
+
+  code {
+    background-color: var(--vtl-background);
+    padding: 3px 6px;
+    border-radius: 4px;
+    font-size: 14px;
+    font-family: "Courier New", Courier, monospace;
+    color: var(--primary);
+    font-weight: bold;
+  }
+
+  pre {
+    background-color: var(--vtl-background-solid);
+    padding: 15px;
+    border-radius: 8px;
+    overflow-x: auto;
+    margin-bottom: 20px;
+    border: 1px solid var(--vtl-background);
+    box-shadow: 0 0 0 1px #fff3;
+  }
+
+  pre code {
+    color: var(--primary);
+  }
+}
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,11 +1,48 @@
 import ReactVLibras from 'react-vlibras-plugin';
 import NucleusReact from 'nucleus-react-js';
 import { configApp } from './App.config';
+import "./App.scss";
 
 function App() {
   return (
     <NucleusReact config={configApp}>
       <ReactVLibras />
+      <div className="content example">
+        <h2>Usage Example</h2>
+
+        <h3>Widget Position</h3>
+        <p>You can set the widget's position using the <code>position</code> attribute. For example:</p>
+        <pre><code>&lt;react-vlibras-plugin position="left" /&gt;</code></pre>
+
+        <h3>Available Position Types</h3>
+        <p>The position options that can be used are:</p>
+        <ul>
+          <li>left</li>
+          <li>right</li>
+          <li>top</li>
+          <li>bottom</li>
+          <li>bottom-left</li>
+          <li>top-left</li>
+          <li>bottom-right</li>
+          <li>top-right</li>
+        </ul>
+
+        <h3>Avatar</h3>
+        <p>You can select the widget's avatar using the <code>avatar</code> attribute. Example:</p>
+        <pre><code>&lt;react-vlibras-plugin avatar="hosana" /&gt;</code></pre>
+
+        <h3>Available Avatar Options</h3>
+        <ul>
+          <li>icaro</li>
+          <li>hosana</li>
+          <li>guga</li>
+          <li>random</li>
+        </ul>
+
+        <h3>Opacity</h3>
+        <p>To adjust the widget's opacity, use the <code>opacity</code> attribute:</p>
+        <pre><code>&lt;react-vlibras-plugin opacity="0.8" /&gt;</code></pre>
+      </div>
     </NucleusReact>
   )
 }