adding multi-themes-example

Author: dev-javascript

example/multi-themes-example/README.md

@@ -0,0 +1,16 @@
+1. Create a project with create-react-app and install all dependencies in package.json
+
+2. Install sass and react-dyn-tabs
+
+```js
+$ npm install react-dyn-tabs
+$ npm install sass --save-dev
+```
+
+3. Copy all files from example/multi-themes-example/src to your own src folder.
+
+4. Run project
+
+```js
+$ npm start
+```

example/multi-themes-example/src/App.css

@@ -0,0 +1,54 @@
+body {
+  position: relative;
+  left: 0px;
+  top: 0px;
+  margin: 0px;
+  padding: 0px;
+  background-color: lavender;
+  overflow-y: scroll;
+  overflow-x: hidden;
+}
+
+select,
+button,
+input {
+  outline: none;
+}
+
+#root {
+  position: absolute;
+  left: 0px;
+  right: 0px;
+  top: 0px;
+  bottom: 0px;
+}
+
+#header {
+  position: relative;
+  margin: 15px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+#header a {
+  text-decoration: none;
+  z-index: 2;
+}
+
+#header h1 {
+  text-align: center;
+  color: #ab0000;
+  margin: 0px;
+}
+
+#actions > div {
+  margin-right: 150px;
+}
+
+@media only screen and (max-width: 580px) {
+  #header {
+    display: table;
+    margin: auto;
+  }
+}

example/multi-themes-example/src/App.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import './App.css';
+import Tabs from './components/simple-tabs/simple-tabs.js';
+import useSelectTheme from './components/useSelectTheme/useSelectTheme.js';
+function App() {
+  const [ThemeSelectorComponent, scopeSelector] = useSelectTheme();
+  return (
+    <>
+      <div id="header">
+        <a href="https://github.com/dev-javascript/react-dyn-tabs" target="_blank">
+          <h1>react-dyn-tabs</h1>
+        </a>
+        <ThemeSelectorComponent></ThemeSelectorComponent>
+      </div>
+      <div className={scopeSelector}>
+        <Tabs />
+      </div>
+    </>
+  );
+}
+
+export default App;

example/multi-themes-example/src/components/simple-tabs/simple-tabs.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import 'react-dyn-tabs/style/react-dyn-tabs.css';
+import '../../scoped-themes/scss/card.scss';
+import '../../scoped-themes/scss/classic.scss';
+import '../../scoped-themes/scss/basic.scss';
+import '../../scoped-themes/scss/bootstrap.scss';
+import useDynTabs from 'react-dyn-tabs';
+export default function () {
+  const allComponents = {
+    Panel1: (props) => <p>tab content 1</p>,
+    Panel2: <p>tab content 2</p>,
+    Panel3: <p>tab content 3</p>,
+    Panel4: (props) => <p>tab content 4</p>,
+  };
+  const options = {
+    tabs: [
+      {id: '1', title: 'tab 1', panelComponent: allComponents.Panel1},
+      {id: '2', title: 'tab 2', panelComponent: allComponents.Panel2},
+      {id: '3', title: 'tab 3', panelComponent: allComponents.Panel3},
+      {id: '4', title: 'tab 4', panelComponent: allComponents.Panel4},
+    ],
+    selectedTabID: '1',
+  };
+  const [Tablist, Panellist, ready] = useDynTabs(options);
+  return (
+    <div
+      style={{
+        margin: '10px',
+        background: 'white',
+        padding: '10px',
+        borderRadius: '7px',
+      }}>
+      <div style={{width: '100%', display: 'block'}}>
+        <Tablist></Tablist>
+        <Panellist></Panellist>
+      </div>
+    </div>
+  );
+}

example/multi-themes-example/src/components/useSelectTheme/themeSelector.css

@@ -0,0 +1,20 @@
+#theme-container {
+  position: absolute;
+  left: 0px;
+  top: 50%;
+  transform: translate(0px, -50%);
+  margin-top: 5px;
+  color: #6767a3;
+}
+@media only screen and (max-width: 580px) {
+  #theme-container {
+    position: relative;
+    margin-top: 20px;
+    text-align: center;
+  }
+}
+#theme-container #theme-selector {
+  padding: 2px 8px;
+  border: 1px solid #c5c5e9;
+  color: #6767a3;
+}

example/multi-themes-example/src/components/useSelectTheme/useSelectTheme.js

@@ -0,0 +1,32 @@
+import React, {useState, useCallback} from 'react';
+import './themeSelector.css';
+const useSelectTheme = (props) => {
+  const [scopeSelector, setScopeSelector] = useState('card');
+  const onChangeTheme = (e) => {
+    setScopeSelector(e.target.value);
+  };
+  const ThemeSelector = useCallback(
+    (props) => (
+      <div id="theme-container">
+        <label htmlFor="theme-selector">Theme : </label>
+        <select id="theme-selector" onChange={onChangeTheme} value={scopeSelector}>
+          <option key="2" value="card">
+            card
+          </option>
+          <option key="1" value="bootstrap">
+            bootstrap
+          </option>
+          <option key="3" value="basic">
+            basic
+          </option>
+          <option key="4" value="classic">
+            classic
+          </option>
+        </select>
+      </div>
+    ),
+    [scopeSelector],
+  );
+  return [ThemeSelector, scopeSelector];
+};
+export default useSelectTheme;

example/multi-themes-example/src/scoped-themes/scss/basic.scss

@@ -0,0 +1,5 @@
+@use '../../../node_modules/react-dyn-tabs/themes/scss/modules/react-dyn-tabs-basic'as m;
+
+.basic {
+  @include m.main;
+}

example/multi-themes-example/src/scoped-themes/scss/bootstrap.scss

@@ -0,0 +1,5 @@
+@use '../../../node_modules/react-dyn-tabs/themes/scss/modules/react-dyn-tabs-bootstrap'as m;
+
+.bootstrap {
+  @include m.main;
+}

example/multi-themes-example/src/scoped-themes/scss/card.scss

@@ -0,0 +1,5 @@
+@use '../../../node_modules/react-dyn-tabs/themes/scss/modules/react-dyn-tabs-card'as m;
+
+.card {
+  @include m.main;
+}

example/multi-themes-example/src/scoped-themes/scss/classic.scss

@@ -0,0 +1,5 @@
+@use '../../../node_modules/react-dyn-tabs/themes/scss/modules/react-dyn-tabs-classic'as m;
+
+.classic {
+  @include m.main;
+}