update examples

Author: dev-javascript

example/stories/constant-suggestions-list/README.md

@@ -1,3 +1,7 @@
+#### `outline` theme + Dynamic suggestion list
+
+##### Type A|B|C|D|Item to see the suggestion list
+
 ```jsx
 import React, {useState} from 'react';
 import ReactCustomSearchList from 'react-custom-search-list';
@@ -13,6 +17,7 @@ function App() {
       onChange={(e) => setValue(e.target.value)}
       onClear={() => setValue('')}
       fullWidth
+      theme="outline"
       corner>
       {/**Render your suggestions list here*/}
       {value

example/stories/dynamic-suggestions-list/README.md

@@ -1,3 +1,5 @@
+#### `panel` theme + Constant suggestion list
+
 ```jsx
 import React, {useState} from 'react';
 import ReactCustomSearchList from 'react-custom-search-list';

example/stories/panel-theme/README.md

@@ -1,10 +1,9 @@
+#### `underline` theme + Constant suggestion list
+
 ```jsx
 import React, {useState} from 'react';
 import ReactCustomSearchList from 'react-custom-search-list';
 import 'react-custom-search-list/style/react-custom-search-list.css';
-
-const items = ['Item A', 'Item B', 'Item C', 'Item D'];
-
 function App() {
   const [value, setValue] = useState('');
   return (
@@ -16,15 +15,24 @@ function App() {
       fullWidth
       corner>
       {/**Render your suggestions list here*/}
-      {value
-        ? items
-            .filter((item) => item.toLowerCase().includes(value.toLowerCase()))
-            .map((item) => (
-              <div key={item} style={{margin: '5px'}}>
-                <p onClick={() => setValue(item)}>{item}</p>
-              </div>
-            ))
-        : null}
+      <ul>
+        <li>
+          <button onClick={() => setValue('Option A')}>Option A</button>
+        </li>
+        <li>
+          <button onClick={() => setValue('Option B')}>Option B</button>
+        </li>
+        <li>
+          <a href="https://github.com/dev-javascript/react-custom-search-list" target="_blank">
+            Github Link
+          </a>
+        </li>
+        <li>
+          <a href="https://www.npmjs.com/package/react-custom-search-list" target="_blank">
+            NPM Link
+          </a>
+        </li>
+      </ul>
     </ReactCustomSearchList>
   );
 }