adding responsive and minimal-usage

examples

Author: dev-javascript

example/stories/index.ts

@@ -0,0 +1,33 @@
+```tsx
+import React from 'react';
+import 'react-dyn-tabs/style/react-dyn-tabs.css';
+import 'react-dyn-tabs/themes/react-dyn-tabs-card.css';
+import useDynTabs from 'react-dyn-tabs';
+
+const initialOptions = {
+  tabs: [
+    {
+      id: '1',
+      title: 'tab 1',
+      panelComponent: (porps) => <p> panel 1 </p>,
+    },
+    {
+      id: '2',
+      title: 'tab 2',
+      panelComponent: (porps) => <p> panel 2 </p>,
+    },
+  ],
+  selectedTabID: '1',
+};
+
+function App() {
+  const [TabList, PanelList] = useDynTabs(initialOptions);
+  return (
+    <div>
+      <TabList></TabList>
+      <PanelList></PanelList>
+    </div>
+  );
+}
+<App />;
+```

example/stories/minimal-usage/README.md

@@ -0,0 +1 @@
+export default function () {}

example/stories/minimal-usage/minimal-usage.jsx

@@ -1,5 +1,3 @@
-## Minimal Usage
-
 ```tsx
 import React from 'react';
 import 'react-dyn-tabs/style/react-dyn-tabs.css';
@@ -47,5 +45,18 @@ function App() {
     </div>
   );
 }
-<App />;
+function App2() {
+  const [TabList, PanelList] = useDynTabs(initialOptions);
+  return (
+    <div>
+      <TabList></TabList>
+      <PanelList></PanelList>
+    </div>
+  );
+}
+
+<>
+  <App />
+  <App2 />
+</>;
 ```

example/stories/tabs/Readme.md renamed to example/stories/responsive/README.md

@@ -0,0 +1 @@
+export default function () {}

example/stories/responsive/responsive.jsx

@@ -15,8 +15,8 @@ module.exports = {
   sections: [
     {
       name: 'Examples',
-      content: 'example/stories/tabs/Readme.md',
-      components: 'example/stories/**/*.comp.jsx',
+      content: 'example/stories/minimal-usage/README.md',
+      components: 'example/stories/**/*.jsx',
       sectionDepth: 1,
     },
   ],