+
+Instagram:
-
-
- #ffffff
-
-
-
+
+
+
+
+ #ffffff
+
+
+
diff --git a/public/index.html b/public/index.html
index 0dac9a19..8c39bd62 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,89 +1,89 @@
-
-
-
-
- Volt React Dashboard
-
-
-
-
- You need to enable JavaScript to run this app.
-
-
-
-
-
+
+
+
+
+ Volt React Dashboard
+
+
+
+
+ You need to enable JavaScript to run this app.
+
+
+
+
+
diff --git a/public/manifest.json b/public/manifest.json
index d6620c4a..7739691d 100644
--- a/public/manifest.json
+++ b/public/manifest.json
@@ -1,20 +1,20 @@
-{
- "name": "Volt React Dashboard",
- "short_name": "Volt React Dashboard",
- "icons": [
- {
- "src": "/docs/4.3/assets/img/favicons/android-chrome-192x192.png",
- "sizes": "192x192",
- "type": "image/png"
- },
- {
- "src": "/docs/4.3/assets/img/favicons/android-chrome-512x512.png",
- "sizes": "512x512",
- "type": "image/png"
- }
- ],
- "start_url": "/?utm_source=a2hs",
- "theme_color": "#563d7c",
- "background_color": "#563d7c",
- "display": "standalone"
-}
+{
+ "name": "Volt React Dashboard",
+ "short_name": "Volt React Dashboard",
+ "icons": [
+ {
+ "src": "/docs/4.3/assets/img/favicons/android-chrome-192x192.png",
+ "sizes": "192x192",
+ "type": "image/png"
+ },
+ {
+ "src": "/docs/4.3/assets/img/favicons/android-chrome-512x512.png",
+ "sizes": "512x512",
+ "type": "image/png"
+ }
+ ],
+ "start_url": "/?utm_source=a2hs",
+ "theme_color": "#563d7c",
+ "background_color": "#563d7c",
+ "display": "standalone"
+}
diff --git a/public/robots.txt b/public/robots.txt
index e9e57dc4..9dd52a51 100644
--- a/public/robots.txt
+++ b/public/robots.txt
@@ -1,3 +1,3 @@
-# https://www.robotstxt.org/robotstxt.html
-User-agent: *
-Disallow:
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:
diff --git a/public/safari-pinned-tab.svg b/public/safari-pinned-tab.svg
index 4bb494eb..93611cde 100644
--- a/public/safari-pinned-tab.svg
+++ b/public/safari-pinned-tab.svg
@@ -1,39 +1,39 @@
-
-
-
-
-Created by potrace 1.11, written by Peter Selinger 2001-2013
-
-
-
-
+
+
+
+
+Created by potrace 1.11, written by Peter Selinger 2001-2013
+
+
+
+
diff --git a/public/site.webmanifest b/public/site.webmanifest
index 26831a3b..adf58b02 100644
--- a/public/site.webmanifest
+++ b/public/site.webmanifest
@@ -1,19 +1,19 @@
-{
- "name": "Volt React Dashboard",
- "short_name": "Volt React Dashboard",
- "icons": [
- {
- "src": "/android-chrome-192x192.png",
- "sizes": "192x192",
- "type": "image/png"
- },
- {
- "src": "/android-chrome-512x512.png",
- "sizes": "512x512",
- "type": "image/png"
- }
- ],
- "theme_color": "#ffffff",
- "background_color": "#ffffff",
- "display": "standalone"
-}
+{
+ "name": "Volt React Dashboard",
+ "short_name": "Volt React Dashboard",
+ "icons": [
+ {
+ "src": "/android-chrome-192x192.png",
+ "sizes": "192x192",
+ "type": "image/png"
+ },
+ {
+ "src": "/android-chrome-512x512.png",
+ "sizes": "512x512",
+ "type": "image/png"
+ }
+ ],
+ "theme_color": "#ffffff",
+ "background_color": "#ffffff",
+ "display": "standalone"
+}
diff --git a/src/assets/img/brand/dark.svg b/src/assets/img/brand/dark.svg
index d82922e3..0ce064ce 100644
--- a/src/assets/img/brand/dark.svg
+++ b/src/assets/img/brand/dark.svg
@@ -1,13 +1,13 @@
-
-
-
-
-
+
+
+
+
+
diff --git a/src/assets/img/crypto-capable-logo.png b/src/assets/img/crypto-capable-logo.png
new file mode 100644
index 00000000..2513436f
Binary files /dev/null and b/src/assets/img/crypto-capable-logo.png differ
diff --git a/src/assets/img/dst-logo.jpg b/src/assets/img/dst-logo.jpg
new file mode 100644
index 00000000..c32cc8cb
Binary files /dev/null and b/src/assets/img/dst-logo.jpg differ
diff --git a/src/assets/img/favicon/browserconfig.xml b/src/assets/img/favicon/browserconfig.xml
index d416bc53..9510e116 100644
--- a/src/assets/img/favicon/browserconfig.xml
+++ b/src/assets/img/favicon/browserconfig.xml
@@ -1,9 +1,9 @@
-
-
-
-
- #ffffff
-
-
-
+
+
+
+
+ #ffffff
+
+
+
diff --git a/src/assets/img/favicon/manifest.json b/src/assets/img/favicon/manifest.json
index 1d22e992..12e0fb0c 100644
--- a/src/assets/img/favicon/manifest.json
+++ b/src/assets/img/favicon/manifest.json
@@ -1,20 +1,20 @@
-{
- "name": "Bootstrap",
- "short_name": "Bootstrap",
- "icons": [
- {
- "src": "/docs/4.3/assets/img/favicons/android-chrome-192x192.png",
- "sizes": "192x192",
- "type": "image/png"
- },
- {
- "src": "/docs/4.3/assets/img/favicons/android-chrome-512x512.png",
- "sizes": "512x512",
- "type": "image/png"
- }
- ],
- "start_url": "/?utm_source=a2hs",
- "theme_color": "#563d7c",
- "background_color": "#563d7c",
- "display": "standalone"
-}
+{
+ "name": "Bootstrap",
+ "short_name": "Bootstrap",
+ "icons": [
+ {
+ "src": "/docs/4.3/assets/img/favicons/android-chrome-192x192.png",
+ "sizes": "192x192",
+ "type": "image/png"
+ },
+ {
+ "src": "/docs/4.3/assets/img/favicons/android-chrome-512x512.png",
+ "sizes": "512x512",
+ "type": "image/png"
+ }
+ ],
+ "start_url": "/?utm_source=a2hs",
+ "theme_color": "#563d7c",
+ "background_color": "#563d7c",
+ "display": "standalone"
+}
diff --git a/src/assets/img/favicon/safari-pinned-tab.svg b/src/assets/img/favicon/safari-pinned-tab.svg
index 4bb494eb..93611cde 100644
--- a/src/assets/img/favicon/safari-pinned-tab.svg
+++ b/src/assets/img/favicon/safari-pinned-tab.svg
@@ -1,39 +1,39 @@
-
-
-
-
-Created by potrace 1.11, written by Peter Selinger 2001-2013
-
-
-
-
+
+
+
+
+Created by potrace 1.11, written by Peter Selinger 2001-2013
+
+
+
+
diff --git a/src/assets/img/favicon/site.webmanifest b/src/assets/img/favicon/site.webmanifest
index 9f106946..c7a7776b 100644
--- a/src/assets/img/favicon/site.webmanifest
+++ b/src/assets/img/favicon/site.webmanifest
@@ -1,19 +1,19 @@
-{
- "name": "Themesberg",
- "short_name": "Themesberg",
- "icons": [
- {
- "src": "/android-chrome-192x192.png",
- "sizes": "192x192",
- "type": "image/png"
- },
- {
- "src": "/android-chrome-512x512.png",
- "sizes": "512x512",
- "type": "image/png"
- }
- ],
- "theme_color": "#ffffff",
- "background_color": "#ffffff",
- "display": "standalone"
-}
+{
+ "name": "Themesberg",
+ "short_name": "Themesberg",
+ "icons": [
+ {
+ "src": "/android-chrome-192x192.png",
+ "sizes": "192x192",
+ "type": "image/png"
+ },
+ {
+ "src": "/android-chrome-512x512.png",
+ "sizes": "512x512",
+ "type": "image/png"
+ }
+ ],
+ "theme_color": "#ffffff",
+ "background_color": "#ffffff",
+ "display": "standalone"
+}
diff --git a/src/assets/img/illustrations/404.svg b/src/assets/img/illustrations/404.svg
index 5f2f38f3..8ce48fdb 100644
--- a/src/assets/img/illustrations/404.svg
+++ b/src/assets/img/illustrations/404.svg
@@ -1,254 +1,254 @@
-
-
-
-
-404
-
+
+
+
+
+404
+
diff --git a/src/assets/img/illustrations/500.svg b/src/assets/img/illustrations/500.svg
index d6875b41..b0c083f3 100644
--- a/src/assets/img/illustrations/500.svg
+++ b/src/assets/img/illustrations/500.svg
@@ -1,243 +1,243 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 500
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 500
+
+
diff --git a/src/assets/img/illustrations/signin.svg b/src/assets/img/illustrations/signin.svg
index dfd96a87..93585e86 100644
--- a/src/assets/img/illustrations/signin.svg
+++ b/src/assets/img/illustrations/signin.svg
@@ -1,2332 +1,2332 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/assets/img/india-accelerator-logo.png b/src/assets/img/india-accelerator-logo.png
new file mode 100644
index 00000000..dd70f414
Binary files /dev/null and b/src/assets/img/india-accelerator-logo.png differ
diff --git a/src/assets/img/marker.svg b/src/assets/img/marker.svg
index ed4d2244..869f15d9 100644
--- a/src/assets/img/marker.svg
+++ b/src/assets/img/marker.svg
@@ -1,2 +1,2 @@
-
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/assets/img/sine-iitb-logo.png b/src/assets/img/sine-iitb-logo.png
new file mode 100644
index 00000000..a9fa5b8e
Binary files /dev/null and b/src/assets/img/sine-iitb-logo.png differ
diff --git a/src/assets/img/technologies/laravel-logo.svg b/src/assets/img/technologies/laravel-logo.svg
index d7c49ed4..7d2299fa 100644
--- a/src/assets/img/technologies/laravel-logo.svg
+++ b/src/assets/img/technologies/laravel-logo.svg
@@ -1,2 +1,2 @@
-
+
Logomark
-
-
+
+
+
+
+
diff --git a/src/assets/img/technologies/vuejs-logo.svg b/src/assets/img/technologies/vuejs-logo.svg
index 4e9883a2..41d569d4 100644
--- a/src/assets/img/technologies/vuejs-logo.svg
+++ b/src/assets/img/technologies/vuejs-logo.svg
@@ -1,8 +1,8 @@
-
-
-
-
-
+
+
+
+
+
diff --git a/src/assets/syntax-themes/ghcolors.json b/src/assets/syntax-themes/ghcolors.json
index 62f4b330..0ab7f5a3 100644
--- a/src/assets/syntax-themes/ghcolors.json
+++ b/src/assets/syntax-themes/ghcolors.json
@@ -1,104 +1,104 @@
-{
- "plain": {
- "color": "#393A34",
- "backgroundColor": "#fff"
- },
- "styles": [
- {
- "types": [
- "comment",
- "prolog",
- "doctype",
- "cdata"
- ],
- "style": {
- "color": "rgb(153,153,136)",
- "fontStyle": "italic"
- }
- },
- {
- "types": [
- "string",
- "attr-value"
- ],
- "style": {
- "color": "rgb(201,100,128)"
- }
- },
- {
- "types": [
- "punctuation",
- "operator"
- ],
- "style": {
- "color": "rgb(57,58,52)"
- }
- },
- {
- "types": [
- "entity",
- "url",
- "symbol",
- "number",
- "boolean",
- "variable",
- "constant",
- "property",
- "regex",
- "inserted"
- ],
- "style": {
- "color": "rgb(54,172,170)"
- }
- },
- {
- "types": [
- "atrule",
- "keyword",
- "attr-name",
- "selector"
- ],
- "style": {
- "color": "rgb(0,164,219)"
- }
- },
- {
- "types": [
- "function",
- "deleted",
- "tag"
- ],
- "style": {
- "color": "rgb(154,5,15)"
- }
- },
- {
- "types": [
- "tag",
- "selector",
- "keyword"
- ],
- "style": {
- "color": "rgb(0,0,159)"
- }
- },
- {
- "types": [
- "important",
- "function",
- "bold"
- ],
- "style": {
- "fontWeight": "bold"
- }
- },
- {
- "types": [
- "italic"
- ],
- "style": {
- "fontStyle": "italic"
- }
- }
- ]
+{
+ "plain": {
+ "color": "#393A34",
+ "backgroundColor": "#fff"
+ },
+ "styles": [
+ {
+ "types": [
+ "comment",
+ "prolog",
+ "doctype",
+ "cdata"
+ ],
+ "style": {
+ "color": "rgb(153,153,136)",
+ "fontStyle": "italic"
+ }
+ },
+ {
+ "types": [
+ "string",
+ "attr-value"
+ ],
+ "style": {
+ "color": "rgb(201,100,128)"
+ }
+ },
+ {
+ "types": [
+ "punctuation",
+ "operator"
+ ],
+ "style": {
+ "color": "rgb(57,58,52)"
+ }
+ },
+ {
+ "types": [
+ "entity",
+ "url",
+ "symbol",
+ "number",
+ "boolean",
+ "variable",
+ "constant",
+ "property",
+ "regex",
+ "inserted"
+ ],
+ "style": {
+ "color": "rgb(54,172,170)"
+ }
+ },
+ {
+ "types": [
+ "atrule",
+ "keyword",
+ "attr-name",
+ "selector"
+ ],
+ "style": {
+ "color": "rgb(0,164,219)"
+ }
+ },
+ {
+ "types": [
+ "function",
+ "deleted",
+ "tag"
+ ],
+ "style": {
+ "color": "rgb(154,5,15)"
+ }
+ },
+ {
+ "types": [
+ "tag",
+ "selector",
+ "keyword"
+ ],
+ "style": {
+ "color": "rgb(0,0,159)"
+ }
+ },
+ {
+ "types": [
+ "important",
+ "function",
+ "bold"
+ ],
+ "style": {
+ "fontWeight": "bold"
+ }
+ },
+ {
+ "types": [
+ "italic"
+ ],
+ "style": {
+ "fontStyle": "italic"
+ }
+ }
+ ]
}
\ No newline at end of file
diff --git a/src/assets/syntax-themes/xonokai.json b/src/assets/syntax-themes/xonokai.json
index b6b7b477..fc170e20 100644
--- a/src/assets/syntax-themes/xonokai.json
+++ b/src/assets/syntax-themes/xonokai.json
@@ -1,121 +1,121 @@
-{
- "plain": {
- "color": "#76d9e6",
- "backgroundColor": "#2a2a2a"
- },
- "styles": [
- {
- "types": [
- "comment",
- "prolog",
- "doctype",
- "cdata"
- ],
- "style": {
- "color": "rgb(111,112,94)"
- }
- },
- {
- "types": [
- "operator",
- "boolean",
- "number"
- ],
- "style": {
- "color": "rgb(167,122,254)"
- }
- },
- {
- "types": [
- "attr-value",
- "string"
- ],
- "style": {
- "color": "rgb(230,208,108)"
- }
- },
- {
- "types": [
- "entity",
- "url",
- "string"
- ],
- "style": {
- "color": "rgb(230,208,108)"
- }
- },
- {
- "types": [
- "selector",
- "inserted"
- ],
- "style": {
- "color": "rgb(166,226,45)"
- }
- },
- {
- "types": [
- "atrule",
- "attr-name",
- "keyword",
- "important",
- "deleted"
- ],
- "style": {
- "color": "rgb(239,59,125)"
- }
- },
- {
- "types": [
- "regex",
- "statement"
- ],
- "style": {
- "color": "rgb(118,217,230)"
- }
- },
- {
- "types": [
- "placeholder",
- "variable"
- ],
- "style": {
- "color": "rgb(255,255,255)"
- }
- },
- {
- "types": [
- "important",
- "statement",
- "bold"
- ],
- "style": {
- "fontWeight": "bold"
- }
- },
- {
- "types": [
- "punctuation"
- ],
- "style": {
- "color": "rgb(190,190,197)"
- }
- },
- {
- "types": [
- "entity"
- ],
- "style": {
- "cursor": "help"
- }
- },
- {
- "types": [
- "italic"
- ],
- "style": {
- "fontStyle": "italic"
- }
- }
- ]
+{
+ "plain": {
+ "color": "#76d9e6",
+ "backgroundColor": "#2a2a2a"
+ },
+ "styles": [
+ {
+ "types": [
+ "comment",
+ "prolog",
+ "doctype",
+ "cdata"
+ ],
+ "style": {
+ "color": "rgb(111,112,94)"
+ }
+ },
+ {
+ "types": [
+ "operator",
+ "boolean",
+ "number"
+ ],
+ "style": {
+ "color": "rgb(167,122,254)"
+ }
+ },
+ {
+ "types": [
+ "attr-value",
+ "string"
+ ],
+ "style": {
+ "color": "rgb(230,208,108)"
+ }
+ },
+ {
+ "types": [
+ "entity",
+ "url",
+ "string"
+ ],
+ "style": {
+ "color": "rgb(230,208,108)"
+ }
+ },
+ {
+ "types": [
+ "selector",
+ "inserted"
+ ],
+ "style": {
+ "color": "rgb(166,226,45)"
+ }
+ },
+ {
+ "types": [
+ "atrule",
+ "attr-name",
+ "keyword",
+ "important",
+ "deleted"
+ ],
+ "style": {
+ "color": "rgb(239,59,125)"
+ }
+ },
+ {
+ "types": [
+ "regex",
+ "statement"
+ ],
+ "style": {
+ "color": "rgb(118,217,230)"
+ }
+ },
+ {
+ "types": [
+ "placeholder",
+ "variable"
+ ],
+ "style": {
+ "color": "rgb(255,255,255)"
+ }
+ },
+ {
+ "types": [
+ "important",
+ "statement",
+ "bold"
+ ],
+ "style": {
+ "fontWeight": "bold"
+ }
+ },
+ {
+ "types": [
+ "punctuation"
+ ],
+ "style": {
+ "color": "rgb(190,190,197)"
+ }
+ },
+ {
+ "types": [
+ "entity"
+ ],
+ "style": {
+ "cursor": "help"
+ }
+ },
+ {
+ "types": [
+ "italic"
+ ],
+ "style": {
+ "fontStyle": "italic"
+ }
+ }
+ ]
}
\ No newline at end of file
diff --git a/src/components/AccordionComponent.js b/src/components/AccordionComponent.js
index a44e1b15..2fac6a24 100644
--- a/src/components/AccordionComponent.js
+++ b/src/components/AccordionComponent.js
@@ -1,33 +1,33 @@
-import React from 'react';
-import { Card, Accordion } from '@themesberg/react-bootstrap';
-
-export default (props) => {
- const { defaultKey, data = [], className = "" } = props;
-
- const AccordionItem = (item) => {
- const { eventKey, title, description } = item;
-
- return (
-
-
-
- {title}
-
-
-
-
-
- {description}
-
-
-
-
- );
- };
-
- return (
-
- {data.map(d =>
- );
+import React from 'react';
+import { Card, Accordion } from '@themesberg/react-bootstrap';
+
+export default (props) => {
+ const { defaultKey, data = [], className = "" } = props;
+
+ const AccordionItem = (item) => {
+ const { eventKey, title, description } = item;
+
+ return (
+
+
+
+ {title}
+
+
+
+
+
+ {description}
+
+
+
+
+ );
+ };
+
+ return (
+
+ {data.map(d =>
+ );
};
\ No newline at end of file
diff --git a/src/components/Charts.js b/src/components/Charts.js
index 3772951b..6610275b 100644
--- a/src/components/Charts.js
+++ b/src/components/Charts.js
@@ -1,116 +1,116 @@
-
-import React from "react";
-import Chartist from "react-chartist";
-import ChartistTooltip from 'chartist-plugin-tooltips-updated';
-
-export const SalesValueChart = () => {
- const data = {
- labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
- series: [[1, 2, 2, 3, 3, 4, 3]]
- };
-
- const options = {
- low: 0,
- showArea: true,
- fullWidth: true,
- axisX: {
- position: 'end',
- showGrid: true
- },
- axisY: {
- // On the y-axis start means left and end means right
- showGrid: false,
- showLabel: false,
- labelInterpolationFnc: value => `$${value / 1}k`
- }
- };
-
- const plugins = [
- ChartistTooltip()
- ]
-
- return (
-
-
-
- {tokens.map((line, i) => (
-
- {line.map((token, key) =>
- ))}
-
-
- {copied ? Copied : null}
-
- Copy to clipboard}
- >
-
- Copy
-
-
-
-
- );
-
- return (
-
- {CodeStyling}
-
- );
-};
-
+
+import React, { useState } from 'react';
+import { CopyToClipboard } from 'react-copy-to-clipboard';
+import { Card, Button, Tooltip, OverlayTrigger } from '@themesberg/react-bootstrap';
+import Highlight, { Prism } from 'prism-react-renderer';
+
+import themeStyle from "../assets/syntax-themes/ghcolors.json";
+
+export default (props) => {
+ const { code = "", language = "jsx" } = props;
+ const [copied, setCopied] = useState(false);
+
+ const handleCopy = () => {
+ setCopied(true);
+ setTimeout(() => setCopied(false), 2000);
+ };
+
+ const CodeStyling = ({ className, style, tokens, getLineProps, getTokenProps }) => (
+
+
+
+ {tokens.map((line, i) => (
+
+ {line.map((token, key) =>
+ ))}
+
+
+ {copied ? Copied : null}
+
+ Copy to clipboard}
+ >
+
+ Copy
+
+
+
+
+ );
+
+ return (
+
+ {CodeStyling}
+
+ );
+};
+
diff --git a/src/components/CodeEditor.js b/src/components/CodeEditor.js
index 76cdd901..574ec58b 100644
--- a/src/components/CodeEditor.js
+++ b/src/components/CodeEditor.js
@@ -1,75 +1,75 @@
-
-import React, { useState } from 'react';
-import { CopyToClipboard } from 'react-copy-to-clipboard';
-import { Col, Row, Card, Button, Tooltip, OverlayTrigger } from '@themesberg/react-bootstrap';
-import { LiveProvider, LiveEditor, LiveError, LivePreview } from 'react-live';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faQuestionCircle } from '@fortawesome/free-regular-svg-icons';
-import Code from "./Code";
-
-import themeStyle from "../assets/syntax-themes/ghcolors.json";
-
-export default (props) => {
- const { language = "jsx", scope = {}, imports = null, maxHeight = 'none' } = props;
- const [code, setCode] = useState(props.code);
- const [copied, setCopied] = useState(false);
- const noInline = code.includes('render(');
-
- const handleCodeChange = (newCode) => {
- setCode(newCode);
- };
-
- const handleCopy = () => {
- setCopied(true);
- setTimeout(() => setCopied(false), 2000);
- };
-
- return (
-
-
-
-
-
-
-
- {imports ? (
-
- You can edit the code below and the changes will be seen in the example above.}>
-
- Live React Code Editor
-
-
-
-
-
- Copied : null}
-
- Copy to clipboard}
- >
-
- Copy
-
-
-
-
-
-
-
- );
-};
-
+
+import React, { useState } from 'react';
+import { CopyToClipboard } from 'react-copy-to-clipboard';
+import { Col, Row, Card, Button, Tooltip, OverlayTrigger } from '@themesberg/react-bootstrap';
+import { LiveProvider, LiveEditor, LiveError, LivePreview } from 'react-live';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faQuestionCircle } from '@fortawesome/free-regular-svg-icons';
+import Code from "./Code";
+
+import themeStyle from "../assets/syntax-themes/ghcolors.json";
+
+export default (props) => {
+ const { language = "jsx", scope = {}, imports = null, maxHeight = 'none' } = props;
+ const [code, setCode] = useState(props.code);
+ const [copied, setCopied] = useState(false);
+ const noInline = code.includes('render(');
+
+ const handleCodeChange = (newCode) => {
+ setCode(newCode);
+ };
+
+ const handleCopy = () => {
+ setCopied(true);
+ setTimeout(() => setCopied(false), 2000);
+ };
+
+ return (
+
+
+
+
+
+
+
+ {imports ? (
+
+ You can edit the code below and the changes will be seen in the example above.}>
+
+ Live React Code Editor
+
+
+
+
+
+ Copied : null}
+
+ Copy to clipboard}
+ >
+
+ Copy
+
+
+
+
+
+
+
+ );
+};
+
diff --git a/src/components/Documentation.js b/src/components/Documentation.js
index f010cd08..d07ef388 100644
--- a/src/components/Documentation.js
+++ b/src/components/Documentation.js
@@ -1,30 +1,30 @@
-
-import React from 'react';
-import { Row, Col } from '@themesberg/react-bootstrap';
-
-import CodeEditor from "./CodeEditor";
-
-export default (props) => {
- const { title, description, example = null, imports = null, scope = {}, maxHeight = null } = props;
-
- return (
- <>
-
-
- {title}
- {description}
-
-
-
-
-
-
-
-
-
- );
-};
+
+import React from 'react';
+import { Row, Col } from '@themesberg/react-bootstrap';
+
+import CodeEditor from "./CodeEditor";
+
+export default (props) => {
+ const { title, description, example = null, imports = null, scope = {}, maxHeight = null } = props;
+
+ return (
+ <>
+
+
+ {title}
+ {description}
+
+
+
+
+
+
+
+
+
+ );
+};
diff --git a/src/components/Footer.js b/src/components/Footer.js
index ca35bb96..7d2575dc 100644
--- a/src/components/Footer.js
+++ b/src/components/Footer.js
@@ -1,101 +1,101 @@
-
-import React from "react";
-import moment from "moment-timezone";
-import { Row, Col, Card, OverlayTrigger, Tooltip, Image, Button } from '@themesberg/react-bootstrap';
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faCogs, faDownload, faRocket } from "@fortawesome/free-solid-svg-icons";
-import BS5Logo from "../assets/img/technologies/bootstrap-5-logo.svg";
-import ReactLogo from "../assets/img/technologies/react-logo.svg";
-import LaravelLogo from "../assets/img/technologies/laravel-logo.svg";
-import GitHubButton from 'react-github-btn';
-import { Link } from 'react-router-dom';
-import { Routes } from "../routes";
-
-export default (props) => {
- const currentYear = moment().get("year");
- const showSettings = props.showSettings;
-
- const toggleSettings = (toggle) => {
- props.toggleSettings(toggle);
- }
-
- return (
-
- {showSettings ? (
-
-
- { toggleSettings(false) }} />
-
-
Made with open source 💙
-
Star
-
Available in the following technologies:
-
-
- Bootstrap 5 · The most popular HTML, CSS, and JS library in the world.}>
-
-
-
-
- React · A JavaScript library for building user interfaces.}>
-
-
-
-
- Laravel · Most popular PHP framework in the world.}>
-
-
-
-
-
-
- ) : (
-
{ toggleSettings(true) }}>
-
-
-
- )}
-
-
+ {showSettings ? (
+
+
+ { toggleSettings(false) }} />
+
+
Made with open source 💙
+
Star
+
Available in the following technologies:
+
+
+ Bootstrap 5 · The most popular HTML, CSS, and JS library in the world.}>
+
+
+
+
+ React · A JavaScript library for building user interfaces.}>
+
+
+
+
+ Laravel · Most popular PHP framework in the world.}>
+
+
+
+
+
+
+ ) : (
+
{ toggleSettings(true) }}>
+
+
+
+ )}
+
+
-
- General information
-
-
-
- );
-};
+
+import React, { useState } from "react";
+import moment from "moment-timezone";
+import Datetime from "react-datetime";
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faCalendarAlt } from '@fortawesome/free-solid-svg-icons';
+import { Col, Row, Card, Form, Button, InputGroup } from '@themesberg/react-bootstrap';
+
+
+export const GeneralInfoForm = () => {
+ const [birthday, setBirthday] = useState("");
+
+ return (
+
+
+ General information
+
+
+
+ );
+};
diff --git a/src/components/Navbar.js b/src/components/Navbar.js
index 15fa0188..cf65f022 100644
--- a/src/components/Navbar.js
+++ b/src/components/Navbar.js
@@ -1,121 +1,127 @@
-
-import React, { useState } from "react";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faBell, faCog, faEnvelopeOpen, faSearch, faSignOutAlt, faUserShield } from "@fortawesome/free-solid-svg-icons";
-import { faUserCircle } from "@fortawesome/free-regular-svg-icons";
-import { Row, Col, Nav, Form, Image, Navbar, Dropdown, Container, ListGroup, InputGroup } from '@themesberg/react-bootstrap';
-
-import NOTIFICATIONS_DATA from "../data/notifications";
-import Profile3 from "../assets/img/team/profile-picture-3.jpg";
-
-
-export default (props) => {
- const [notifications, setNotifications] = useState(NOTIFICATIONS_DATA);
- const areNotificationsRead = notifications.reduce((acc, notif) => acc && notif.read, true);
-
- const markNotificationsAsRead = () => {
- setTimeout(() => {
- setNotifications(notifications.map(n => ({ ...n, read: true })));
- }, 300);
- };
-
-
- const Notification = (props) => {
- const { link, sender, image, time, message, read = false } = props;
- const readClassName = read ? "" : "text-danger";
-
- return (
-
-
-
-
-
{sender}
-
-
- {time}
-
-
{message}
-
-
-
- );
- };
-
- return (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Notifications
-
-
- {notifications.map(n =>
- View all
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-};
+
+import React, { useState } from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faBell, faCog, faEnvelopeOpen, faSearch, faSignOutAlt, faUserShield } from "@fortawesome/free-solid-svg-icons";
+import { faUserCircle } from "@fortawesome/free-regular-svg-icons";
+import { Row, Col, Nav, Form, Button, Image, Navbar, Dropdown, Container, ListGroup, InputGroup } from '@themesberg/react-bootstrap';
+
+import { Routes } from "../routes";
+import { Link } from 'react-router-dom';
+import { HashLink } from 'react-router-hash-link';
+
+import NOTIFICATIONS_DATA from "../data/notifications";
+import Profile3 from "../assets/img/team/profile-picture-3.jpg";
+
+
+export default (props) => {
+ const [notifications, setNotifications] = useState(NOTIFICATIONS_DATA);
+ const areNotificationsRead = notifications.reduce((acc, notif) => acc && notif.read, true);
+
+ const markNotificationsAsRead = () => {
+ setTimeout(() => {
+ setNotifications(notifications.map(n => ({ ...n, read: true })));
+ }, 300);
+ };
+
+
+ const Notification = (props) => {
+ const { link, sender, image, time, message, read = false } = props;
+ const readClassName = read ? "" : "text-danger";
+
+ return (
+
+
+
+
+
{sender}
+
+
+ {time}
+
+
{message}
+
+
+
+ );
+ };
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Notifications
+
+
+ {notifications.map(n =>
+ View all
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
diff --git a/src/components/Preloader.js b/src/components/Preloader.js
index 9933669c..13cf5eb7 100644
--- a/src/components/Preloader.js
+++ b/src/components/Preloader.js
@@ -1,16 +1,16 @@
-
-import React from 'react';
-import { Image } from '@themesberg/react-bootstrap';
-
-import ReactLogo from "../assets/img/technologies/react-logo-transparent.svg";
-
-export default (props) => {
-
- const { show } = props;
-
- return (
-
-
- );
-};
+
+import React from 'react';
+import { Image } from '@themesberg/react-bootstrap';
+
+import ReactLogo from "../assets/img/technologies/react-logo-transparent.svg";
+
+export default (props) => {
+
+ const { show } = props;
+
+ return (
+
+
+ );
+};
diff --git a/src/components/Progress.js b/src/components/Progress.js
index c8e3f6d6..f512df1a 100644
--- a/src/components/Progress.js
+++ b/src/components/Progress.js
@@ -1,23 +1,23 @@
-import React from "react";
-import { ProgressBar } from '@themesberg/react-bootstrap';
-
-export default (props) => {
- const { label, variant, value, type = "label", size = "md" } = props;
- const finalValue = value ? value : Math.floor(Math.random() * (Math.floor(100) - 20 + 1)) + 20; // generates a random number between 20 and 100
- const textColor = type === "label" ? variant : "white";
- const bgColorClass = type === "tooltip" ? `bg-${variant}` : "";
-
- return (
-
-
-
- {label}
-
-
- {finalValue}%
-
-
-
-
+
+
+ {label}
+
+
+ {finalValue}%
+
+
+
+
-
-
-
- {title}
-
-
-
-
- {children}
-
-
-
-
- );
- };
-
- const NavItem = (props) => {
- const { title, link, external, target, icon, image, badgeText, badgeBg = "secondary", badgeColor = "primary" } = props;
- const classNames = badgeText ? "d-flex justify-content-start align-items-center justify-content-between" : "";
- const navItemClassName = link === pathname ? "active" : "";
- const linkProps = external ? { href: link } : { as: Link, to: link };
-
- return (
- setShow(false)}>
-
-
- {icon ? {title}
-
- {badgeText ? (
- {badgeText}
- ) : null}
-
-
- );
- };
-
- return (
- <>
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Hi, Jane
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-};
+
+import React, { useState } from "react";
+import SimpleBar from 'simplebar-react';
+import { useLocation } from "react-router-dom";
+import { CSSTransition } from 'react-transition-group';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faBook, faBoxOpen, faChartPie, faCog, faFileAlt, faHandHoldingUsd, faSignOutAlt, faTable, faTimes, faCalendarAlt, faMapPin, faInbox, faRocket } from "@fortawesome/free-solid-svg-icons";
+import { Nav, Badge, Image, Button, Dropdown, Accordion, Navbar } from '@themesberg/react-bootstrap';
+import { Link } from 'react-router-dom';
+
+import { Routes } from "../routes";
+import ThemesbergLogo from "../assets/img/themesberg.svg";
+import ReactHero from "../assets/img/technologies/react-hero-logo.svg";
+import ProfilePicture from "../assets/img/team/profile-picture-3.jpg";
+
+export default (props = {}) => {
+ const location = useLocation();
+ const { pathname } = location;
+ const [show, setShow] = useState(false);
+ const showClass = show ? "show" : "";
+
+ const onCollapse = () => setShow(!show);
+
+ const CollapsableNavItem = (props) => {
+ const { eventKey, title, icon, children = null } = props;
+ const defaultKey = pathname.indexOf(eventKey) !== -1 ? eventKey : "";
+
+ return (
+
+
+
+
+ {title}
+
+
+
+
+ {children}
+
+
+
+
+ );
+ };
+
+ const NavItem = (props) => {
+ const { title, link, external, target, icon, image, badgeText, badgeBg = "secondary", badgeColor = "primary" } = props;
+ const classNames = badgeText ? "d-flex justify-content-start align-items-center justify-content-between" : "";
+ const navItemClassName = link === pathname ? "active" : "";
+ const linkProps = external ? { href: link } : { as: Link, to: link };
+
+ return (
+ setShow(false)}>
+
+
+ {icon ? {title}
+
+ {badgeText ? (
+ {badgeText}
+ ) : null}
+
+
+ );
+ };
+
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Hi, Jane
+
+
+
+
+
+
+
+
+
+ */}
+
+
+ */}
+
+ {/*
+ */}
+ {/*
+
+
+
+
+
+ );
+};
diff --git a/src/components/Tables.js b/src/components/Tables.js
index 817523e9..d6c52399 100644
--- a/src/components/Tables.js
+++ b/src/components/Tables.js
@@ -1,346 +1,346 @@
-
-import React from "react";
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faAngleDown, faAngleUp, faArrowDown, faArrowUp, faEdit, faEllipsisH, faExternalLinkAlt, faEye, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
-import { Col, Row, Nav, Card, Image, Button, Table, Dropdown, ProgressBar, Pagination, ButtonGroup } from '@themesberg/react-bootstrap';
-import { Link } from 'react-router-dom';
-
-import { Routes } from "../routes";
-import { pageVisits, pageTraffic, pageRanking } from "../data/tables";
-import transactions from "../data/transactions";
-import commands from "../data/commands";
-
-const ValueChange = ({ value, suffix }) => {
- const valueIcon = value < 0 ? faAngleDown : faAngleUp;
- const valueTxtColor = value < 0 ? "text-danger" : "text-success";
-
- return (
- value ?
-
- {Math.abs(value)}{suffix}
-
- : "--"
- );
-};
-
-export const PageVisitsTable = () => {
- const TableRow = (props) => {
- const { pageName, views, returnValue, bounceRate } = props;
- const bounceIcon = bounceRate < 0 ? faArrowDown : faArrowUp;
- const bounceTxtColor = bounceRate < 0 ? "text-danger" : "text-success";
-
- return (
-
- {pageName}
- {views}
- ${returnValue}
-
-
-
- );
- };
-
- return (
-
-
-
- Page visits
-
- See all
-
-
-
-
-
-
- Page name
- Page Views
- Page Value
- Bounce rate
-
-
-
- {pageVisits.map(pv =>
-
-
- );
-};
-
-export const PageTrafficTable = () => {
- const TableRow = (props) => {
- const { id, source, sourceIcon, sourceIconColor, sourceType, category, rank, trafficShare, change } = props;
-
- return (
-
-
- {id}
-
-
-
- {sourceType}
- {category ? category : "--"}
- {rank ? rank : "--"}
-
-
- {trafficShare}%
-
-
-
-
-
-
- );
- };
-
- return (
-
-
-
-
-
- #
- Traffic Source
- Source Type
- Category
- Global Rank
- Traffic Share
- Change
-
-
-
- {pageTraffic.map(pt =>
-
-
-
- );
-};
-
-export const RankingTable = () => {
- const TableRow = (props) => {
- const { country, countryImage, overallRank, overallRankChange, travelRank, travelRankChange, widgetsRank, widgetsRankChange } = props;
-
- return (
-
-
-
- {country}
-
-
-
- {overallRank ? overallRank : "-"}
-
-
-
-
- {travelRank ? travelRank : "-"}
-
-
-
-
- {widgetsRank ? widgetsRank : "-"}
-
-
-
-
- );
- };
-
- return (
-
-
-
-
-
- Country
- All
- All Change
- Travel & Local
- Travel & Local Change
- Widgets
- Widgets Change
-
-
-
- {pageRanking.map(r =>
-
-
-
- );
-};
-
-export const TransactionsTable = () => {
- const totalTransactions = transactions.length;
-
- const TableRow = (props) => {
- const { invoiceNumber, subscription, price, issueDate, dueDate, status } = props;
- const statusVariant = status === "Paid" ? "success"
- : status === "Due" ? "warning"
- : status === "Canceled" ? "danger" : "primary";
-
- return (
-
-
-
- {invoiceNumber}
-
-
-
-
- {subscription}
-
-
-
-
- {issueDate}
-
-
-
-
- {dueDate}
-
-
-
-
- ${parseFloat(price).toFixed(2)}
-
-
-
-
- {status}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
- };
-
- return (
-
-
-
-
-
- #
- Bill For
- Issue Date
- Due Date
- Total
- Status
- Action
-
-
-
- {transactions.map(t =>
-
-
-
-
-
- Previous
-
- 1
- 2
- 3
- 4
- 5
-
- Next
-
-
-
-
- Showing {totalTransactions} out of 25 entries
-
-
-
-
- );
-};
-
-export const CommandsTable = () => {
- const TableRow = (props) => {
- const { name, usage = [], description, link } = props;
-
- return (
-
-
- {name}
-
-
-
- {usage.map(u => (
-
- {u}
-
- ))}
-
-
-
- {description}
-
-
- Read More
-
- );
- };
-
- return (
-
-
-
-
-
- Name
- Usage
- Description
- Extra
-
-
-
- {commands.map(c =>
-
-
-
- );
+
+import React from "react";
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faAngleDown, faAngleUp, faArrowDown, faArrowUp, faEdit, faEllipsisH, faExternalLinkAlt, faEye, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
+import { Col, Row, Nav, Card, Image, Button, Table, Dropdown, ProgressBar, Pagination, ButtonGroup } from '@themesberg/react-bootstrap';
+import { Link } from 'react-router-dom';
+
+import { Routes } from "../routes";
+import { pageVisits, pageTraffic, pageRanking } from "../data/tables";
+import transactions from "../data/transactions";
+import commands from "../data/commands";
+
+const ValueChange = ({ value, suffix }) => {
+ const valueIcon = value < 0 ? faAngleDown : faAngleUp;
+ const valueTxtColor = value < 0 ? "text-danger" : "text-success";
+
+ return (
+ value ?
+
+ {Math.abs(value)}{suffix}
+
+ : "--"
+ );
+};
+
+export const PageVisitsTable = () => {
+ const TableRow = (props) => {
+ const { pageName, views, returnValue, bounceRate } = props;
+ const bounceIcon = bounceRate < 0 ? faArrowDown : faArrowUp;
+ const bounceTxtColor = bounceRate < 0 ? "text-danger" : "text-success";
+
+ return (
+
+ {pageName}
+ {views}
+ ${returnValue}
+
+
+
+ );
+ };
+
+ return (
+
+
+
+ Page visits
+
+ See all
+
+
+
+
+
+
+ Page name
+ Page Views
+ Page Value
+ Bounce rate
+
+
+
+ {pageVisits.map(pv =>
+
+
+ );
+};
+
+export const PageTrafficTable = () => {
+ const TableRow = (props) => {
+ const { id, source, sourceIcon, sourceIconColor, sourceType, category, rank, trafficShare, change } = props;
+
+ return (
+
+
+ {id}
+
+
+
+ {sourceType}
+ {category ? category : "--"}
+ {rank ? rank : "--"}
+
+
+ {trafficShare}%
+
+
+
+
+
+
+ );
+ };
+
+ return (
+
+
+
+
+
+ #
+ Traffic Source
+ Source Type
+ Category
+ Global Rank
+ Traffic Share
+ Change
+
+
+
+ {pageTraffic.map(pt =>
+
+
+
+ );
+};
+
+export const RankingTable = () => {
+ const TableRow = (props) => {
+ const { country, countryImage, overallRank, overallRankChange, travelRank, travelRankChange, widgetsRank, widgetsRankChange } = props;
+
+ return (
+
+
+
+ {country}
+
+
+
+ {overallRank ? overallRank : "-"}
+
+
+
+
+ {travelRank ? travelRank : "-"}
+
+
+
+
+ {widgetsRank ? widgetsRank : "-"}
+
+
+
+
+ );
+ };
+
+ return (
+
+
+
+
+
+ Country
+ All
+ All Change
+ Travel & Local
+ Travel & Local Change
+ Widgets
+ Widgets Change
+
+
+
+ {pageRanking.map(r =>
+
+
+
+ );
+};
+
+export const TransactionsTable = () => {
+ const totalTransactions = transactions.length;
+
+ const TableRow = (props) => {
+ const { invoiceNumber, subscription, price, issueDate, dueDate, status } = props;
+ const statusVariant = status === "Paid" ? "success"
+ : status === "Due" ? "warning"
+ : status === "Canceled" ? "danger" : "primary";
+
+ return (
+
+
+
+ {invoiceNumber}
+
+
+
+
+ {subscription}
+
+
+
+
+ {issueDate}
+
+
+
+
+ {dueDate}
+
+
+
+
+ ${parseFloat(price).toFixed(2)}
+
+
+
+
+ {status}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+ };
+
+ return (
+
+
+
+
+
+ #
+ Bill For
+ Issue Date
+ Due Date
+ Total
+ Status
+ Action
+
+
+
+ {transactions.map(t =>
+
+
+
+
+
+ Previous
+
+ 1
+ 2
+ 3
+ 4
+ 5
+
+ Next
+
+
+
+
+ Showing {totalTransactions} out of 25 entries
+
+
+
+
+ );
+};
+
+export const CommandsTable = () => {
+ const TableRow = (props) => {
+ const { name, usage = [], description, link } = props;
+
+ return (
+
+
+ {name}
+
+
+
+ {usage.map(u => (
+
+ {u}
+
+ ))}
+
+
+
+ {description}
+
+
+ Read More
+
+ );
+ };
+
+ return (
+
+
+
+
+
+ Name
+ Usage
+ Description
+ Extra
+
+
+
+ {commands.map(c =>
+
+
+
+ );
};
\ No newline at end of file
diff --git a/src/components/Widgets.js b/src/components/Widgets.js
index 3abb1a38..a3dff32f 100644
--- a/src/components/Widgets.js
+++ b/src/components/Widgets.js
@@ -1,401 +1,401 @@
-
-import React from "react";
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faAngleDown, faAngleUp, faChartArea, faChartBar, faChartLine, faFlagUsa, faFolderOpen, faGlobeEurope, faPaperclip, faUserPlus } from '@fortawesome/free-solid-svg-icons';
-import { faAngular, faBootstrap, faReact, faVuejs } from "@fortawesome/free-brands-svg-icons";
-import { Col, Row, Card, Image, Button, ListGroup, ProgressBar } from '@themesberg/react-bootstrap';
-import { CircleChart, BarChart, SalesValueChart, SalesValueChartphone } from "./Charts";
-
-import Profile1 from "../assets/img/team/profile-picture-1.jpg";
-import ProfileCover from "../assets/img/profile-cover.jpg";
-
-import teamMembers from "../data/teamMembers";
-
-
-export const ProfileCardWidget = () => {
- return (
-
-
-
- Neil Sims
- Senior Software Engineer
- New York, USA
-
-
-
- Send Message
-
-
- );
-};
-
-export const ChoosePhotoWidget = (props) => {
- const { title, photo } = props;
-
- return (
-
-
- {title}
-
-
-
-
-
-
-
-
-
-
-
Choose Image
-
JPG, GIF or PNG. Max size of 800K
-
-
-
-
-
-
- );
-};
-
-export const CounterWidget = (props) => {
- const { icon, iconColor, category, title, period, percentage } = props;
- const percentageIcon = percentage < 0 ? faAngleDown : faAngleUp;
- const percentageColor = percentage < 0 ? "text-danger" : "text-success";
-
- return (
-
-
-
-
-
-
-
{category}
- {title}
-
-
-
-
{category}
- {title}
-
- {period},
-
-
- {percentage}%
- Since last month
-
-
-
-
-
- );
-};
-
-export const CircleChartWidget = (props) => {
- const { title, data = [] } = props;
- const series = data.map(d => d.value);
-
- return (
-
-
-
- {title}
-
- {data.map(d => (
-
-
- ))}
-
-
-
-
- );
-};
-
-export const BarChartWidget = (props) => {
- const { title, value, percentage, data = [] } = props;
- const labels = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
- const series = data.map(d => d.value);
- const percentageIcon = percentage < 0 ? faAngleDown : faAngleUp;
- const percentageColor = percentage < 0 ? "text-danger" : "text-success";
-
- return (
-
-
-
-
{title}
- {value}
-
-
- {percentage}%
-
-
-
-
- {data.map(d => (
-
- {d.label}
-
- ))}
-
-
-
-
- );
-};
-
-export const TeamMembersWidget = () => {
- const TeamMember = (props) => {
- const { name, statusKey, image, icon, btnText } = props;
- const status = {
- online: { color: "success", label: "Online" },
- inMeeting: { color: "warning", label: "In a meeting" },
- offline: { color: "danger", label: "Offline" }
- };
-
- const statusColor = status[statusKey] ? status[statusKey].color : 'danger'
- , statusLabel = status[statusKey] ? status[statusKey].label : 'Offline';
-
- return (
-
-
-
-
-
- ●
- {statusLabel}
-
-
-
-
-
-
- );
- };
-
- return (
-
-
- Team members
- See all
-
-
-
- {teamMembers.map(tm =>
-
-
- );
-};
-
-export const ProgressTrackWidget = () => {
- const Progress = (props) => {
- const { title, percentage, icon, color, last = false } = props;
- const extraClassName = last ? "" : "mb-2";
-
- return (
-
-
-
-
-
-
-
{title}
-
- {percentage} %
-
-
-
-
- );
- };
-
- return (
-
-
- Progress track
-
-
-
-
-
- );
-};
-
-export const RankingWidget = () => {
- return (
-
-
-
-
-
-
-
- #755
-
-
-
-
-
- United States
-
-
-
- #32
-
-
-
-
- Travel > Accomodation
-
-
-
-
- #16
-
-
-
- );
-};
-
-export const SalesValueWidget = (props) => {
- const { title, value, percentage } = props;
- const percentageIcon = percentage < 0 ? faAngleDown : faAngleUp;
- const percentageColor = percentage < 0 ? "text-danger" : "text-success";
-
- return (
-
-
-
-
- {title}
-
- ${value}
-
- Yesterday
-
- {percentage}%
-
-
-
-
- Month
- Week
-
-
-
-
-
- );
-};
-
-export const SalesValueWidgetPhone = (props) => {
- const { title, value, percentage } = props;
- const percentageIcon = percentage < 0 ? faAngleDown : faAngleUp;
- const percentageColor = percentage < 0 ? "text-danger" : "text-success";
-
- return (
-
-
-
-
- {title}
-
- ${value}
-
- Yesterday
-
- {percentage}%
-
-
-
-
- Month
- Week
-
-
-
-
-
- );
-};
-
-export const AcquisitionWidget = () => {
- return (
-
-
- Acquisition
- Tells you where your visitors originated from, such as search engines, social networks or website referrals.
-
-
-
-
-
- Bounce Rate
-
33.50%
-
-
-
-
-
-
- Sessions
-
9,567
-
-
-
-
- );
-};
+
+import React from "react";
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faAngleDown, faAngleUp, faChartArea, faChartBar, faChartLine, faFlagUsa, faFolderOpen, faGlobeEurope, faPaperclip, faUserPlus } from '@fortawesome/free-solid-svg-icons';
+import { faAngular, faBootstrap, faReact, faVuejs } from "@fortawesome/free-brands-svg-icons";
+import { Col, Row, Card, Image, Button, ListGroup, ProgressBar } from '@themesberg/react-bootstrap';
+import { CircleChart, BarChart, SalesValueChart, SalesValueChartphone } from "./Charts";
+
+import Profile1 from "../assets/img/team/profile-picture-1.jpg";
+import ProfileCover from "../assets/img/profile-cover.jpg";
+
+import teamMembers from "../data/teamMembers";
+
+
+export const ProfileCardWidget = () => {
+ return (
+
+
+
+ Neil Sims
+ Senior Software Engineer
+ New York, USA
+
+
+
+ Send Message
+
+
+ );
+};
+
+export const ChoosePhotoWidget = (props) => {
+ const { title, photo } = props;
+
+ return (
+
+
+ {title}
+
+
+
+
+
+
+
+
+
+
+
Choose Image
+
JPG, GIF or PNG. Max size of 800K
+
+
+
+
+
+
+ );
+};
+
+export const CounterWidget = (props) => {
+ const { icon, iconColor, category, title, period, percentage } = props;
+ const percentageIcon = percentage < 0 ? faAngleDown : faAngleUp;
+ const percentageColor = percentage < 0 ? "text-danger" : "text-success";
+
+ return (
+
+
+
+
+
+
+
{category}
+ {title}
+
+
+
+
{category}
+ {title}
+
+ {period},
+
+
+ {percentage}%
+ Since last month
+
+
+
+
+
+ );
+};
+
+export const CircleChartWidget = (props) => {
+ const { title, data = [] } = props;
+ const series = data.map(d => d.value);
+
+ return (
+
+
+
+ {title}
+
+ {data.map(d => (
+
+
+ ))}
+
+
+
+
+ );
+};
+
+export const BarChartWidget = (props) => {
+ const { title, value, percentage, data = [] } = props;
+ const labels = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+ const series = data.map(d => d.value);
+ const percentageIcon = percentage < 0 ? faAngleDown : faAngleUp;
+ const percentageColor = percentage < 0 ? "text-danger" : "text-success";
+
+ return (
+
+
+
+
{title}
+ {value}
+
+
+ {percentage}%
+
+
+
+
+ {data.map(d => (
+
+ {d.label}
+
+ ))}
+
+
+
+
+ );
+};
+
+export const TeamMembersWidget = () => {
+ const TeamMember = (props) => {
+ const { name, statusKey, image, icon, btnText } = props;
+ const status = {
+ online: { color: "success", label: "Online" },
+ inMeeting: { color: "warning", label: "In a meeting" },
+ offline: { color: "danger", label: "Offline" }
+ };
+
+ const statusColor = status[statusKey] ? status[statusKey].color : 'danger'
+ , statusLabel = status[statusKey] ? status[statusKey].label : 'Offline';
+
+ return (
+
+
+
+
+
+ ●
+ {statusLabel}
+
+
+
+
+
+
+ );
+ };
+
+ return (
+
+
+ Team members
+ See all
+
+
+
+ {teamMembers.map(tm =>
+
+
+ );
+};
+
+export const ProgressTrackWidget = () => {
+ const Progress = (props) => {
+ const { title, percentage, icon, color, last = false } = props;
+ const extraClassName = last ? "" : "mb-2";
+
+ return (
+
+
+
+
+
+
+
{title}
+
+ {percentage} %
+
+
+
+
+ );
+ };
+
+ return (
+
+
+ Progress track
+
+
+
+
+
+ );
+};
+
+export const RankingWidget = () => {
+ return (
+
+
+
+
+
+
+
+ #755
+
+
+
+
+
+ United States
+
+
+
+ #32
+
+
+
+
+ Travel > Accomodation
+
+
+
+
+ #16
+
+
+
+ );
+};
+
+export const SalesValueWidget = (props) => {
+ const { title, value, percentage } = props;
+ const percentageIcon = percentage < 0 ? faAngleDown : faAngleUp;
+ const percentageColor = percentage < 0 ? "text-danger" : "text-success";
+
+ return (
+
+
+
+
+ {title}
+
+ ${value}
+
+ Yesterday
+
+ {percentage}%
+
+
+
+
+ Month
+ Week
+
+
+
+
+
+ );
+};
+
+export const SalesValueWidgetPhone = (props) => {
+ const { title, value, percentage } = props;
+ const percentageIcon = percentage < 0 ? faAngleDown : faAngleUp;
+ const percentageColor = percentage < 0 ? "text-danger" : "text-success";
+
+ return (
+
+
+
+
+ {title}
+
+ ${value}
+
+ Yesterday
+
+ {percentage}%
+
+
+
+
+ Month
+ Week
+
+
+
+
+
+ );
+};
+
+export const AcquisitionWidget = () => {
+ return (
+
+
+ Acquisition
+ Tells you where your visitors originated from, such as search engines, social networks or website referrals.
+
+
+
+
+
+ Bounce Rate
+
33.50%
+
+
+
+
+
+
+ Sessions
+
9,567
+
+
+
+
+ );
+};
diff --git a/src/data/charts.js b/src/data/charts.js
index 2cd45f42..4c6eff5c 100644
--- a/src/data/charts.js
+++ b/src/data/charts.js
@@ -1,18 +1,18 @@
-
-import { faDesktop, faMobileAlt, faTabletAlt } from '@fortawesome/free-solid-svg-icons';
-
-const trafficShares = [
- { id: 1, label: "Desktop", value: 60, color: "secondary", icon: faDesktop },
- { id: 2, label: "Mobile Web", value: 30, color: "primary", icon: faMobileAlt },
- { id: 3, label: "Tablet Web", value: 10, color: "tertiary", icon: faTabletAlt }
-];
-
-const totalOrders = [
- { id: 1, label: "July", value: [1, 5, 2, 5, 4, 3], color: "primary" },
- { id: 2, label: "August", value: [2, 3, 4, 8, 1, 2], color: "secondary" }
-];
-
-export {
- trafficShares,
- totalOrders
+
+import { faDesktop, faMobileAlt, faTabletAlt } from '@fortawesome/free-solid-svg-icons';
+
+const trafficShares = [
+ { id: 1, label: "Desktop", value: 60, color: "secondary", icon: faDesktop },
+ { id: 2, label: "Mobile Web", value: 30, color: "primary", icon: faMobileAlt },
+ { id: 3, label: "Tablet Web", value: 10, color: "tertiary", icon: faTabletAlt }
+];
+
+const totalOrders = [
+ { id: 1, label: "July", value: [1, 5, 2, 5, 4, 3], color: "primary" },
+ { id: 2, label: "August", value: [2, 3, 4, 8, 1, 2], color: "secondary" }
+];
+
+export {
+ trafficShares,
+ totalOrders
};
\ No newline at end of file
diff --git a/src/data/commands.js b/src/data/commands.js
index 82b82d18..a1e9efe4 100644
--- a/src/data/commands.js
+++ b/src/data/commands.js
@@ -1,38 +1,38 @@
-
-export default [
- {
- "id": 1,
- "name": "install",
- "usage": ["yarn install", "npm install"],
- "description": "This command installs a package, and any packages that it depends on.",
- "link": "https://docs.npmjs.com/cli/v6/commands/npm-install"
- },
- {
- "id": 2,
- "name": "start",
- "usage": ["yarn start", "npm start"],
- "description": "This will determinate the start of your development server.",
- "link": "https://create-react-app.dev/docs/available-scripts/#npm-start"
- },
- {
- "id": 3,
- "name": "build",
- "usage": ["yarn build", "npm build"],
- "description": "Builds the app for production to the build folder. \nIt correctly bundles React in production mode and optimizes the build \nfor the best performance.",
- "link": "https://create-react-app.dev/docs/available-scripts/#npm-run-build"
- },
- {
- "id": 4,
- "name": "test",
- "usage": ["yarn test", "npm run test"],
- "description": "Runs the test watcher in an interactive mode. \n(Note that we haven't implemented any tests - this command is by default \nfrom the create-react-app)",
- "link": "https://create-react-app.dev/docs/available-scripts/#npm-test"
- },
- {
- "id": 5,
- "name": "eject",
- "usage": ["yarn eject", "npm run eject"],
- "description": "This command will remove the single build dependency from your project. \nImportant! We don't recommend using this command because \nour product may break after using it.",
- "link": 7
- }
+
+export default [
+ {
+ "id": 1,
+ "name": "install",
+ "usage": ["yarn install", "npm install"],
+ "description": "This command installs a package, and any packages that it depends on.",
+ "link": "https://docs.npmjs.com/cli/v6/commands/npm-install"
+ },
+ {
+ "id": 2,
+ "name": "start",
+ "usage": ["yarn start", "npm start"],
+ "description": "This will determinate the start of your development server.",
+ "link": "https://create-react-app.dev/docs/available-scripts/#npm-start"
+ },
+ {
+ "id": 3,
+ "name": "build",
+ "usage": ["yarn build", "npm build"],
+ "description": "Builds the app for production to the build folder. \nIt correctly bundles React in production mode and optimizes the build \nfor the best performance.",
+ "link": "https://create-react-app.dev/docs/available-scripts/#npm-run-build"
+ },
+ {
+ "id": 4,
+ "name": "test",
+ "usage": ["yarn test", "npm run test"],
+ "description": "Runs the test watcher in an interactive mode. \n(Note that we haven't implemented any tests - this command is by default \nfrom the create-react-app)",
+ "link": "https://create-react-app.dev/docs/available-scripts/#npm-test"
+ },
+ {
+ "id": 5,
+ "name": "eject",
+ "usage": ["yarn eject", "npm run eject"],
+ "description": "This command will remove the single build dependency from your project. \nImportant! We don't recommend using this command because \nour product may break after using it.",
+ "link": 7
+ }
];
\ No newline at end of file
diff --git a/src/data/features.js b/src/data/features.js
index fdc1dd36..7c53f831 100644
--- a/src/data/features.js
+++ b/src/data/features.js
@@ -1,79 +1,79 @@
-
-import { faCalendarAlt, faFileAlt, faImages, faMapMarkedAlt, faMobileAlt, faPenFancy } from "@fortawesome/free-solid-svg-icons";
-import { faAccessibleIcon, faBootstrap, faGulp, faHtml5, faReact, faSass } from "@fortawesome/free-brands-svg-icons";
-
-
-export default [
- {
- "id": 0,
- "title": "React.js",
- "icon": faReact,
- "description": "The most popular front-end library in the world"
- },
- {
- "id": 1,
- "title": "Bootstrap 5",
- "icon": faBootstrap,
- "description": "Built with the most popular CSS Framework"
- },
- {
- "id": 2,
- "title": "Sass",
- "icon": faSass,
- "description": "Variables and mixins to empower development"
- },
- {
- "id": 3,
- "title": "Responsive",
- "icon": faMobileAlt,
- "description": "All pages and components are 100% responsive"
- },
- {
- "id": 4,
- "title": "Gulp",
- "icon": faGulp,
- "description": "Gulp & BrowserSync for a flawless workflow"
- },
- {
- "id": 5,
- "title": "Creative rights",
- "icon": faImages,
- "description": "All images, icons and fonts are licensed & free to use"
- },
- {
- "id": 6,
- "title": "Documentation",
- "icon": faFileAlt,
- "description": "Everything that comes with Rocket is well documented"
- },
- {
- "id": 7,
- "title": "WCAG Accessibility",
- "icon": faAccessibleIcon,
- "description": "Accessibility oriented design and functionality"
- },
- {
- "id": 8,
- "title": "W3C Validated",
- "icon": faHtml5,
- "description": "HTML pages are all valid by W3C Standards"
- },
- {
- "id": 10,
- "title": "Calendar",
- "icon": faCalendarAlt,
- "description": "Advanced integration with FullCalendar.js"
- },
- {
- "id": 11,
- "title": "Mapbox",
- "icon": faMapMarkedAlt,
- "description": "Custom integration with markers and cards"
- },
- {
- "id": 12,
- "title": "Design",
- "icon": faPenFancy,
- "description": "Crafted by professional UI/UX designers"
- }
+
+import { faCalendarAlt, faFileAlt, faImages, faMapMarkedAlt, faMobileAlt, faPenFancy } from "@fortawesome/free-solid-svg-icons";
+import { faAccessibleIcon, faBootstrap, faGulp, faHtml5, faReact, faSass } from "@fortawesome/free-brands-svg-icons";
+
+
+export default [
+ {
+ "id": 0,
+ "title": "React.js",
+ "icon": faReact,
+ "description": "The most popular front-end library in the world"
+ },
+ {
+ "id": 1,
+ "title": "Bootstrap 5",
+ "icon": faBootstrap,
+ "description": "Built with the most popular CSS Framework"
+ },
+ {
+ "id": 2,
+ "title": "Sass",
+ "icon": faSass,
+ "description": "Variables and mixins to empower development"
+ },
+ {
+ "id": 3,
+ "title": "Responsive",
+ "icon": faMobileAlt,
+ "description": "All pages and components are 100% responsive"
+ },
+ {
+ "id": 4,
+ "title": "Gulp",
+ "icon": faGulp,
+ "description": "Gulp & BrowserSync for a flawless workflow"
+ },
+ {
+ "id": 5,
+ "title": "Creative rights",
+ "icon": faImages,
+ "description": "All images, icons and fonts are licensed & free to use"
+ },
+ {
+ "id": 6,
+ "title": "Documentation",
+ "icon": faFileAlt,
+ "description": "Everything that comes with Rocket is well documented"
+ },
+ {
+ "id": 7,
+ "title": "WCAG Accessibility",
+ "icon": faAccessibleIcon,
+ "description": "Accessibility oriented design and functionality"
+ },
+ {
+ "id": 8,
+ "title": "W3C Validated",
+ "icon": faHtml5,
+ "description": "HTML pages are all valid by W3C Standards"
+ },
+ {
+ "id": 10,
+ "title": "Calendar",
+ "icon": faCalendarAlt,
+ "description": "Advanced integration with FullCalendar.js"
+ },
+ {
+ "id": 11,
+ "title": "Mapbox",
+ "icon": faMapMarkedAlt,
+ "description": "Custom integration with markers and cards"
+ },
+ {
+ "id": 12,
+ "title": "Design",
+ "icon": faPenFancy,
+ "description": "Crafted by professional UI/UX designers"
+ }
];
\ No newline at end of file
diff --git a/src/data/notifications.js b/src/data/notifications.js
index dd3f096c..136eccf9 100644
--- a/src/data/notifications.js
+++ b/src/data/notifications.js
@@ -1,54 +1,54 @@
-
-import Profile1 from "../assets/img/team/profile-picture-1.jpg"
-import Profile2 from "../assets/img/team/profile-picture-2.jpg"
-import Profile3 from "../assets/img/team/profile-picture-3.jpg"
-import Profile4 from "../assets/img/team/profile-picture-4.jpg"
-import Profile5 from "../assets/img/team/profile-picture-5.jpg"
-
-export default [
- {
- "id": 1,
- "read": false,
- "image": Profile1,
- "sender": "Jose Leos",
- "time": "a few moments ago",
- "link": "#",
- "message": `Added you to an event "Project stand-up" tomorrow at 12:30 AM.`
- },
- {
- "id": 2,
- "read": false,
- "image": Profile2,
- "sender": "Neil Sims",
- "time": "2 hrs ago",
- "link": "#",
- "message": `You've been assigned a task for "Awesome new project".`
- },
- {
- "id": 3,
- "read": false,
- "image": Profile3,
- "sender": "Roberta Casas",
- "time": "5 hrs ago",
- "link": "#",
- "message": `Tagged you in a document called "First quarter financial plans".`
- },
- {
- "id": 4,
- "read": true,
- "image": Profile4,
- "sender": "Joseph Garth",
- "time": "1 day ago",
- "link": "#",
- "message": `New message: "Hey, what's up? All set for the presentation?"`
- },
- {
- "id": 5,
- "read": true,
- "image": Profile5,
- "sender": "Jose Leos",
- "time": "2 days ago",
- "link": "#",
- "message": `New message: "We need to improve the UI/UX for the landing page."`
- },
+
+import Profile1 from "../assets/img/team/profile-picture-1.jpg"
+import Profile2 from "../assets/img/team/profile-picture-2.jpg"
+import Profile3 from "../assets/img/team/profile-picture-3.jpg"
+import Profile4 from "../assets/img/team/profile-picture-4.jpg"
+import Profile5 from "../assets/img/team/profile-picture-5.jpg"
+
+export default [
+ {
+ "id": 1,
+ "read": false,
+ "image": Profile1,
+ "sender": "Jose Leos",
+ "time": "a few moments ago",
+ "link": "#",
+ "message": `Added you to an event "Project stand-up" tomorrow at 12:30 AM.`
+ },
+ {
+ "id": 2,
+ "read": false,
+ "image": Profile2,
+ "sender": "Neil Sims",
+ "time": "2 hrs ago",
+ "link": "#",
+ "message": `You've been assigned a task for "Awesome new project".`
+ },
+ {
+ "id": 3,
+ "read": false,
+ "image": Profile3,
+ "sender": "Roberta Casas",
+ "time": "5 hrs ago",
+ "link": "#",
+ "message": `Tagged you in a document called "First quarter financial plans".`
+ },
+ {
+ "id": 4,
+ "read": true,
+ "image": Profile4,
+ "sender": "Joseph Garth",
+ "time": "1 day ago",
+ "link": "#",
+ "message": `New message: "Hey, what's up? All set for the presentation?"`
+ },
+ {
+ "id": 5,
+ "read": true,
+ "image": Profile5,
+ "sender": "Jose Leos",
+ "time": "2 days ago",
+ "link": "#",
+ "message": `New message: "We need to improve the UI/UX for the landing page."`
+ },
]
\ No newline at end of file
diff --git a/src/data/pages.js b/src/data/pages.js
index a44494df..6adc16c3 100644
--- a/src/data/pages.js
+++ b/src/data/pages.js
@@ -1,77 +1,77 @@
-
-import OverviewImg from "../assets/img/pages/overview.jpg";
-import TransactionsImg from "../assets/img/pages/transactions.jpg";
-import SettingsImg from "../assets/img/pages/settings.jpg";
-import SignInImg from "../assets/img/pages/sign-in.jpg";
-import SignUpImg from "../assets/img/pages/sign-up.jpg";
-import LockImg from "../assets/img/pages/lock.jpg";
-import ForgotPasswordImg from "../assets/img/pages/forgot-password.jpg";
-import ResetPasswordImg from "../assets/img/pages/reset-password.jpg";
-import NotFoundImg from "../assets/img/pages/404.jpg";
-import ServerErrorImg from "../assets/img/pages/500.jpg";
-
-import { Routes } from "../routes";
-
-
-export default [
- {
- "id": 1,
- "name": "Overview",
- "image": OverviewImg,
- "link": Routes.DashboardOverview.path
- },
- {
- "id": 2,
- "name": "Transactions",
- "image": TransactionsImg,
- "link": Routes.Transactions.path
- },
- {
- "id": 3,
- "name": "Settings",
- "image": SettingsImg,
- "link": Routes.Settings.path
- },
- {
- "id": 4,
- "name": "Sign In",
- "image": SignInImg,
- "link": Routes.Signin
- },
- {
- "id": 5,
- "name": "Sign Up",
- "image": SignUpImg,
- "link": Routes.Signup.path
- },
- {
- "id": 6,
- "name": "Lock",
- "image": LockImg,
- "link": Routes.Lock.path
- },
- {
- "id": 7,
- "name": "Forgot password",
- "image": ForgotPasswordImg,
- "link": Routes.ForgotPassword.path
- },
- {
- "id": 8,
- "name": "Reset password",
- "image": ResetPasswordImg,
- "link": Routes.ResetPassword.path
- },
- {
- "id": 9,
- "name": "404",
- "image": NotFoundImg,
- "link": Routes.NotFound.path
- },
- {
- "id": 10,
- "name": "500",
- "image": ServerErrorImg,
- "link": Routes.ServerError.path
- }
+
+import OverviewImg from "../assets/img/pages/overview.jpg";
+import TransactionsImg from "../assets/img/pages/transactions.jpg";
+import SettingsImg from "../assets/img/pages/settings.jpg";
+import SignInImg from "../assets/img/pages/sign-in.jpg";
+import SignUpImg from "../assets/img/pages/sign-up.jpg";
+import LockImg from "../assets/img/pages/lock.jpg";
+import ForgotPasswordImg from "../assets/img/pages/forgot-password.jpg";
+import ResetPasswordImg from "../assets/img/pages/reset-password.jpg";
+import NotFoundImg from "../assets/img/pages/404.jpg";
+import ServerErrorImg from "../assets/img/pages/500.jpg";
+
+import { Routes } from "../routes";
+
+
+export default [
+ {
+ "id": 1,
+ "name": "Overview",
+ "image": OverviewImg,
+ "link": Routes.DashboardOverview.path
+ },
+ {
+ "id": 2,
+ "name": "Transactions",
+ "image": TransactionsImg,
+ "link": Routes.Transactions.path
+ },
+ {
+ "id": 3,
+ "name": "Settings",
+ "image": SettingsImg,
+ "link": Routes.Settings.path
+ },
+ {
+ "id": 4,
+ "name": "Sign In",
+ "image": SignInImg,
+ "link": Routes.Signin
+ },
+ {
+ "id": 5,
+ "name": "Sign Up",
+ "image": SignUpImg,
+ "link": Routes.Signup.path
+ },
+ {
+ "id": 6,
+ "name": "Lock",
+ "image": LockImg,
+ "link": Routes.Lock.path
+ },
+ {
+ "id": 7,
+ "name": "Forgot password",
+ "image": ForgotPasswordImg,
+ "link": Routes.ForgotPassword.path
+ },
+ {
+ "id": 8,
+ "name": "Reset password",
+ "image": ResetPasswordImg,
+ "link": Routes.ResetPassword.path
+ },
+ {
+ "id": 9,
+ "name": "404",
+ "image": NotFoundImg,
+ "link": Routes.NotFound.path
+ },
+ {
+ "id": 10,
+ "name": "500",
+ "image": ServerErrorImg,
+ "link": Routes.ServerError.path
+ }
];
\ No newline at end of file
diff --git a/src/data/tables.js b/src/data/tables.js
index ac29219a..05133cad 100644
--- a/src/data/tables.js
+++ b/src/data/tables.js
@@ -1,50 +1,50 @@
-
-import { faGoogle, faTwitter, faYahoo, faYoutube } from '@fortawesome/free-brands-svg-icons';
-import { faGlobeEurope, } from '@fortawesome/free-solid-svg-icons';
-
-import USAFlag from '../assets/img/flags/united-states-of-america.svg';
-import CanadaFlag from '../assets/img/flags/canada.svg';
-import GermanyFlag from '../assets/img/flags/germany.svg';
-import FranceFlag from '../assets/img/flags/france.svg';
-import JapanFlag from '../assets/img/flags/japan.svg';
-import ItalyFlag from '../assets/img/flags/italy.svg';
-
-
-const pageVisits = [
- { id: 1, views: 4.525, returnValue: 255, bounceRate: 42.55, pageName: "/demo/admin/index.html" },
- { id: 2, views: 2.987, returnValue: 139, bounceRate: -43.52, pageName: "/demo/admin/forms.html" },
- { id: 3, views: 2.844, returnValue: 124, bounceRate: -32.35, pageName: "/demo/admin/util.html" },
- { id: 4, views: 1.220, returnValue: 55, bounceRate: 15.78, pageName: "/demo/admin/validation.html" },
- { id: 5, views: 505, returnValue: 3, bounceRate: -75.12, pageName: "/demo/admin/modals.html" }
-];
-
-const pageTraffic = [
- { id: 1, source: "Direct", sourceType: "Direct", trafficShare: 51, change: 2.45, sourceIcon: faGlobeEurope, sourceIconColor: "gray" },
- { id: 2, source: "Google Search", sourceType: "Search / Organic", trafficShare: 18, change: 17.67, sourceIcon: faGoogle, sourceIconColor: "info" },
- { id: 3, source: "youtube.com", sourceType: "Social", category: "Arts and Entertainment", rank: 2, trafficShare: 27, sourceIcon: faYoutube, sourceIconColor: "danger" },
- { id: 4, source: "yahoo.com", sourceType: "Referral", category: "News and Media", rank: 11, trafficShare: 8, change: -9.30, sourceIcon: faYahoo, sourceIconColor: "purple" },
- { id: 5, source: "twitter.com", sourceType: "Social", category: "Social Networks", rank: 4, trafficShare: 4, sourceIcon: faTwitter, sourceIconColor: "info" }
-];
-
-const pageRanking = [
- { id: 1, country: "United States", countryImage: USAFlag, overallRank: 76, overallRankChange: -5, travelRank: 3, widgetsRank: 32, widgetsRankChange: 3 },
- { id: 2, country: "Canada", countryImage: CanadaFlag, overallRank: 106, overallRankChange: 17, travelRank: 4, widgetsRank: 30, widgetsRankChange: 3 },
- { id: 4, country: "France", countryImage: FranceFlag, overallRank: 112, overallRankChange: 10, travelRank: 5, widgetsRank: 34, widgetsRankChange: 7 },
- { id: 5, country: "Japan", countryImage: JapanFlag, overallRank: 115, overallRankChange: 3, travelRank: 7, travelRankChange: 1, widgetsRank: 39, widgetsRankChange: -2 },
- { id: 3, country: "Germany", countryImage: GermanyFlag, overallRank: 147, overallRankChange: -12, travelRank: 10, travelRankChange: -1, widgetsRank: 12, widgetsRankChange: -5 },
- { id: 6, country: "Italy", countryImage: ItalyFlag, overallRank: 220, overallRankChange: -56, travelRank: 11, travelRankChange: -3, widgetsRank: 89, widgetsRankChange: 2 }
-];
-
-const invoiceItems = [
- { id: 1, item: "Origin License", description: "Extended License", price: "999,00", quantity: 1 },
- { id: 2, item: "Custom Services", description: "Instalation and Customization (cost per hour)", price: "150,00", quantity: 20 },
- { id: 3, item: "Hosting", description: "1 year subcription", price: "499,00", quantity: 1 },
- { id: 4, item: "Platinum Support", description: "1 year subcription 24/7", price: "3999,00", quantity: 1 },
-];
-
-export {
- pageVisits,
- pageTraffic,
- pageRanking,
- invoiceItems,
+
+import { faGoogle, faTwitter, faYahoo, faYoutube } from '@fortawesome/free-brands-svg-icons';
+import { faGlobeEurope, } from '@fortawesome/free-solid-svg-icons';
+
+import USAFlag from '../assets/img/flags/united-states-of-america.svg';
+import CanadaFlag from '../assets/img/flags/canada.svg';
+import GermanyFlag from '../assets/img/flags/germany.svg';
+import FranceFlag from '../assets/img/flags/france.svg';
+import JapanFlag from '../assets/img/flags/japan.svg';
+import ItalyFlag from '../assets/img/flags/italy.svg';
+
+
+const pageVisits = [
+ { id: 1, views: 4.525, returnValue: 255, bounceRate: 42.55, pageName: "/demo/admin/index.html" },
+ { id: 2, views: 2.987, returnValue: 139, bounceRate: -43.52, pageName: "/demo/admin/forms.html" },
+ { id: 3, views: 2.844, returnValue: 124, bounceRate: -32.35, pageName: "/demo/admin/util.html" },
+ { id: 4, views: 1.220, returnValue: 55, bounceRate: 15.78, pageName: "/demo/admin/validation.html" },
+ { id: 5, views: 505, returnValue: 3, bounceRate: -75.12, pageName: "/demo/admin/modals.html" }
+];
+
+const pageTraffic = [
+ { id: 1, source: "Direct", sourceType: "Direct", trafficShare: 51, change: 2.45, sourceIcon: faGlobeEurope, sourceIconColor: "gray" },
+ { id: 2, source: "Google Search", sourceType: "Search / Organic", trafficShare: 18, change: 17.67, sourceIcon: faGoogle, sourceIconColor: "info" },
+ { id: 3, source: "youtube.com", sourceType: "Social", category: "Arts and Entertainment", rank: 2, trafficShare: 27, sourceIcon: faYoutube, sourceIconColor: "danger" },
+ { id: 4, source: "yahoo.com", sourceType: "Referral", category: "News and Media", rank: 11, trafficShare: 8, change: -9.30, sourceIcon: faYahoo, sourceIconColor: "purple" },
+ { id: 5, source: "twitter.com", sourceType: "Social", category: "Social Networks", rank: 4, trafficShare: 4, sourceIcon: faTwitter, sourceIconColor: "info" }
+];
+
+const pageRanking = [
+ { id: 1, country: "United States", countryImage: USAFlag, overallRank: 76, overallRankChange: -5, travelRank: 3, widgetsRank: 32, widgetsRankChange: 3 },
+ { id: 2, country: "Canada", countryImage: CanadaFlag, overallRank: 106, overallRankChange: 17, travelRank: 4, widgetsRank: 30, widgetsRankChange: 3 },
+ { id: 4, country: "France", countryImage: FranceFlag, overallRank: 112, overallRankChange: 10, travelRank: 5, widgetsRank: 34, widgetsRankChange: 7 },
+ { id: 5, country: "Japan", countryImage: JapanFlag, overallRank: 115, overallRankChange: 3, travelRank: 7, travelRankChange: 1, widgetsRank: 39, widgetsRankChange: -2 },
+ { id: 3, country: "Germany", countryImage: GermanyFlag, overallRank: 147, overallRankChange: -12, travelRank: 10, travelRankChange: -1, widgetsRank: 12, widgetsRankChange: -5 },
+ { id: 6, country: "Italy", countryImage: ItalyFlag, overallRank: 220, overallRankChange: -56, travelRank: 11, travelRankChange: -3, widgetsRank: 89, widgetsRankChange: 2 }
+];
+
+const invoiceItems = [
+ { id: 1, item: "Origin License", description: "Extended License", price: "999,00", quantity: 1 },
+ { id: 2, item: "Custom Services", description: "Instalation and Customization (cost per hour)", price: "150,00", quantity: 20 },
+ { id: 3, item: "Hosting", description: "1 year subcription", price: "499,00", quantity: 1 },
+ { id: 4, item: "Platinum Support", description: "1 year subcription 24/7", price: "3999,00", quantity: 1 },
+];
+
+export {
+ pageVisits,
+ pageTraffic,
+ pageRanking,
+ invoiceItems,
};
\ No newline at end of file
diff --git a/src/data/teamMembers.js b/src/data/teamMembers.js
index 9eee0e44..3513705f 100644
--- a/src/data/teamMembers.js
+++ b/src/data/teamMembers.js
@@ -1,42 +1,42 @@
-
-import { faCalendarCheck, faComment } from '@fortawesome/free-solid-svg-icons';
-
-import Profile1 from "../assets/img/team/profile-picture-1.jpg"
-import Profile2 from "../assets/img/team/profile-picture-2.jpg"
-import Profile3 from "../assets/img/team/profile-picture-3.jpg"
-import Profile4 from "../assets/img/team/profile-picture-4.jpg"
-
-export default [
- {
- "id": 1,
- "image": Profile1,
- "name": "Christopher Wood",
- "statusKey": "online",
- "icon": faCalendarCheck,
- "btnText": "Invite"
- },
- {
- "id": 2,
- "image": Profile2,
- "name": "Jose Leos",
- "statusKey": "inMeeting",
- "icon": faComment,
- "btnText": "Message"
- },
- {
- "id": 3,
- "image": Profile3,
- "name": "Bonnie Green",
- "statusKey": "offline",
- "icon": faCalendarCheck,
- "btnText": "Invite"
- },
- {
- "id": 4,
- "image": Profile4,
- "name": "Neil Sims",
- "statusKey": "online",
- "icon": faComment,
- "btnText": "Message"
- }
+
+import { faCalendarCheck, faComment } from '@fortawesome/free-solid-svg-icons';
+
+import Profile1 from "../assets/img/team/profile-picture-1.jpg"
+import Profile2 from "../assets/img/team/profile-picture-2.jpg"
+import Profile3 from "../assets/img/team/profile-picture-3.jpg"
+import Profile4 from "../assets/img/team/profile-picture-4.jpg"
+
+export default [
+ {
+ "id": 1,
+ "image": Profile1,
+ "name": "Christopher Wood",
+ "statusKey": "online",
+ "icon": faCalendarCheck,
+ "btnText": "Invite"
+ },
+ {
+ "id": 2,
+ "image": Profile2,
+ "name": "Jose Leos",
+ "statusKey": "inMeeting",
+ "icon": faComment,
+ "btnText": "Message"
+ },
+ {
+ "id": 3,
+ "image": Profile3,
+ "name": "Bonnie Green",
+ "statusKey": "offline",
+ "icon": faCalendarCheck,
+ "btnText": "Invite"
+ },
+ {
+ "id": 4,
+ "image": Profile4,
+ "name": "Neil Sims",
+ "statusKey": "online",
+ "icon": faComment,
+ "btnText": "Message"
+ }
]
\ No newline at end of file
diff --git a/src/data/transactions.js b/src/data/transactions.js
index 4faee425..64cc89ca 100644
--- a/src/data/transactions.js
+++ b/src/data/transactions.js
@@ -1,85 +1,85 @@
-
-import moment from "moment-timezone";
-
-export default [
- {
- "invoiceNumber": 300500,
- "status": "Paid",
- "subscription": "Platinum Subscription Plan",
- "price": "799,00",
- "issueDate": moment().subtract(1, "days").format("DD MMM YYYY"),
- "dueDate": moment().subtract(1, "days").add(1, "month").format("DD MMM YYYY")
- },
- {
- "invoiceNumber": 300499,
- "status": "Paid",
- "subscription": "Platinum Subscription Plan",
- "price": "799,00",
- "issueDate": moment().subtract(2, "days").format("DD MMM YYYY"),
- "dueDate": moment().subtract(2, "days").add(1, "month").format("DD MMM YYYY")
- },
- {
- "invoiceNumber": 300498,
- "status": "Paid",
- "subscription": "Platinum Subscription Plan",
- "price": "799,00",
- "issueDate": moment().subtract(2, "days").format("DD MMM YYYY"),
- "dueDate": moment().subtract(2, "days").add(1, "month").format("DD MMM YYYY")
- },
- {
- "invoiceNumber": 300497,
- "status": "Paid",
- "subscription": "Flexible Subscription Plan",
- "price": "233,42",
- "issueDate": moment().subtract(3, "days").format("DD MMM YYYY"),
- "dueDate": moment().subtract(3, "days").add(1, "month").format("DD MMM YYYY")
- },
- {
- "invoiceNumber": 300496,
- "status": "Due",
- "subscription": "Gold Subscription Plan",
- "price": "533,42",
- "issueDate": moment().subtract(1, "day").subtract(1, "month").format("DD MMM YYYY"),
- "dueDate": moment().subtract(1, "day").format("DD MMM YYYY")
- },
- {
- "invoiceNumber": 300495,
- "status": "Due",
- "subscription": "Gold Subscription Plan",
- "price": "533,42",
- "issueDate": moment().subtract(3, "days").subtract(1, "month").format("DD MMM YYYY"),
- "dueDate": moment().subtract(3, "days").format("DD MMM YYYY")
- },
- {
- "invoiceNumber": 300494,
- "status": "Due",
- "subscription": "Flexible Subscription Plan",
- "price": "233,42",
- "issueDate": moment().subtract(4, "days").subtract(1, "month").format("DD MMM YYYY"),
- "dueDate": moment().subtract(4, "days").format("DD MMM YYYY")
- },
- {
- "invoiceNumber": 300493,
- "status": "Canceled",
- "subscription": "Gold Subscription Plan",
- "price": "533,42",
- "issueDate": moment().subtract(20, "days").subtract(1, "month").format("DD MMM YYYY"),
- "dueDate": moment().subtract(20, "days").format("DD MMM YYYY")
- },
- {
- "invoiceNumber": 300492,
- "status": "Canceled",
- "subscription": "Platinum Subscription Plan",
- "price": "799,00",
- "issueDate": moment().subtract(2, "months").format("DD MMM YYYY"),
- "dueDate": moment().subtract(3, "months").format("DD MMM YYYY")
- },
- {
- "invoiceNumber": 300491,
- "status": "Paid",
- "subscription": "Platinum Subscription Plan",
- "price": "799,00",
- "issueDate": moment().subtract(6, "days").format("DD MMM YYYY"),
- "dueDate": moment().subtract(6, "days").add(1, "month").format("DD MMM YYYY")
- }
+
+import moment from "moment-timezone";
+
+export default [
+ {
+ "invoiceNumber": 300500,
+ "status": "Paid",
+ "subscription": "Platinum Subscription Plan",
+ "price": "799,00",
+ "issueDate": moment().subtract(1, "days").format("DD MMM YYYY"),
+ "dueDate": moment().subtract(1, "days").add(1, "month").format("DD MMM YYYY")
+ },
+ {
+ "invoiceNumber": 300499,
+ "status": "Paid",
+ "subscription": "Platinum Subscription Plan",
+ "price": "799,00",
+ "issueDate": moment().subtract(2, "days").format("DD MMM YYYY"),
+ "dueDate": moment().subtract(2, "days").add(1, "month").format("DD MMM YYYY")
+ },
+ {
+ "invoiceNumber": 300498,
+ "status": "Paid",
+ "subscription": "Platinum Subscription Plan",
+ "price": "799,00",
+ "issueDate": moment().subtract(2, "days").format("DD MMM YYYY"),
+ "dueDate": moment().subtract(2, "days").add(1, "month").format("DD MMM YYYY")
+ },
+ {
+ "invoiceNumber": 300497,
+ "status": "Paid",
+ "subscription": "Flexible Subscription Plan",
+ "price": "233,42",
+ "issueDate": moment().subtract(3, "days").format("DD MMM YYYY"),
+ "dueDate": moment().subtract(3, "days").add(1, "month").format("DD MMM YYYY")
+ },
+ {
+ "invoiceNumber": 300496,
+ "status": "Due",
+ "subscription": "Gold Subscription Plan",
+ "price": "533,42",
+ "issueDate": moment().subtract(1, "day").subtract(1, "month").format("DD MMM YYYY"),
+ "dueDate": moment().subtract(1, "day").format("DD MMM YYYY")
+ },
+ {
+ "invoiceNumber": 300495,
+ "status": "Due",
+ "subscription": "Gold Subscription Plan",
+ "price": "533,42",
+ "issueDate": moment().subtract(3, "days").subtract(1, "month").format("DD MMM YYYY"),
+ "dueDate": moment().subtract(3, "days").format("DD MMM YYYY")
+ },
+ {
+ "invoiceNumber": 300494,
+ "status": "Due",
+ "subscription": "Flexible Subscription Plan",
+ "price": "233,42",
+ "issueDate": moment().subtract(4, "days").subtract(1, "month").format("DD MMM YYYY"),
+ "dueDate": moment().subtract(4, "days").format("DD MMM YYYY")
+ },
+ {
+ "invoiceNumber": 300493,
+ "status": "Canceled",
+ "subscription": "Gold Subscription Plan",
+ "price": "533,42",
+ "issueDate": moment().subtract(20, "days").subtract(1, "month").format("DD MMM YYYY"),
+ "dueDate": moment().subtract(20, "days").format("DD MMM YYYY")
+ },
+ {
+ "invoiceNumber": 300492,
+ "status": "Canceled",
+ "subscription": "Platinum Subscription Plan",
+ "price": "799,00",
+ "issueDate": moment().subtract(2, "months").format("DD MMM YYYY"),
+ "dueDate": moment().subtract(3, "months").format("DD MMM YYYY")
+ },
+ {
+ "invoiceNumber": 300491,
+ "status": "Paid",
+ "subscription": "Platinum Subscription Plan",
+ "price": "799,00",
+ "issueDate": moment().subtract(6, "days").format("DD MMM YYYY"),
+ "dueDate": moment().subtract(6, "days").add(1, "month").format("DD MMM YYYY")
+ }
]
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index a3bbe3c7..fa0869b0 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,35 +1,41 @@
-// =========================================================
-// * Volt React Dashboard
-// =========================================================
-
-// * Product Page: https://themesberg.com/product/dashboard/volt-react
-// * Copyright 2021 Themesberg (https://www.themesberg.com)
-// * Official Repository: https://github.com/themesberg/volt-react-dashboard
-// * License: MIT License (https://themesberg.com/licensing)
-
-// * Designed and coded by https://themesberg.com
-
-// =========================================================
-
-// * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. Please contact us to request a removal.
-
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { HashRouter } from "react-router-dom";
-
-// core styles
-import "./scss/volt.scss";
-
-// vendor styles
-import "react-datetime/css/react-datetime.css";
-
-import HomePage from "./pages/HomePage";
-import ScrollToTop from "./components/ScrollToTop";
-
-ReactDOM.render(
-
- ,
- document.getElementById("root")
-);
+// =========================================================
+// * Volt React Dashboard
+// =========================================================
+
+// * Product Page: https://themesberg.com/product/dashboard/volt-react
+// * Copyright 2021 Themesberg (https://www.themesberg.com)
+// * Official Repository: https://github.com/themesberg/volt-react-dashboard
+// * License: MIT License (https://themesberg.com/licensing)
+
+// * Designed and coded by https://themesberg.com
+
+// =========================================================
+
+// * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. Please contact us to request a removal.
+
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { HashRouter } from "react-router-dom";
+import 'bootstrap';
+import 'bootstrap/dist/css/bootstrap.css';
+
+
+
+// core styles
+// import "./scss/volt.scss";
+import "./scss/volt.css"
+
+// vendor styles
+import "react-datetime/css/react-datetime.css";
+
+
+import HomePage from "./pages/HomePage";
+import ScrollToTop from "./components/ScrollToTop";
+
+ReactDOM.render(
+
+ ,
+ document.getElementById("root")
+);
diff --git a/src/pages/HomePage.js b/src/pages/HomePage.js
index 6a9b51db..37bf72bd 100644
--- a/src/pages/HomePage.js
+++ b/src/pages/HomePage.js
@@ -1,148 +1,156 @@
-import React, { useState, useEffect } from 'react';
-import { Route, Switch, Redirect } from "react-router-dom";
-import { Routes } from "../routes";
-
-// pages
-import Presentation from "./Presentation";
-import Upgrade from "./Upgrade";
-import DashboardOverview from "./dashboard/DashboardOverview";
-import Transactions from "./Transactions";
-import Settings from "./Settings";
-import BootstrapTables from "./tables/BootstrapTables";
-import Signin from "./examples/Signin";
-import Signup from "./examples/Signup";
-import ForgotPassword from "./examples/ForgotPassword";
-import ResetPassword from "./examples/ResetPassword";
-import Lock from "./examples/Lock";
-import NotFoundPage from "./examples/NotFound";
-import ServerError from "./examples/ServerError";
-
-// documentation pages
-import DocsOverview from "./documentation/DocsOverview";
-import DocsDownload from "./documentation/DocsDownload";
-import DocsQuickStart from "./documentation/DocsQuickStart";
-import DocsLicense from "./documentation/DocsLicense";
-import DocsFolderStructure from "./documentation/DocsFolderStructure";
-import DocsBuild from "./documentation/DocsBuild";
-import DocsChangelog from "./documentation/DocsChangelog";
-
-// components
-import Sidebar from "../components/Sidebar";
-import Navbar from "../components/Navbar";
-import Footer from "../components/Footer";
-import Preloader from "../components/Preloader";
-
-import Accordion from "./components/Accordion";
-import Alerts from "./components/Alerts";
-import Badges from "./components/Badges";
-import Breadcrumbs from "./components/Breadcrumbs";
-import Buttons from "./components/Buttons";
-import Forms from "./components/Forms";
-import Modals from "./components/Modals";
-import Navs from "./components/Navs";
-import Navbars from "./components/Navbars";
-import Pagination from "./components/Pagination";
-import Popovers from "./components/Popovers";
-import Progress from "./components/Progress";
-import Tables from "./components/Tables";
-import Tabs from "./components/Tabs";
-import Tooltips from "./components/Tooltips";
-import Toasts from "./components/Toasts";
-
-const RouteWithLoader = ({ component: Component, ...rest }) => {
- const [loaded, setLoaded] = useState(false);
-
- useEffect(() => {
- const timer = setTimeout(() => setLoaded(true), 1000);
- return () => clearTimeout(timer);
- }, []);
-
- return (
- ( <> (
- <>
-
-
-
- )}
- />
- );
-};
-
-export default () => (
-
-
-);
+import React, { useState, useEffect } from 'react';
+import { Route, Switch, Redirect } from "react-router-dom";
+import { Routes } from "../routes";
+
+// pages
+import Presentation from "./Presentation";
+import Upgrade from "./Upgrade";
+import DashboardOverview from "./dashboard/DashboardOverview";
+import Transactions from "./Transactions";
+import Settings from "./Settings";
+import BootstrapTables from "./tables/BootstrapTables";
+import Signin from "./examples/Signin";
+import Signup from "./examples/Signup";
+import Signup2 from "./Mobile/Signup2"
+import Signup3 from "./Mobile/Signup3";
+import ForgotPassword from "./examples/ForgotPassword";
+import ResetPassword from "./examples/ResetPassword";
+import Lock from "./examples/Lock";
+import NotFoundPage from "./examples/NotFound";
+import ServerError from "./examples/ServerError";
+
+// documentation pages
+import DocsOverview from "./documentation/DocsOverview";
+import DocsDownload from "./documentation/DocsDownload";
+import DocsQuickStart from "./documentation/DocsQuickStart";
+import DocsLicense from "./documentation/DocsLicense";
+import DocsFolderStructure from "./documentation/DocsFolderStructure";
+import DocsBuild from "./documentation/DocsBuild";
+import DocsChangelog from "./documentation/DocsChangelog";
+
+// components
+import Sidebar from "../components/Sidebar";
+import Navbar from "../components/Navbar";
+import Footer from "../components/Footer";
+import Preloader from "../components/Preloader";
+
+import Accordion from "./components/Accordion";
+import Alerts from "./components/Alerts";
+import Badges from "./components/Badges";
+import Breadcrumbs from "./components/Breadcrumbs";
+import Buttons from "./components/Buttons";
+import Forms from "./components/Forms";
+import Modals from "./components/Modals";
+import Navs from "./components/Navs";
+import Navbars from "./components/Navbars";
+import Pagination from "./components/Pagination";
+import Popovers from "./components/Popovers";
+import Progress from "./components/Progress";
+import Tables from "./components/Tables";
+import Tabs from "./components/Tabs";
+import Tooltips from "./components/Tooltips";
+import Toasts from "./components/Toasts";
+import Collector_Input from './Mobile/Signup2';
+import RecyclerConfirmation from './Mobile/RecyclerConfirmation';
+import Collector_Input3 from './Mobile/Signup3';
+
+const RouteWithLoader = ({ component: Component, ...rest }) => {
+ const [loaded, setLoaded] = useState(false);
+
+ useEffect(() => {
+ const timer = setTimeout(() => setLoaded(true), 1000);
+ return () => clearTimeout(timer);
+ }, []);
+
+ return (
+ ( <> (
+ <>
+
+
+
+ )}
+ />
+ );
+};
+
+export default () => (
+
+
+);
diff --git a/src/pages/Mobile/RecyclerConfirmation.js b/src/pages/Mobile/RecyclerConfirmation.js
new file mode 100644
index 00000000..ada8b40a
--- /dev/null
+++ b/src/pages/Mobile/RecyclerConfirmation.js
@@ -0,0 +1,195 @@
+import React, { useRef, useEffect, useState } from "react";
+
+import Webcam from "react-webcam";
+import { Link } from "react-router-dom";
+import Dropdown from "react-bootstrap/Dropdown";
+import DropdownButton from "react-bootstrap/DropdownButton";
+import Form from "react-bootstrap/Form";
+import InputGroup from "react-bootstrap/InputGroup";
+
+import {
+ Col,
+ Row,
+ Card,
+ Button,
+ FormCheck,
+ Container,
+} from "@themesberg/react-bootstrap";
+
+import { Routes } from "../../routes";
+import BgImage from "../../assets/img/illustrations/signin.svg";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import {
+ faCameraRetro,
+ faWeightHanging,
+ faAngleLeft,
+ faEnvelope,
+ faUnlockAlt,
+} from "@fortawesome/free-solid-svg-icons";
+
+export default () => {
+ var fileInput = document.getElementById('weight-collector');
+ var fileDisplayArea = document.getElementById('fileDisplayArea');
+
+ window.onload = function () {
+ var fileInput = document.getElementById('weight-collector');
+ var fileDisplayArea = document.getElementById('fileDisplayArea');
+
+ fileInput.addEventListener('change', function (e) {
+ var file = fileInput.files[0];
+ var imagetype = /image.*/;
+ if (file.type.match(imagetype)) {
+ var reader = new FileReader();
+ reader.onload = function (e) {
+ fileDisplayArea.innerHTML = "";
+ var img = new Image();
+ img.src = reader.result;
+ fileDisplayArea.appendChild(img);
+ }
+ reader.readAsDataURL(file);
+ } else {
+ fileDisplayArea.innerHTML = "File not supported!";
+ }
+ });
+ }
+
+
+ return (
+
+
+
+
+
+
+
+
+
+
+ {/* Header */}
+
Recycler Confirmation
+
+
+
+
+
+
+ );
+};
diff --git a/src/pages/Mobile/Signup2.js b/src/pages/Mobile/Signup2.js
new file mode 100644
index 00000000..e4155aad
--- /dev/null
+++ b/src/pages/Mobile/Signup2.js
@@ -0,0 +1,244 @@
+import React, { useRef, useEffect, useState } from "react";
+
+import Webcam from "react-webcam";
+import { Link } from "react-router-dom";
+import Dropdown from "react-bootstrap/Dropdown";
+import DropdownButton from "react-bootstrap/DropdownButton";
+import Form from "react-bootstrap/Form";
+import InputGroup from "react-bootstrap/InputGroup";
+
+import {
+ faFacebookF,
+ faGithub,
+ faTwitter,
+} from "@fortawesome/free-brands-svg-icons";
+import {
+ Col,
+ Row,
+ Card,
+ Button,
+ FormCheck,
+ Container,
+} from "@themesberg/react-bootstrap";
+
+import { Routes } from "../../routes";
+import BgImage from "../../assets/img/illustrations/signin.svg";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import {
+ faCameraRetro,
+ faWeightHanging,
+ faAngleLeft,
+ faEnvelope,
+ faUnlockAlt,
+} from "@fortawesome/free-solid-svg-icons";
+
+export default () => {
+ var fileInput = document.getElementById('weight-collector');
+ var fileDisplayArea = document.getElementById('fileDisplayArea');
+
+ window.onload = function() {
+ var fileInput = document.getElementById('weight-collector');
+ var fileDisplayArea = document.getElementById('fileDisplayArea');
+
+ fileInput.addEventListener('change', function(e) {
+ // Put the rest of the demo code here.
+ var file = fileInput.files[0];
+ var imagetype = /image.*/;
+ if (file.type.match(imagetype)) {
+ var reader = new FileReader();
+ reader.onload = function(e){
+ fileDisplayArea.innerHTML = "";
+ var img = new Image();
+ img.src = reader.result;
+ fileDisplayArea.appendChild(img);
+ }
+ reader.readAsDataURL(file);
+ }else{
+ fileDisplayArea.innerHTML = "File not supported!";
+ }
+ });
+}
+
+
+
+
+
+
+
+ return (
+
+
+
+
+
+
+
+
+
+
+ {/* Header */}
+
Collector Input
+
+
+
+
+
+
+ );
+};
diff --git a/src/pages/Mobile/Signup3.js b/src/pages/Mobile/Signup3.js
new file mode 100644
index 00000000..374408a6
--- /dev/null
+++ b/src/pages/Mobile/Signup3.js
@@ -0,0 +1,244 @@
+import React, { useRef, useEffect, useState } from "react";
+
+import Webcam from "react-webcam";
+import { Link } from "react-router-dom";
+import Dropdown from "react-bootstrap/Dropdown";
+import DropdownButton from "react-bootstrap/DropdownButton";
+import Form from "react-bootstrap/Form";
+import InputGroup from "react-bootstrap/InputGroup";
+
+import {
+ faFacebookF,
+ faGithub,
+ faTwitter,
+} from "@fortawesome/free-brands-svg-icons";
+import {
+ Col,
+ Row,
+ Card,
+ Button,
+ FormCheck,
+ Container,
+} from "@themesberg/react-bootstrap";
+
+import { Routes } from "../../routes";
+import BgImage from "../../assets/img/illustrations/signin.svg";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import {
+ faCameraRetro,
+ faWeightHanging,
+ faAngleLeft,
+ faEnvelope,
+ faUnlockAlt,
+} from "@fortawesome/free-solid-svg-icons";
+
+export default () => {
+ var fileInput = document.getElementById('weight-collector');
+ var fileDisplayArea = document.getElementById('fileDisplayArea');
+
+ window.onload = function() {
+ var fileInput = document.getElementById('weight-collector');
+ var fileDisplayArea = document.getElementById('fileDisplayArea');
+
+ fileInput.addEventListener('change', function(e) {
+ // Put the rest of the demo code here.
+ var file = fileInput.files[0];
+ var imagetype = /image.*/;
+ if (file.type.match(imagetype)) {
+ var reader = new FileReader();
+ reader.onload = function(e){
+ fileDisplayArea.innerHTML = "";
+ var img = new Image();
+ img.src = reader.result;
+ fileDisplayArea.appendChild(img);
+ }
+ reader.readAsDataURL(file);
+ }else{
+ fileDisplayArea.innerHTML = "File not supported!";
+ }
+ });
+}
+
+
+
+
+
+
+
+ return (
+
+
+
+
+
+
+
+
+
+
+ {/* Header */}
+
Recycler Input
+
+
+
+
+
+
+ );
+};
diff --git a/src/pages/Mobile/minput.js b/src/pages/Mobile/minput.js
new file mode 100644
index 00000000..e69de29b
diff --git a/src/pages/Mobile/rconfirmation.js b/src/pages/Mobile/rconfirmation.js
new file mode 100644
index 00000000..e69de29b
diff --git a/src/pages/Presentation.js b/src/pages/Presentation.js
index 6d46fc15..d2fa5c0e 100644
--- a/src/pages/Presentation.js
+++ b/src/pages/Presentation.js
@@ -1,543 +1,539 @@
-import React from "react";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faBook, faExternalLinkAlt, faTimesCircle, faCheckCircle, faCalendarAlt, faCodeBranch, faShoppingCart, faFolder, faMapMarkedAlt, faPager, faFileCode, faDownload } from "@fortawesome/free-solid-svg-icons";
-import { faBootstrap, faGithub, faJs, faReact, faSass } from "@fortawesome/free-brands-svg-icons";
-import { Col, Row, Card, Image, Button, Container, ListGroup, Tooltip, OverlayTrigger, Form, Navbar, Nav, Badge } from '@themesberg/react-bootstrap';
-import { Link } from 'react-router-dom';
-import { HashLink } from 'react-router-hash-link';
-import Code from "../components/CodeEditor";
-import GitHubButton from 'react-github-btn';
-
-import { Routes } from "../routes";
-import ThemesbergLogoIcon from "../assets/img/themesberg.svg";
-import ThemesbergLogo from "../assets/img/themesberg-logo.svg";
-import MockupPresentation from "../assets/img/mockup-presentation.png";
-import ReactHero from "../assets/img/technologies/react-hero-logo.svg";
-import MapboxImg from "../assets/img/mockup-map-presentation.png";
-import CalendarImg from "../assets/img/mockup-calendar-presentation.png";
-import ReactMockupImg from "../assets/img/react-mockup.png";
-import BS5IllustrationsImg from "../assets/img/illustrations/bs5-illustrations.svg";
-import BS5Logo from "../assets/img/technologies/bootstrap-5-logo.svg";
-import ReactLogo from "../assets/img/technologies/react-logo.svg";
-
-import pages from "../data/pages";
-import features from "../data/features";
-
-export default () => {
- const PagePreview = (props) => {
- const { name, image, link } = props;
-
- return (
-
-
-
- {name}
-
-
-
- );
- };
-
- const Feature = (props) => {
- const { title, description, icon } = props;
-
- return (
-
-
-
-
-
{title}
-
{description}
-
-
- );
- };
-
- const FolderItem = (props) => {
- const { name, icon, tooltip, iconColor } = props;
- const color = iconColor ? `text-${iconColor}` : "";
-
- return (
- {tooltip}}
- >
-
-
-
- );
- };
-
- return (
- <>
-
-
-
- Volt React
-
-
-
-
-
- Features
- Pages
- Folder Structure
- Getting Started
- Upgrade to Pro
-
-
-
-
-
-
-
-
-
- Volt React Dashboard
- Open source powered by React.js and Bootstrap 5
-
-
- Explore dashboard
- Star
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 10
- Example Pages
-
-
-
- 100+
- React Components
-
-
-
- Workflow
- Sass & react-app
-
-
-
- Bootstrap 5
- CSS Framework
-
-
-
-
-
-
- Powered by React.js
- The most popular front-end library in the world
- Volt React is an admin dashboard template that is built using React.js components using react hooks and a data-driven structure that can kick-start your app in no time.
- Live Demo
-
-
- React.js Components
- 100+ premium UI elements based on Bootstrap 5
- We've built over 100 React.js powered components to be used throughout your application saving you time kickstarting your project.
- Check out the components and use our live React.js component editor to try the code.
-
-
- Example select
-
- Open this select menu
- One
- Two
- Three
-
-
- Primary
-`} language="jsx" />
-
-
-
- Mapbox Pro
- Markers and cards integration with Leaflet.js
- You can use this map to add markers with custom cards and show them on a map using our custom MapBox integration with Leaflet.js
-
-
- Calendar Pro
-
- Advanced FullCalendar.js integration
-
-
- We created a fully editable calendar where you can add, edit and delete events for your admin dashboard.
-
-
-
- Bootstrap 5
-
- Latest version of Bootstrap 5
-
-
- Volt React is built using the latest version of Bootstrap 5 and we only used Vanilla Javascript for everything including the plugins
-
-
-
-
-
-
-
-
-
- 10 hand-crafted pages
-
-
- Every page from Volt has been carefully built to provide all the necessary pages your startup will require
-
-
-
-
- {pages.map(page =>
-
-
-
-
-
- Awesome Features
- You get all React.js components fully customized. Besides, you receive numerous plugins out of the box and ready to use.
-
-
-
- {features.map(feature =>
-
-
-
-
-
- What's inside?
- We have carefully crafted the perfect folder structure to ensure that finding the files you're looking for are easily reachable and well organized.
-
-
-
-
-
The perfect folder structure for your project
-
The folder structure is based on the popular create-react-app repository using Sass source files for CSS preprocessing.
-
-
-
-
-
-
-
-
- The perfect folder structure for your project
- The folder structure is based on the popular create-react-app repository using Sass source files for CSS preprocessing.
-
-
-
-
-
-
-
-
- Less work , more flow .
-
-
- Boost productivity with BrowserSync. Sass changes are reflected instantly and pages scroll and refresh on devices as you work.
-
-
-
-
-
-
-
-
> $ yarn install (or npm install)
-
Everything’s installed!
-
-
-
> $ yarn start (or npm run start)
-
SCSS watching
-
Opening localhost:3000
-
-
-
> $ that's it?
-
It's that simple!
-
-
-
- Looks unfamiliar? Don’t worry! Our
-
-
-
-
-
-
-
- Download or upgrade to pro
- Do you want to take React development to the next level? Check out the premium version of Volt React Dashboard in the following comparison table.
-
-
-
-
-
-
-
-
-
- Free version
-
-
-
-
-
- 100 React Components
-
-
- 10 Example Pages
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Pro Version
-
-
-
-
-
- 200+ React Components
-
-
- 20 Example Pages
-
-
- 6 Plugins
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Demo Volt React Pro
-
-
-
-
- Available in the following technologies:
-
-
- Bootstrap 5 · The most popular HTML, CSS, and JS library in the world.}>
-
-
-
-
- React · A JavaScript library for building user interfaces.}>
-
-
-
-
-
-
-
-
-
-
-
- Volt React
-
- Volt React is a free and open source admin dashboard template powered by React.js and Bootstrap 5.
-
- Themesberg
-
- Blog Products About Us Contact Us
-
- Other
-
-
- Getting started
-
- Changelog License
-
- Subscribe
-
- We’ll never share your details. See our Privacy Policy
-
-
-
-
-
-
-
Copyright © Themesberg 2019-2021 . All rights reserved.
-
-
-
-
- );
-};
+import React from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faBook, faExternalLinkAlt, faTimesCircle, faCheckCircle, faCalendarAlt, faCodeBranch, faShoppingCart, faFolder, faMapMarkedAlt, faPager, faFileCode, faDownload } from "@fortawesome/free-solid-svg-icons";
+import { faBootstrap, faGithub, faJs, faReact, faSass } from "@fortawesome/free-brands-svg-icons";
+import { Col, Row, Card, Image, Button, Container, ListGroup, Tooltip, OverlayTrigger, Form, Navbar, Nav, Badge } from '@themesberg/react-bootstrap';
+import { Link } from 'react-router-dom';
+import { HashLink } from 'react-router-hash-link';
+import Code from "../components/CodeEditor";
+import GitHubButton from 'react-github-btn';
+
+import { Routes } from "../routes";
+import ThemesbergLogoIcon from "../assets/img/themesberg.svg";
+import ThemesbergLogo from "../assets/img/themesberg-logo.svg";
+import MockupPresentation from "../assets/img/mockup-presentation.png";
+import ReactHero from "../assets/img/technologies/react-hero-logo.svg";
+import MapboxImg from "../assets/img/mockup-map-presentation.png";
+import CalendarImg from "../assets/img/mockup-calendar-presentation.png";
+import ReactMockupImg from "../assets/img/react-mockup.png";
+import BS5IllustrationsImg from "../assets/img/illustrations/bs5-illustrations.svg";
+import BS5Logo from "../assets/img/technologies/bootstrap-5-logo.svg";
+import ReactLogo from "../assets/img/technologies/react-logo.svg";
+import CryptoCapableLogo from "../assets/img/crypto-capable-logo.png";
+import DSTLogo from "../assets/img/dst-logo.jpg";
+import IndiaAccLogo from "../assets/img/india-accelerator-logo.png";
+import NearLogo from "../assets/img/near-logo.png";
+import SineLogo from "../assets/img/sine-iitb-logo.png";
+
+import pages from "../data/pages";
+import features from "../data/features";
+
+export default () => {
+ const PagePreview = (props) => {
+ const { name, image, link } = props;
+
+ return (
+
+
+
+ {name}
+
+
+
+ );
+ };
+
+ const Feature = (props) => {
+ const { title, description, icon } = props;
+
+ return (
+
+
+
+
+
{title}
+
{description}
+
+
+ );
+ };
+
+ const FolderItem = (props) => {
+ const { name, icon, tooltip, iconColor } = props;
+ const color = iconColor ? `text-${iconColor}` : "";
+
+ return (
+ {tooltip}}
+ >
+
+
+
+ );
+ };
+
+ return (
+ <>
+
+
+
+ Trashnet
+
+
+
+
+
+ About
+ Binvent
+ Folder Structure
+ Contact Us
+
+
+
+
+
+
+
+
+
+ Making Net Zero a Reality
+ {/* Open source powered by React.js and Bootstrap 5
*/}
+
+
+
+ Login
+
+
+
+ Explore ledger
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Powered by React.js
+ The most popular front-end library in the world
+ Volt React is an admin dashboard template that is built using React.js components using react hooks and a data-driven structure that can kick-start your app in no time.
+ Live Demo
+
+
+ React.js Components
+ 100+ premium UI elements based on Bootstrap 5
+ We've built over 100 React.js powered components to be used throughout your application saving you time kickstarting your project.
+ Check out the components and use our live React.js component editor to try the code.
+
+
+ Example select
+
+ Open this select menu
+ One
+ Two
+ Three
+
+
+ Primary
+`} language="jsx" />
+
+
+
+ Mapbox Pro
+ Markers and cards integration with Leaflet.js
+ You can use this map to add markers with custom cards and show them on a map using our custom MapBox integration with Leaflet.js
+
+
+ Calendar Pro
+
+ Advanced FullCalendar.js integration
+
+
+ We created a fully editable calendar where you can add, edit and delete events for your admin dashboard.
+
+
+
+ Bootstrap 5
+
+ Latest version of Bootstrap 5
+
+
+ Volt React is built using the latest version of Bootstrap 5 and we only used Vanilla Javascript for everything including the plugins
+
+
+
+
+
+
+
+
+
+ 10 hand-crafted pages
+
+
+ Every page from Volt has been carefully built to provide all the necessary pages your startup will require
+
+
+
+
+ {pages.map(page =>
+
+
+
+
+
+ Awesome Features
+ You get all React.js components fully customized. Besides, you receive numerous plugins out of the box and ready to use.
+
+
+
+ {features.map(feature =>
+
+
+
+
+
+ What's inside?
+ We have carefully crafted the perfect folder structure to ensure that finding the files you're looking for are easily reachable and well organized.
+
+
+
+
+
The perfect folder structure for your project
+
The folder structure is based on the popular create-react-app repository using Sass source files for CSS preprocessing.
+
+
+
+
+
+
+
+
+ The perfect folder structure for your project
+ The folder structure is based on the popular create-react-app repository using Sass source files for CSS preprocessing.
+
+
+
+
+
+
+
+
+ Less work , more flow .
+
+
+ Boost productivity with BrowserSync. Sass changes are reflected instantly and pages scroll and refresh on devices as you work.
+
+
+
+
+
+
+
+
> $ yarn install (or npm install)
+
Everything’s installed!
+
+
+
> $ yarn start (or npm run start)
+
SCSS watching
+
Opening localhost:3000
+
+
+
> $ that's it?
+
It's that simple!
+
+
+
+ Looks unfamiliar? Don’t worry! Our
+
+
+
+
+
+
+
+ Download or upgrade to pro */}
+ Do you want to take React development to the next level? Check out the premium version of Volt React Dashboard in the following comparison table.
+
+
+
+
+
+
+
+
+
+ Free version
+
+
+
+
+
+ 100 React Components
+
+
+ 10 Example Pages
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Pro Version
+
+
+
+
+
+ 200+ React Components
+
+
+ 20 Example Pages
+
+
+ 6 Plugins
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Demo Volt React Pro
+
+
+
+
+ Available in the following technologies:
+
+
+ Bootstrap 5 · The most popular HTML, CSS, and JS library in the world.}>
+
+
+
+
+ React · A JavaScript library for building user interfaces.}>
+
+
+
+
+
+
+
+
+
+
+
+ Volt React
+
+ Volt React is a free and open source admin dashboard template powered by React.js and Bootstrap 5.
+
+ Themesberg
+
+ Blog Products About Us Contact Us
+
+ Other
+
+
+ Getting started
+
+ Changelog License
+
+ Subscribe
+
+ We’ll never share your details. See our Privacy Policy
+
+
+
+
+
+
+
Copyright © Themesberg 2019-2021 . All rights reserved.
+
+
+
+
+ );
+};
diff --git a/src/pages/Settings.js b/src/pages/Settings.js
index 0ce0faf1..a7a6ece5 100644
--- a/src/pages/Settings.js
+++ b/src/pages/Settings.js
@@ -1,90 +1,90 @@
-import React from "react";
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faBoxOpen, faCartArrowDown, faChartPie, faChevronDown, faClipboard, faCommentDots, faFileAlt, faPlus, faRocket, faStore } from '@fortawesome/free-solid-svg-icons';
-import { Col, Row, Button, Dropdown } from '@themesberg/react-bootstrap';
-import { ChoosePhotoWidget, ProfileCardWidget } from "../components/Widgets";
-import { GeneralInfoForm } from "../components/Forms";
-
-import Profile3 from "../assets/img/team/profile-picture-3.jpg";
-
-
-export default () => {
- return (
- <>
-
-
-
- New
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-};
+import React from "react";
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faBoxOpen, faCartArrowDown, faChartPie, faChevronDown, faClipboard, faCommentDots, faFileAlt, faPlus, faRocket, faStore } from '@fortawesome/free-solid-svg-icons';
+import { Col, Row, Button, Dropdown } from '@themesberg/react-bootstrap';
+import { ChoosePhotoWidget, ProfileCardWidget } from "../components/Widgets";
+import { GeneralInfoForm } from "../components/Forms";
+
+import Profile3 from "../assets/img/team/profile-picture-3.jpg";
+
+
+export default () => {
+ return (
+ <>
+
+
+
+ New
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
diff --git a/src/pages/Transactions.js b/src/pages/Transactions.js
index 8a0ec88a..a13537e0 100644
--- a/src/pages/Transactions.js
+++ b/src/pages/Transactions.js
@@ -1,62 +1,62 @@
-import React from "react";
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faCheck, faCog, faHome, faSearch } from '@fortawesome/free-solid-svg-icons';
-import { Col, Row, Form, Button, ButtonGroup, Breadcrumb, InputGroup, Dropdown } from '@themesberg/react-bootstrap';
-
-import { TransactionsTable } from "../components/Tables";
-
-export default () => {
- return (
- <>
-
-
-
- Volt
- Transactions
-
-
Transactions
-
Your web analytics dashboard template.
-
-
-
- Share
- Export
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Show
-
- 10
- 20
- 30
-
-
-
-
-
-
-
+
+
+ Volt
+ Transactions
+
+
Transactions
+
Your web analytics dashboard template.
+
+
+
+ Share
+ Export
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Show
+
+ 10
+ 20
+ 30
+
+
+
+
+
+
+
- Upgrade to Pro
- Looking to take React development to the next level? Check out the premium version of Volt React Dashboard.
-
-
-
- What is in demo? What is in Pro version?
-
-
-
- React Components
- 100
- 200+
-
-
- Dashboard Pages
- 10
- 20
-
-
- Customized Plugins
- 2
- 6
-
-
- Sass Source Files
-
-
- Documentation
-
-
- Advanced Sidebar
-
-
- Calendar
-
-
- Mapbox
-
-
- Tech Support
-
-
-
-
-
- Demo Volt React Pro
-
-
-
-
-
-
-
- );
-};
+import React from "react";
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faExternalLinkAlt, faDownload, faCheckCircle, faRocket, faTimesCircle } from '@fortawesome/free-solid-svg-icons';
+import { Col, Row, Button } from '@themesberg/react-bootstrap';
+import { Table } from '@themesberg/react-bootstrap';
+
+export default () => {
+ return (
+ <>
+
+ Upgrade to Pro */}
+ Looking to take React development to the next level? Check out the premium version of Volt React Dashboard.
+
+
+
+ What is in demo? What is in Pro version?
+
+
+
+ React Components
+ 100
+ 200+
+
+
+ Dashboard Pages
+ 10
+ 20
+
+
+ Customized Plugins
+ 2
+ 6
+
+
+ Sass Source Files
+
+
+ Documentation
+
+
+ Advanced Sidebar
+
+
+ Calendar
+
+
+ Mapbox
+
+
+ Tech Support
+
+
+
+
+
+ Demo Volt React Pro
+
+
+
+
+
+
+
+ );
+};
diff --git a/src/pages/components/Accordion.js b/src/pages/components/Accordion.js
index 7c8c169f..36316890 100644
--- a/src/pages/components/Accordion.js
+++ b/src/pages/components/Accordion.js
@@ -1,52 +1,52 @@
-
-import React from 'react';
-import { Row, Col, Container } from '@themesberg/react-bootstrap';
-
-import AccordionComponent from "../../components/AccordionComponent";
-import Documentation from "../../components/Documentation";
-
-export default () => (
-
-
-
- Accordions
-
- Use the accordion elements to segment content and show/hide when clicking on tabs.
-
-
-
-
- Use the {``} component and make sure to set the required props, defaultKey and data, to make it shine. When the title element will be toggled you'll get to see the description.
- }
- scope={{ AccordionComponent }}
- imports={`import AccordionComponent from "src/components/AccordionComponent";`}
- example={`
-
-);
+
+import React from 'react';
+import { Row, Col, Container } from '@themesberg/react-bootstrap';
+
+import AccordionComponent from "../../components/AccordionComponent";
+import Documentation from "../../components/Documentation";
+
+export default () => (
+
+
+
+ Accordions
+
+ Use the accordion elements to segment content and show/hide when clicking on tabs.
+
+
+
+
+ Use the {``} component and make sure to set the required props, defaultKey and data, to make it shine. When the title element will be toggled you'll get to see the description.
+ }
+ scope={{ AccordionComponent }}
+ imports={`import AccordionComponent from "src/components/AccordionComponent";`}
+ example={`
+
+);
diff --git a/src/pages/components/Alerts.js b/src/pages/components/Alerts.js
index 5bd8b9d1..0856abae 100644
--- a/src/pages/components/Alerts.js
+++ b/src/pages/components/Alerts.js
@@ -1,186 +1,186 @@
-
-import React from 'react';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faBullhorn } from '@fortawesome/free-solid-svg-icons';
-import { Col, Row, Alert, Button, Container } from '@themesberg/react-bootstrap';
-
-import Documentation from "../../components/Documentation";
-
-export default () => {
- return (
-
-
-
- Alerts
-
- Use alerts to provide contextual feedback to your users based on their input and behaviour.
-
-
-
-
- The <Alert> component can be used to show your users error, success, informational or warning messages. Use component properties such as variant="primary or variant="secondary" to use the colors from the Sass variables:
- }
- scope={{ Alert }}
- imports={`import { Alert } from '@themesberg/react-bootstrap';`}
- example={`
-
- A simple primary alert — check it out!
-
-
- A simple secondary alert — check it out!
-
-
- A simple success alert — check it out!
-
-
- A simple danger alert — check it out!
-
-
- A simple warning alert — check it out!
-
-
- A simple info alert — check it out!
-
-
- A simple light alert — check it out!
-
-
- A simple dark alert — check it out!
-
- `}
- />
-
- The <Alert> component can be used to create an alert component that can be closed by clicking on the close icon by adding the show and onClose properties. Additionally, you can also use the <FontAwesomeIcon> component to add an icon inside the alert component.
- }
- scope={{ Alert, Button, FontAwesomeIcon, faBullhorn }}
- imports={`import { Alert, Button } from '@themesberg/react-bootstrap';
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faBullhorn } from "@fortawesome/free-solid-svg-icons";`}
- example={`function DismissableAlerts() {
- const [hiddenAlerts, setHiddenAlerts] = React.useState([]);
-
- const onClose = (alertId) => {
- const hiddenAlertsUpdated = [...hiddenAlerts, alertId];
- setHiddenAlerts(hiddenAlertsUpdated);
- };
-
- const shouldShowAlert = (alertId) => (
- hiddenAlerts.indexOf(alertId) === -1
- );
-
- return(
-
- onClose("primary")}>
-
-
-
- Holy guacamole! You should check in on some of those fields below.
-
-
onClose("primary")} />
-
-
- onClose("secondary")}>
-
-
-
- Holy guacamole! You should check in on some of those fields below.
-
-
onClose("secondary")} />
-
-
- onClose("danger")}>
-
-
-
- Holy guacamole! You should check in on some of those fields below.
-
-
onClose("danger")} />
-
-
- onClose("success")}>
-
-
-
- Holy guacamole! You should check in on some of those fields below.
-
-
onClose("success")} />
-
-
- onClose("warning")}>
-
-
-
- Holy guacamole! You should check in on some of those fields below.
-
-
onClose("warning")} />
-
-
- onClose("light")}>
-
-
-
- Holy guacamole! You should check in on some of those fields below.
-
-
onClose("light")} />
-
-
- onClose("dark")}>
-
-
-
- Holy guacamole! You should check in on some of those fields below.
-
-
onClose("dark")} />
-
-
- );
-}
-
-render(
-
- );
-};
+
+import React from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faBullhorn } from '@fortawesome/free-solid-svg-icons';
+import { Col, Row, Alert, Button, Container } from '@themesberg/react-bootstrap';
+
+import Documentation from "../../components/Documentation";
+
+export default () => {
+ return (
+
+
+
+ Alerts
+
+ Use alerts to provide contextual feedback to your users based on their input and behaviour.
+
+
+
+
+ The <Alert> component can be used to show your users error, success, informational or warning messages. Use component properties such as variant="primary or variant="secondary" to use the colors from the Sass variables:
+ }
+ scope={{ Alert }}
+ imports={`import { Alert } from '@themesberg/react-bootstrap';`}
+ example={`
+
+ A simple primary alert — check it out!
+
+
+ A simple secondary alert — check it out!
+
+
+ A simple success alert — check it out!
+
+
+ A simple danger alert — check it out!
+
+
+ A simple warning alert — check it out!
+
+
+ A simple info alert — check it out!
+
+
+ A simple light alert — check it out!
+
+
+ A simple dark alert — check it out!
+
+ `}
+ />
+
+ The <Alert> component can be used to create an alert component that can be closed by clicking on the close icon by adding the show and onClose properties. Additionally, you can also use the <FontAwesomeIcon> component to add an icon inside the alert component.
+ }
+ scope={{ Alert, Button, FontAwesomeIcon, faBullhorn }}
+ imports={`import { Alert, Button } from '@themesberg/react-bootstrap';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faBullhorn } from "@fortawesome/free-solid-svg-icons";`}
+ example={`function DismissableAlerts() {
+ const [hiddenAlerts, setHiddenAlerts] = React.useState([]);
+
+ const onClose = (alertId) => {
+ const hiddenAlertsUpdated = [...hiddenAlerts, alertId];
+ setHiddenAlerts(hiddenAlertsUpdated);
+ };
+
+ const shouldShowAlert = (alertId) => (
+ hiddenAlerts.indexOf(alertId) === -1
+ );
+
+ return(
+
+ onClose("primary")}>
+
+
+
+ Holy guacamole! You should check in on some of those fields below.
+
+
onClose("primary")} />
+
+
+ onClose("secondary")}>
+
+
+
+ Holy guacamole! You should check in on some of those fields below.
+
+
onClose("secondary")} />
+
+
+ onClose("danger")}>
+
+
+
+ Holy guacamole! You should check in on some of those fields below.
+
+
onClose("danger")} />
+
+
+ onClose("success")}>
+
+
+
+ Holy guacamole! You should check in on some of those fields below.
+
+
onClose("success")} />
+
+
+ onClose("warning")}>
+
+
+
+ Holy guacamole! You should check in on some of those fields below.
+
+
onClose("warning")} />
+
+
+ onClose("light")}>
+
+
+
+ Holy guacamole! You should check in on some of those fields below.
+
+
onClose("light")} />
+
+
+ onClose("dark")}>
+
+
+
+ Holy guacamole! You should check in on some of those fields below.
+
+
onClose("dark")} />
+
+
+ );
+}
+
+render(
+
+ );
+};
diff --git a/src/pages/components/Badges.js b/src/pages/components/Badges.js
index 1f916944..0521a5e5 100644
--- a/src/pages/components/Badges.js
+++ b/src/pages/components/Badges.js
@@ -1,80 +1,80 @@
-
-import React from 'react';
-import { Col, Row, Badge, Button, Container } from '@themesberg/react-bootstrap';
-
-import Documentation from "../../components/Documentation";
-
-
-export default () => (
-
-
-
- Badges
-
- Use badges to add extra labeling to alongside titles or to categorize items.
-
-
-
-
- Use the <Badge> component to show and highlight labeled text. You can update the colors using the following modifier classes (ie. bg-primary, bg-secondary):
- }
- scope={{ Badge }}
- imports={`import { Badge } from '@themesberg/react-bootstrap';`}
- example={`
- Primary
- Secondary
- Success
- Danger
- Warning
- Info
- Light
- Dark
- `}
- />
-
- To update the size of the <Badge> component you can use the size modified classes, such as badge-md or badge-lg.
- }
- scope={{ Badge }}
- imports={`import { Badge } from '@themesberg/react-bootstrap';`}
- example={`
- Primary
- Secondary
- Success
- `}
- />
-
- Set the pill on true property to make badges more rounded with a larger border radius.
- }
- scope={{ Badge }}
- imports={`import { Badge } from '@themesberg/react-bootstrap';`}
- example={`
- Primary
- Secondary
- Success
- Danger
- `}
- />
-
- You can also use the <Badge> component inside other components, such as buttons, alerts, simple paragraphs.
- }
- scope={{ Button, Badge }}
- imports={`import { Badge, Button } from '@themesberg/react-bootstrap';`}
- example={`Profile 9 `}
- />
-
-
-);
+
+import React from 'react';
+import { Col, Row, Badge, Button, Container } from '@themesberg/react-bootstrap';
+
+import Documentation from "../../components/Documentation";
+
+
+export default () => (
+
+
+
+ Badges
+
+ Use badges to add extra labeling to alongside titles or to categorize items.
+
+
+
+
+ Use the <Badge> component to show and highlight labeled text. You can update the colors using the following modifier classes (ie. bg-primary, bg-secondary):
+ }
+ scope={{ Badge }}
+ imports={`import { Badge } from '@themesberg/react-bootstrap';`}
+ example={`
+ Primary
+ Secondary
+ Success
+ Danger
+ Warning
+ Info
+ Light
+ Dark
+ `}
+ />
+
+ To update the size of the <Badge> component you can use the size modified classes, such as badge-md or badge-lg.
+ }
+ scope={{ Badge }}
+ imports={`import { Badge } from '@themesberg/react-bootstrap';`}
+ example={`
+ Primary
+ Secondary
+ Success
+ `}
+ />
+
+ Set the pill on true property to make badges more rounded with a larger border radius.
+ }
+ scope={{ Badge }}
+ imports={`import { Badge } from '@themesberg/react-bootstrap';`}
+ example={`
+ Primary
+ Secondary
+ Success
+ Danger
+ `}
+ />
+
+ You can also use the <Badge> component inside other components, such as buttons, alerts, simple paragraphs.
+ }
+ scope={{ Button, Badge }}
+ imports={`import { Badge, Button } from '@themesberg/react-bootstrap';`}
+ example={`Profile 9 `}
+ />
+
+
+);
diff --git a/src/pages/components/Breadcrumbs.js b/src/pages/components/Breadcrumbs.js
index 15518c79..90ac45b1 100644
--- a/src/pages/components/Breadcrumbs.js
+++ b/src/pages/components/Breadcrumbs.js
@@ -1,94 +1,94 @@
-
-import React from 'react';
-import { Col, Row, Container, Breadcrumb } from '@themesberg/react-bootstrap';
-
-import Documentation from "../../components/Documentation";
-
-export default () => {
- return (
-
-
-
- Breadcrumbs
-
- Use breadcrumbs to indicate the navigational hierarchy of the current page.
-
-
-
-
- Use the <Breadcrumb> component to show a clear navigational hierarchy for your users, wherever they may be on a given page. Using the variant modifier props you can update the color of the component.
- }
- scope={{ Row, Col, Breadcrumb }}
- imports={`import { Breadcrumb } from '@themesberg/react-bootstrap';`}
- example={`
-
- Home
- Library
- Data
-
-
-
- Home
- Library
- Data
-
-
-
- Home
- Library
- Data
-
-
-
- Home
- Library
- Data
-
-
-
`}
- />
-
- In order to make the <Breadcrumb> component transparent, all you need to do is add the breadcrumb-transparent modifier class to the parent component.
- }
- scope={{ Row, Col, Breadcrumb }}
- imports={`import { Breadcrumb } from '@themesberg/react-bootstrap';`}
- example={`
-
- Home
- Library
- Data
-
-
-
- Home
- Library
- Data
-
-
-
- Home
- Library
- Data
-
-
-
- Home
- Library
- Data
-
-
-
`}
- />
-
-
- );
-};
+
+import React from 'react';
+import { Col, Row, Container, Breadcrumb } from '@themesberg/react-bootstrap';
+
+import Documentation from "../../components/Documentation";
+
+export default () => {
+ return (
+
+
+
+ Breadcrumbs
+
+ Use breadcrumbs to indicate the navigational hierarchy of the current page.
+
+
+
+
+ Use the <Breadcrumb> component to show a clear navigational hierarchy for your users, wherever they may be on a given page. Using the variant modifier props you can update the color of the component.
+ }
+ scope={{ Row, Col, Breadcrumb }}
+ imports={`import { Breadcrumb } from '@themesberg/react-bootstrap';`}
+ example={`
+
+ Home
+ Library
+ Data
+
+
+
+ Home
+ Library
+ Data
+
+
+
+ Home
+ Library
+ Data
+
+
+
+ Home
+ Library
+ Data
+
+
+
`}
+ />
+
+ In order to make the <Breadcrumb> component transparent, all you need to do is add the breadcrumb-transparent modifier class to the parent component.
+ }
+ scope={{ Row, Col, Breadcrumb }}
+ imports={`import { Breadcrumb } from '@themesberg/react-bootstrap';`}
+ example={`
+
+ Home
+ Library
+ Data
+
+
+
+ Home
+ Library
+ Data
+
+
+
+ Home
+ Library
+ Data
+
+
+
+ Home
+ Library
+ Data
+
+
+
`}
+ />
+
+
+ );
+};
diff --git a/src/pages/components/Buttons.js b/src/pages/components/Buttons.js
index a1292403..1deb9fe5 100644
--- a/src/pages/components/Buttons.js
+++ b/src/pages/components/Buttons.js
@@ -1,327 +1,327 @@
-
-import React from 'react';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faHeart, faThumbsUp, faAngleDown, faAngleUp, faAngleLeft, faAngleRight } from '@fortawesome/free-solid-svg-icons';
-import { Col, Row, Button, Container, Dropdown, ButtonGroup } from '@themesberg/react-bootstrap';
-
-import Documentation from "../../components/Documentation";
-
-
-export default () => {
- return (
-
-
-
- Buttons
-
- Use custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
-
-
-
-
- The <Button> component is an important part of the UI that you can use for user actions. If you want to change the appearance of a given button, you can update the modifier props of the variant attribute.
- }
- scope={{ Button }}
- imports={`import { Button } from '@themesberg/react-bootstrap';`}
- example={`
- Primary
- Secondary
- Tertiary
- Info
- Success
- Warning
- Danger
- Dark
- Gray
- Light
- White
- `}
- />
-
- The <Button> component comes with three main sizing options: sm, default, and lg. In order to change the size of the button you need to set the size using the size attribute.
- }
- scope={{ Button }}
- imports={`import { Button } from '@themesberg/react-bootstrap';`}
- example={`
- Small
- Regular
- Large Button
- `}
- />
-
- Instead of a fully colored background, you can also choose to style the <Button> component to only have an outline border by using the outline-primary, outline-secondary modifier classes inside the variant attribute.
- }
- scope={{ Button }}
- imports={`import { Button } from '@themesberg/react-bootstrap';`}
- example={`
- Primary
- Secondary
- Tertiary
- Info
- Success
- Danger
- Dark
- Gray
- `}
- />
-
- If you want to use the <Button> component, but without the appearance of a button, just use the bsPrefix="text" attribute to create link styled buttons.
- }
- scope={{ Button }}
- imports={`import { Button } from '@themesberg/react-bootstrap';`}
- example={`
- Primary
- Secondary
- Tertiary
- Info
- Success
- Danger
- Dark
- Gray
- `}
- />
-
- You may want to use icons inside the <Button> component, which can be done by simply adding a <FontAwesomeIcon> component inside the button element.
- }
- scope={{ Button, FontAwesomeIcon, faHeart, faThumbsUp }}
- imports={`import { Button } from '@themesberg/react-bootstrap';
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faHeart, faThumbsUp } from "@fortawesome/free-solid-svg-icons";`}
- example={`
-
-
-
-
- `}
- />
-
- Block level buttons are great if you want the button to take up 100% of the width of the parent element. You need to add the w-100 class to the component.
- }
- scope={{ Button }}
- imports={`import { Button } from '@themesberg/react-bootstrap';`}
- example={`Block `}
- />
-
- You may want to disable the <Button> component for various reasons, so you need to add the disabled attribute in order to achieve that.
- }
- scope={{ Button }}
- imports={`import { Button } from '@themesberg/react-bootstrap';`}
- example={`
-
- Primary button
-
-
- Button
-
- `}
- />
-
-
- Use the <Dropdown> component coupled with the <Button> component in order to create dropdown items when clicking on a button. The <Dropdown.Toggle> is the component that will trigger the dropdown menu, while the <Dropdown.Menu> is the actual menu where you can add the dropdown items.
- The <Button> component is used either before or after the toggle component, but all of this is wrapped around with the main <Dropdown> component.
-
- }
- scope={{ Button, Dropdown, ButtonGroup, FontAwesomeIcon, faAngleDown }}
- imports={`import { Button, Dropdown, ButtonGroup } from '@themesberg/react-bootstrap';
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faAngleDown } from "@fortawesome/free-solid-svg-icons";`}
- example={`
-
- Primary
-
-
-
-
-
- Action
- Another action
- Something else here
- Separated link
-
-
-
-
-
-
-
-
- Action
- Another action
- Something else here
- Separated link
-
-
- `}
- />
-
- You may want to use one of the three main sizing options for the <Dropdown> component, so in order to do that you only need to use the size="md" or size="lg" attributes for the <Button> component inside the dropdown component.
- }
- scope={{ Button, Dropdown, ButtonGroup, FontAwesomeIcon, faAngleDown }}
- imports={`import { Button, ButtonGroup, Dropdown } from '@themesberg/react-bootstrap';
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faAngleDown } from "@fortawesome/free-solid-svg-icons";`}
- example={`
-
- Small
-
-
-
-
-
- Action
- Another action
- Something else here
- Separated link
-
-
-
-
- Default
-
-
-
-
-
- Action
- Another action
- Something else here
- Separated link
-
-
-
-
- Large
-
-
-
-
-
- Action
- Another action
- Something else here
- Separated link
-
-
- `}
- />
-
- If you want to change the direction of the <Dropdown> component, you can do that by using the direction="*" attribute where you can use up, right, down, or left as attribute values.
- }
- scope={{ Button, Dropdown, ButtonGroup, FontAwesomeIcon, faAngleDown, faAngleUp, faAngleLeft, faAngleRight }}
- imports={`import { Button, ButtonGroup, Dropdown } from '@themesberg/react-bootstrap';
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faAngleDown, faAngleUp, faAngleLeft, faAngleRight } from "@fortawesome/free-solid-svg-icons";`}
- example={`
-
- Up
-
-
-
-
-
- Action
- Another action
- Something else here
- Separated link
-
-
-
-
- Right
-
-
-
-
-
- Action
- Another action
- Something else here
- Separated link
-
-
-
-
- Down
-
-
-
-
-
- Action
- Another action
- Something else here
- Separated link
-
-
-
-
- Left
-
-
-
-
-
- Action
- Another action
- Something else here
- Separated link
-
-
- `}
- />
-
-
-
- );
-};
+
+import React from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faHeart, faThumbsUp, faAngleDown, faAngleUp, faAngleLeft, faAngleRight } from '@fortawesome/free-solid-svg-icons';
+import { Col, Row, Button, Container, Dropdown, ButtonGroup } from '@themesberg/react-bootstrap';
+
+import Documentation from "../../components/Documentation";
+
+
+export default () => {
+ return (
+
+
+
+ Buttons
+
+ Use custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
+
+
+
+
+ The <Button> component is an important part of the UI that you can use for user actions. If you want to change the appearance of a given button, you can update the modifier props of the variant attribute.
+ }
+ scope={{ Button }}
+ imports={`import { Button } from '@themesberg/react-bootstrap';`}
+ example={`
+ Primary
+ Secondary
+ Tertiary
+ Info
+ Success
+ Warning
+ Danger
+ Dark
+ Gray
+ Light
+ White
+ `}
+ />
+
+ The <Button> component comes with three main sizing options: sm, default, and lg. In order to change the size of the button you need to set the size using the size attribute.
+ }
+ scope={{ Button }}
+ imports={`import { Button } from '@themesberg/react-bootstrap';`}
+ example={`
+ Small
+ Regular
+ Large Button
+ `}
+ />
+
+ Instead of a fully colored background, you can also choose to style the <Button> component to only have an outline border by using the outline-primary, outline-secondary modifier classes inside the variant attribute.
+ }
+ scope={{ Button }}
+ imports={`import { Button } from '@themesberg/react-bootstrap';`}
+ example={`
+ Primary
+ Secondary
+ Tertiary
+ Info
+ Success
+ Danger
+ Dark
+ Gray
+ `}
+ />
+
+ If you want to use the <Button> component, but without the appearance of a button, just use the bsPrefix="text" attribute to create link styled buttons.
+ }
+ scope={{ Button }}
+ imports={`import { Button } from '@themesberg/react-bootstrap';`}
+ example={`
+ Primary
+ Secondary
+ Tertiary
+ Info
+ Success
+ Danger
+ Dark
+ Gray
+ `}
+ />
+
+ You may want to use icons inside the <Button> component, which can be done by simply adding a <FontAwesomeIcon> component inside the button element.
+ }
+ scope={{ Button, FontAwesomeIcon, faHeart, faThumbsUp }}
+ imports={`import { Button } from '@themesberg/react-bootstrap';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faHeart, faThumbsUp } from "@fortawesome/free-solid-svg-icons";`}
+ example={`
+
+
+
+
+ `}
+ />
+
+ Block level buttons are great if you want the button to take up 100% of the width of the parent element. You need to add the w-100 class to the component.
+ }
+ scope={{ Button }}
+ imports={`import { Button } from '@themesberg/react-bootstrap';`}
+ example={`Block `}
+ />
+
+ You may want to disable the <Button> component for various reasons, so you need to add the disabled attribute in order to achieve that.
+ }
+ scope={{ Button }}
+ imports={`import { Button } from '@themesberg/react-bootstrap';`}
+ example={`
+
+ Primary button
+
+
+ Button
+
+ `}
+ />
+
+
+ Use the <Dropdown> component coupled with the <Button> component in order to create dropdown items when clicking on a button. The <Dropdown.Toggle> is the component that will trigger the dropdown menu, while the <Dropdown.Menu> is the actual menu where you can add the dropdown items.
+ The <Button> component is used either before or after the toggle component, but all of this is wrapped around with the main <Dropdown> component.
+
+ }
+ scope={{ Button, Dropdown, ButtonGroup, FontAwesomeIcon, faAngleDown }}
+ imports={`import { Button, Dropdown, ButtonGroup } from '@themesberg/react-bootstrap';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faAngleDown } from "@fortawesome/free-solid-svg-icons";`}
+ example={`
+
+ Primary
+
+
+
+
+
+ Action
+ Another action
+ Something else here
+ Separated link
+
+
+
+
+
+
+
+
+ Action
+ Another action
+ Something else here
+ Separated link
+
+
+ `}
+ />
+
+ You may want to use one of the three main sizing options for the <Dropdown> component, so in order to do that you only need to use the size="md" or size="lg" attributes for the <Button> component inside the dropdown component.
+ }
+ scope={{ Button, Dropdown, ButtonGroup, FontAwesomeIcon, faAngleDown }}
+ imports={`import { Button, ButtonGroup, Dropdown } from '@themesberg/react-bootstrap';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faAngleDown } from "@fortawesome/free-solid-svg-icons";`}
+ example={`
+
+ Small
+
+
+
+
+
+ Action
+ Another action
+ Something else here
+ Separated link
+
+
+
+
+ Default
+
+
+
+
+
+ Action
+ Another action
+ Something else here
+ Separated link
+
+
+
+
+ Large
+
+
+
+
+
+ Action
+ Another action
+ Something else here
+ Separated link
+
+
+ `}
+ />
+
+ If you want to change the direction of the <Dropdown> component, you can do that by using the direction="*" attribute where you can use up, right, down, or left as attribute values.
+ }
+ scope={{ Button, Dropdown, ButtonGroup, FontAwesomeIcon, faAngleDown, faAngleUp, faAngleLeft, faAngleRight }}
+ imports={`import { Button, ButtonGroup, Dropdown } from '@themesberg/react-bootstrap';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faAngleDown, faAngleUp, faAngleLeft, faAngleRight } from "@fortawesome/free-solid-svg-icons";`}
+ example={`
+
+ Up
+
+
+
+
+
+ Action
+ Another action
+ Something else here
+ Separated link
+
+
+
+
+ Right
+
+
+
+
+
+ Action
+ Another action
+ Something else here
+ Separated link
+
+
+
+
+ Down
+
+
+
+
+
+ Action
+ Another action
+ Something else here
+ Separated link
+
+
+
+
+ Left
+
+
+
+
+
+ Action
+ Another action
+ Something else here
+ Separated link
+
+
+ `}
+ />
+
+
+
+ );
+};
diff --git a/src/pages/components/Forms.js b/src/pages/components/Forms.js
index c7c8c2f9..48ac678c 100644
--- a/src/pages/components/Forms.js
+++ b/src/pages/components/Forms.js
@@ -1,261 +1,261 @@
-import React from 'react';
-import moment from "moment-timezone";
-import Datetime from "react-datetime";
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faSearch, faCalendarAlt } from '@fortawesome/free-solid-svg-icons';
-import { Col, Row, Card, Form, Container, InputGroup } from '@themesberg/react-bootstrap';
-
-import Documentation from "../../components/Documentation";
-
-export default () => {
- return (
-
-
-
- Forms
-
- Use form elements such as text inputs, textareas, file uploads and many more to get input from you users.
-
-
-
-
- Form elements are an important part of the UI to receive text input from the users. The <Form> component can be used to create forms, form groups, labels, and input elements inside the UI. Check out the following example for a simple email input field and a textarea field:
- }
- scope={{ Form }}
- imports={`import { Form } from '@themesberg/react-bootstrap';`}
- example={``}
- />
-
- You can also add icons to the left or right side of the input field by using the <InputGroup> component and using the <InputGroup.Text> element with an icon element inside it, either after or before the <Form.Control> element.
- }
- scope={{ Form, InputGroup, FontAwesomeIcon, faSearch }}
- imports={`import { Form, InputGroup } from '@themesberg/react-bootstrap';
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faSearch } from "@fortawesome/free-solid-svg-icons";`}
- example={``}
- />
-
- You can easily update the styles of a valid or invalid styles input field by using the isValid or isInvalid attributes. Additionally, you can use the <Form.Control.Feedback> component to write the message regarding the success or error message.
- }
- scope={{ Form }}
- imports={`import { Form } from '@themesberg/react-bootstrap';`}
- example={``}
- />
-
- The <Form.Select> component can be used for option selection from the user. You can use the <option> elements to add multiple options and use the defaultValue attribute to set the default value of the select field.
- }
- scope={{ Form }}
- imports={`import { Form } from '@themesberg/react-bootstrap';`}
- example={``}
- />
-
-
-
- Example multiple select
-
- Open this select menu
- One
- Two
- Three
-
-
-`}
- />
-
- You can create a textarea input field by adding the as="textarea" modifier attribute to the <Form.Control> component.
- }
- scope={{ Form }}
- imports={`import { Form } from '@themesberg/react-bootstrap';`}
- example={``}
- />
-
- If you want to use an input field to upload files, you need to add the type="file" attribute to the <Form.Control> component.
- }
- scope={{ Form }}
- imports={`import { Form } from '@themesberg/react-bootstrap';`}
- example={``}
- />
-
-
- Use the <Form.Check> component to create checkbox items. If you want to disable on them, you need to add the disabled attribute.
- Make sure the is a {'id="*"'} and {'htmlFor="*"'} attribute for each element so that clicking on the text will also toggle the element.
-
- }
- scope={{ Form }}
- imports={`import { Form } from '@themesberg/react-bootstrap';`}
- example={``}
- />
-
-
- If you want to use radio buttons, you need to use the <Form.Check> component with the type="radio" modifier. You can disable the element by using the disabled attribute.
- Make sure the is a {'id="*"'} and {'htmlFor="*"'} attribute for each element so that clicking on the text will also toggle the element.
-
- }
- scope={{ Form }}
- imports={`import { Form } from '@themesberg/react-bootstrap';`}
- example={``}
- />
-
- Use the <Datetime> component to use a datepicker as an input field. You can read more about the options that you can use for this component by reading the react-datetime documentation.
- }
- scope={{ Datetime, Form, InputGroup, FontAwesomeIcon, faCalendarAlt, moment }}
- imports={`import React, { useState } from "react";
-import { Form, InputGroup } from '@themesberg/react-bootstrap';
-import Datetime from "react-datetime";
-import moment from "moment-timezone";
-
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faCalendarAlt } from "@fortawesome/free-solid-svg-icons";`}
- example={`const Datepicker = () => {
- const [birthday, setBirthday] = React.useState("");
-
- return(
-
- );
-}
-
-render(
-
- );
-};
+import React from 'react';
+import moment from "moment-timezone";
+import Datetime from "react-datetime";
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faSearch, faCalendarAlt } from '@fortawesome/free-solid-svg-icons';
+import { Col, Row, Card, Form, Container, InputGroup } from '@themesberg/react-bootstrap';
+
+import Documentation from "../../components/Documentation";
+
+export default () => {
+ return (
+
+
+
+ Forms
+
+ Use form elements such as text inputs, textareas, file uploads and many more to get input from you users.
+
+
+
+
+ Form elements are an important part of the UI to receive text input from the users. The <Form> component can be used to create forms, form groups, labels, and input elements inside the UI. Check out the following example for a simple email input field and a textarea field:
+ }
+ scope={{ Form }}
+ imports={`import { Form } from '@themesberg/react-bootstrap';`}
+ example={``}
+ />
+
+ You can also add icons to the left or right side of the input field by using the <InputGroup> component and using the <InputGroup.Text> element with an icon element inside it, either after or before the <Form.Control> element.
+ }
+ scope={{ Form, InputGroup, FontAwesomeIcon, faSearch }}
+ imports={`import { Form, InputGroup } from '@themesberg/react-bootstrap';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faSearch } from "@fortawesome/free-solid-svg-icons";`}
+ example={``}
+ />
+
+ You can easily update the styles of a valid or invalid styles input field by using the isValid or isInvalid attributes. Additionally, you can use the <Form.Control.Feedback> component to write the message regarding the success or error message.
+ }
+ scope={{ Form }}
+ imports={`import { Form } from '@themesberg/react-bootstrap';`}
+ example={``}
+ />
+
+ The <Form.Select> component can be used for option selection from the user. You can use the <option> elements to add multiple options and use the defaultValue attribute to set the default value of the select field.
+ }
+ scope={{ Form }}
+ imports={`import { Form } from '@themesberg/react-bootstrap';`}
+ example={``}
+ />
+
+
+
+ Example multiple select
+
+ Open this select menu
+ One
+ Two
+ Three
+
+
+`}
+ />
+
+ You can create a textarea input field by adding the as="textarea" modifier attribute to the <Form.Control> component.
+ }
+ scope={{ Form }}
+ imports={`import { Form } from '@themesberg/react-bootstrap';`}
+ example={``}
+ />
+
+ If you want to use an input field to upload files, you need to add the type="file" attribute to the <Form.Control> component.
+ }
+ scope={{ Form }}
+ imports={`import { Form } from '@themesberg/react-bootstrap';`}
+ example={``}
+ />
+
+
+ Use the <Form.Check> component to create checkbox items. If you want to disable on them, you need to add the disabled attribute.
+ Make sure the is a {'id="*"'} and {'htmlFor="*"'} attribute for each element so that clicking on the text will also toggle the element.
+
+ }
+ scope={{ Form }}
+ imports={`import { Form } from '@themesberg/react-bootstrap';`}
+ example={``}
+ />
+
+
+ If you want to use radio buttons, you need to use the <Form.Check> component with the type="radio" modifier. You can disable the element by using the disabled attribute.
+ Make sure the is a {'id="*"'} and {'htmlFor="*"'} attribute for each element so that clicking on the text will also toggle the element.
+
+ }
+ scope={{ Form }}
+ imports={`import { Form } from '@themesberg/react-bootstrap';`}
+ example={``}
+ />
+
+ Use the <Datetime> component to use a datepicker as an input field. You can read more about the options that you can use for this component by reading the react-datetime documentation.
+ }
+ scope={{ Datetime, Form, InputGroup, FontAwesomeIcon, faCalendarAlt, moment }}
+ imports={`import React, { useState } from "react";
+import { Form, InputGroup } from '@themesberg/react-bootstrap';
+import Datetime from "react-datetime";
+import moment from "moment-timezone";
+
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faCalendarAlt } from "@fortawesome/free-solid-svg-icons";`}
+ example={`const Datepicker = () => {
+ const [birthday, setBirthday] = React.useState("");
+
+ return(
+
+ );
+}
+
+render(
+
+ );
+};
diff --git a/src/pages/components/Modals.js b/src/pages/components/Modals.js
index e01797f9..84cdde7d 100644
--- a/src/pages/components/Modals.js
+++ b/src/pages/components/Modals.js
@@ -1,69 +1,69 @@
-
-import React, { useState } from 'react';
-import { Row, Col, Card, Modal, Button, Container } from '@themesberg/react-bootstrap';
-
-import Documentation from "../../components/Documentation";
-
-
-export default () => {
- const [showDefault, setShowDefault] = useState(false);
- const handleClose = () => setShowDefault(false);
-
- return (
-
-
-
- Modals
-
- Use modals to develop faster and more interactive user interfaces.
-
-
-
-
-
-
- The <Modal> component can be used as a way to show extra content on top of the existing UI based on an event. For example, you can use the onClick event from a button component to show a modal by using the setShowDefault(true) function.
- Additionally, you can use the handleClose event to handle the situation when the modal is being closed.
-
- }
- scope={{ Col, Card, Button, Modal, showDefault, setShowDefault, handleClose, useState }}
- imports={`import React, { useState } from "react";
-import { Button, Modal } from '@themesberg/react-bootstrap';
-
-const [showDefault, setShowDefault] = useState(false);
-const handleClose = () => setShowDefault(false);`}
- example={`
- setShowDefault(true)}>Default
-
-
-
- Terms of Service
-
-
- With less than a month to go before the European Union enacts new consumer privacy laws for its citizens, companies around the world are updating their terms of service agreements to comply.
- The European Union’s General Data Protection Regulation (G.D.P.R.) goes into effect on May 25 and is meant to ensure a common set of data rights in the European Union. It requires organizations to notify users as soon as possible of high-risk data breaches that could personally affect them.
-
-
-
- I Got It
-
-
- Close
-
-
-
- `}
- />
-
-
-
-
-
- );
-};
+
+import React, { useState } from 'react';
+import { Row, Col, Card, Modal, Button, Container } from '@themesberg/react-bootstrap';
+
+import Documentation from "../../components/Documentation";
+
+
+export default () => {
+ const [showDefault, setShowDefault] = useState(false);
+ const handleClose = () => setShowDefault(false);
+
+ return (
+
+
+
+ Modals
+
+ Use modals to develop faster and more interactive user interfaces.
+
+
+
+
+
+
+ The <Modal> component can be used as a way to show extra content on top of the existing UI based on an event. For example, you can use the onClick event from a button component to show a modal by using the setShowDefault(true) function.
+ Additionally, you can use the handleClose event to handle the situation when the modal is being closed.
+
+ }
+ scope={{ Col, Card, Button, Modal, showDefault, setShowDefault, handleClose, useState }}
+ imports={`import React, { useState } from "react";
+import { Button, Modal } from '@themesberg/react-bootstrap';
+
+const [showDefault, setShowDefault] = useState(false);
+const handleClose = () => setShowDefault(false);`}
+ example={`
+ setShowDefault(true)}>Default
+
+
+
+ Terms of Service
+
+
+ With less than a month to go before the European Union enacts new consumer privacy laws for its citizens, companies around the world are updating their terms of service agreements to comply.
+ The European Union’s General Data Protection Regulation (G.D.P.R.) goes into effect on May 25 and is meant to ensure a common set of data rights in the European Union. It requires organizations to notify users as soon as possible of high-risk data breaches that could personally affect them.
+
+
+
+ I Got It
+
+
+ Close
+
+
+
+ `}
+ />
+
+
+
+
+
+ );
+};
diff --git a/src/pages/components/Navbars.js b/src/pages/components/Navbars.js
index 2a76e234..939d239e 100644
--- a/src/pages/components/Navbars.js
+++ b/src/pages/components/Navbars.js
@@ -1,102 +1,102 @@
-
-import React, { useEffect, useState } from 'react';
-import { Nav, Row, Col, Card, Image, Navbar, Container } from '@themesberg/react-bootstrap';
-
-import Documentation from "../../components/Documentation";
-import ReactLogoPrimary from "../../assets/img/technologies/react-logo-primary.svg";
-import ReactLogoTransparent from "../../assets/img/technologies/react-logo-transparent.svg";
-
-
-export default () => {
- return (
-
-
-
- Navbars
-
- Use the responsive navigation bar from Volt to add nav items and multi-level nested dropdowns for a seamless navigation.
-
-
-
-
-
-
-
-
-
-
-
- Home
- About
- Contact
-
-
-
-
-`}
- />
-
- {
- const timer = setTimeout(() => {
- const nextIndex = themeIndex === NavbarThemes.length - 1 ? 0 : themeIndex + 1;
- setThemeIndex(nextIndex);
- }, 1000);
-
- return () => clearTimeout(timer);
- });
-
- return (
-
-
-
-
-
-
-
- Home
- About
- Contact
-
-
-
-
-
- );
-}
-
-render(
-
- );
-};
+
+import React, { useEffect, useState } from 'react';
+import { Nav, Row, Col, Card, Image, Navbar, Container } from '@themesberg/react-bootstrap';
+
+import Documentation from "../../components/Documentation";
+import ReactLogoPrimary from "../../assets/img/technologies/react-logo-primary.svg";
+import ReactLogoTransparent from "../../assets/img/technologies/react-logo-transparent.svg";
+
+
+export default () => {
+ return (
+
+
+
+ Navbars
+
+ Use the responsive navigation bar from Volt to add nav items and multi-level nested dropdowns for a seamless navigation.
+
+
+
+
+
+
+
+
+
+
+
+ Home
+ About
+ Contact
+
+
+
+
+`}
+ />
+
+ {
+ const timer = setTimeout(() => {
+ const nextIndex = themeIndex === NavbarThemes.length - 1 ? 0 : themeIndex + 1;
+ setThemeIndex(nextIndex);
+ }, 1000);
+
+ return () => clearTimeout(timer);
+ });
+
+ return (
+
+
+
+
+
+
+
+ Home
+ About
+ Contact
+
+
+
+
+
+ );
+}
+
+render(
+
+ );
+};
diff --git a/src/pages/components/Navs.js b/src/pages/components/Navs.js
index a6fb72c2..21fb3cb0 100644
--- a/src/pages/components/Navs.js
+++ b/src/pages/components/Navs.js
@@ -1,133 +1,133 @@
-
-import React from 'react';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faTachometerAlt } from '@fortawesome/free-solid-svg-icons';
-import { faComments, faSun, faUserCircle } from '@fortawesome/free-regular-svg-icons';
-import { Nav, Row, Col, Container } from '@themesberg/react-bootstrap';
-
-import Documentation from "../../components/Documentation";
-
-
-export default () => (
-
-
-
- Navs
-
- Use navigation tabs to break up pieces of content.
-
-
-
-
- The <Nav> component should be used for app navigation, such as for the navigation bar, a secondary menu, or other. The <Nav.Link> component can be attributed with the location of the link.
- }
- scope={{ Nav, Row, Col }}
- imports={`import { Nav } from '@themesberg/react-bootstrap';`}
- example={`
-
-
-
- Home
-
-
-
-
- Profile
-
-
-
-
- Settings
-
-
-
-
- Messages
-
-
-
-
-
`}
- />
-
- If you want the nav style to be rounded, just add the rounded class name to the main <Nav.Link> component.
- }
- scope={{ Nav, Row, Col }}
- imports={`import { Nav } from '@themesberg/react-bootstrap';`}
- example={`
-
-
-
- Home
-
-
-
-
- Profile
-
-
-
-
- Settings
-
-
-
-
- Messages
-
-
-
-
-
`}
- />
-
- If you want to add other content to a navigation item, such as an icon, you can do that by
- }
- scope={{ Nav, FontAwesomeIcon, faTachometerAlt, faComments, faSun, faUserCircle, Row, Col }}
- imports={`import { Nav } from '@themesberg/react-bootstrap';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faTachometerAlt } from '@fortawesome/free-solid-svg-icons';
-import { faComments, faSun, faUserCircle } from '@fortawesome/free-regular-svg-icons';`}
- example={`
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
`}
- />
-
-
-
-);
+
+import React from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faTachometerAlt } from '@fortawesome/free-solid-svg-icons';
+import { faComments, faSun, faUserCircle } from '@fortawesome/free-regular-svg-icons';
+import { Nav, Row, Col, Container } from '@themesberg/react-bootstrap';
+
+import Documentation from "../../components/Documentation";
+
+
+export default () => (
+
+
+
+ Navs
+
+ Use navigation tabs to break up pieces of content.
+
+
+
+
+ The <Nav> component should be used for app navigation, such as for the navigation bar, a secondary menu, or other. The <Nav.Link> component can be attributed with the location of the link.
+ }
+ scope={{ Nav, Row, Col }}
+ imports={`import { Nav } from '@themesberg/react-bootstrap';`}
+ example={`
+
+
+
+ Home
+
+
+
+
+ Profile
+
+
+
+
+ Settings
+
+
+
+
+ Messages
+
+
+
+
+
`}
+ />
+
+ If you want the nav style to be rounded, just add the rounded class name to the main <Nav.Link> component.
+ }
+ scope={{ Nav, Row, Col }}
+ imports={`import { Nav } from '@themesberg/react-bootstrap';`}
+ example={`
+
+
+
+ Home
+
+
+
+
+ Profile
+
+
+
+
+ Settings
+
+
+
+
+ Messages
+
+
+
+
+
`}
+ />
+
+ If you want to add other content to a navigation item, such as an icon, you can do that by
+ }
+ scope={{ Nav, FontAwesomeIcon, faTachometerAlt, faComments, faSun, faUserCircle, Row, Col }}
+ imports={`import { Nav } from '@themesberg/react-bootstrap';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faTachometerAlt } from '@fortawesome/free-solid-svg-icons';
+import { faComments, faSun, faUserCircle } from '@fortawesome/free-regular-svg-icons';`}
+ example={`
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
`}
+ />
+
+
+
+);
diff --git a/src/pages/components/Pagination.js b/src/pages/components/Pagination.js
index 88317feb..7eb37a8d 100644
--- a/src/pages/components/Pagination.js
+++ b/src/pages/components/Pagination.js
@@ -1,220 +1,220 @@
-
-import React from 'react';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faAngleDoubleLeft, faAngleDoubleRight } from '@fortawesome/free-solid-svg-icons';
-import { Col, Row, Card, Container, Pagination } from '@themesberg/react-bootstrap';
-
-import Documentation from "../../components/Documentation";
-
-
-export default () => {
- return (
-
-
-
- Pagination
-
- Use pagination elements to organize posts or other models of data into groups.
-
-
-
-
-
- The <Pagination> component is important to use when you have data that can be potentially so numerous that you need to paginate it. We've created two main handles that you can use when the previous or next item button has been click, called onPrevItem and onNextItem.
- You can use the items = [] array to add the number of pagination items, and set the totalPages pages constant to set that maximum amount of pages to show in the pagination element.
- Also you can use a function as handlePaginationChange to add some custome logic when user goes to another page (e.g fetch new data).
-
- }
- scope={{ Col, Card, Pagination, FontAwesomeIcon, faAngleDoubleLeft, faAngleDoubleRight }}
- imports={`import React, { useState } from "react";
-import { Col, Card, Pagination } from '@themesberg/react-bootstrap';
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faAngleDoubleLeft, faAngleDoubleRight } from "@fortawesome/free-solid-svg-icons";`}
- example={`const CustomPagination = (props) => {
- const [activeItem, setActiveItem] = React.useState(2);
- const { totalPages = 5, size = "md", withIcons = false, disablePrev = false } = props;
-
- const onPrevItem = () => {
- const prevActiveItem = activeItem === 1 ? activeItem : activeItem - 1;
- setActiveItem(prevActiveItem);
- };
-
- const onNextItem = (totalPages) => {
- const nextActiveItem = activeItem === totalPages ? activeItem : activeItem + 1;
- setActiveItem(nextActiveItem);
- };
-
- const items = [];
- for (let number = 1; number <= totalPages; number++) {
- const isItemActive = activeItem === number;
-
- const handlePaginationChange = () => {
- setActiveItem(number);
- };
-
- items.push(
-
- {number}
-
- );
- };
-
- return (
-
-
- {withIcons ?
- {items}
- onNextItem(totalPages)}>
- {withIcons ?
-
- );
-};
-
-render(
-
-
-
-
-
-);`}
- />
-
- Use the disabled attribute to disable one or either of the pagination items.
- }
- scope={{ Col, Card, Pagination, FontAwesomeIcon, faAngleDoubleLeft, faAngleDoubleRight }}
- imports={`import React, { useState } from "react";
-import { Col, Card, Pagination } from '@themesberg/react-bootstrap';
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faAngleDoubleLeft, faAngleDoubleRight } from "@fortawesome/free-solid-svg-icons";`}
- example={`const CustomPagination = (props) => {
- const [activeItem, setActiveItem] = React.useState(2);
- const { totalPages = 5, size = "md", withIcons = false, disablePrev = false } = props;
-
- const onPrevItem = () => {
- const prevActiveItem = activeItem === 1 ? activeItem : activeItem - 1;
- setActiveItem(prevActiveItem);
- };
-
- const onNextItem = (totalPages) => {
- const nextActiveItem = activeItem === totalPages ? activeItem : activeItem + 1;
- setActiveItem(nextActiveItem);
- };
-
- const items = [];
- for (let number = 1; number <= totalPages; number++) {
- const isItemActive = activeItem === number;
-
- const handlePaginationChange = () => {
- setActiveItem(number);
- };
-
- items.push(
-
- {number}
-
- );
- };
-
- return (
-
-
- {withIcons ?
- {items}
- onNextItem(totalPages)}>
- {withIcons ?
-
- );
-};
-
-render(
-
-
-
-
-
-);`}
- />
-
- As throughout the whole app, you can use either the sm, default or lg size modifiers by updating the size attribute.
- }
- scope={{ Col, Card, Pagination, FontAwesomeIcon, faAngleDoubleLeft, faAngleDoubleRight }}
- imports={`import React, { useState } from "react";
-import { Col, Card, Pagination } from '@themesberg/react-bootstrap';
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faAngleDoubleLeft, faAngleDoubleRight } from "@fortawesome/free-solid-svg-icons";`}
- example={`const CustomPagination = (props) => {
- const [activeItem, setActiveItem] = React.useState(2);
- const { totalPages = 5, size = "md", withIcons = false, disablePrev = false } = props;
-
- const onPrevItem = () => {
- const prevActiveItem = activeItem === 1 ? activeItem : activeItem - 1;
- setActiveItem(prevActiveItem);
- };
-
- const onNextItem = (totalPages) => {
- const nextActiveItem = activeItem === totalPages ? activeItem : activeItem + 1;
- setActiveItem(nextActiveItem);
- };
-
- const items = [];
- for (let number = 1; number <= totalPages; number++) {
- const isItemActive = activeItem === number;
-
- const handlePaginationChange = () => {
- setActiveItem(number);
- };
-
- items.push(
-
- {number}
-
- );
- };
-
- return (
-
-
- {withIcons ?
- {items}
- onNextItem(totalPages)}>
- {withIcons ?
-
- );
-};
-
-render(
-
-
-
-
-
-);`}
- />
-
-
- );
-};
+
+import React from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faAngleDoubleLeft, faAngleDoubleRight } from '@fortawesome/free-solid-svg-icons';
+import { Col, Row, Card, Container, Pagination } from '@themesberg/react-bootstrap';
+
+import Documentation from "../../components/Documentation";
+
+
+export default () => {
+ return (
+
+
+
+ Pagination
+
+ Use pagination elements to organize posts or other models of data into groups.
+
+
+
+
+
+ The <Pagination> component is important to use when you have data that can be potentially so numerous that you need to paginate it. We've created two main handles that you can use when the previous or next item button has been click, called onPrevItem and onNextItem.
+ You can use the items = [] array to add the number of pagination items, and set the totalPages pages constant to set that maximum amount of pages to show in the pagination element.
+ Also you can use a function as handlePaginationChange to add some custome logic when user goes to another page (e.g fetch new data).
+
+ }
+ scope={{ Col, Card, Pagination, FontAwesomeIcon, faAngleDoubleLeft, faAngleDoubleRight }}
+ imports={`import React, { useState } from "react";
+import { Col, Card, Pagination } from '@themesberg/react-bootstrap';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faAngleDoubleLeft, faAngleDoubleRight } from "@fortawesome/free-solid-svg-icons";`}
+ example={`const CustomPagination = (props) => {
+ const [activeItem, setActiveItem] = React.useState(2);
+ const { totalPages = 5, size = "md", withIcons = false, disablePrev = false } = props;
+
+ const onPrevItem = () => {
+ const prevActiveItem = activeItem === 1 ? activeItem : activeItem - 1;
+ setActiveItem(prevActiveItem);
+ };
+
+ const onNextItem = (totalPages) => {
+ const nextActiveItem = activeItem === totalPages ? activeItem : activeItem + 1;
+ setActiveItem(nextActiveItem);
+ };
+
+ const items = [];
+ for (let number = 1; number <= totalPages; number++) {
+ const isItemActive = activeItem === number;
+
+ const handlePaginationChange = () => {
+ setActiveItem(number);
+ };
+
+ items.push(
+
+ {number}
+
+ );
+ };
+
+ return (
+
+
+ {withIcons ?
+ {items}
+ onNextItem(totalPages)}>
+ {withIcons ?
+
+ );
+};
+
+render(
+
+
+
+
+
+);`}
+ />
+
+ Use the disabled attribute to disable one or either of the pagination items.
+ }
+ scope={{ Col, Card, Pagination, FontAwesomeIcon, faAngleDoubleLeft, faAngleDoubleRight }}
+ imports={`import React, { useState } from "react";
+import { Col, Card, Pagination } from '@themesberg/react-bootstrap';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faAngleDoubleLeft, faAngleDoubleRight } from "@fortawesome/free-solid-svg-icons";`}
+ example={`const CustomPagination = (props) => {
+ const [activeItem, setActiveItem] = React.useState(2);
+ const { totalPages = 5, size = "md", withIcons = false, disablePrev = false } = props;
+
+ const onPrevItem = () => {
+ const prevActiveItem = activeItem === 1 ? activeItem : activeItem - 1;
+ setActiveItem(prevActiveItem);
+ };
+
+ const onNextItem = (totalPages) => {
+ const nextActiveItem = activeItem === totalPages ? activeItem : activeItem + 1;
+ setActiveItem(nextActiveItem);
+ };
+
+ const items = [];
+ for (let number = 1; number <= totalPages; number++) {
+ const isItemActive = activeItem === number;
+
+ const handlePaginationChange = () => {
+ setActiveItem(number);
+ };
+
+ items.push(
+
+ {number}
+
+ );
+ };
+
+ return (
+
+
+ {withIcons ?
+ {items}
+ onNextItem(totalPages)}>
+ {withIcons ?
+
+ );
+};
+
+render(
+
+
+
+
+
+);`}
+ />
+
+ As throughout the whole app, you can use either the sm, default or lg size modifiers by updating the size attribute.
+ }
+ scope={{ Col, Card, Pagination, FontAwesomeIcon, faAngleDoubleLeft, faAngleDoubleRight }}
+ imports={`import React, { useState } from "react";
+import { Col, Card, Pagination } from '@themesberg/react-bootstrap';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faAngleDoubleLeft, faAngleDoubleRight } from "@fortawesome/free-solid-svg-icons";`}
+ example={`const CustomPagination = (props) => {
+ const [activeItem, setActiveItem] = React.useState(2);
+ const { totalPages = 5, size = "md", withIcons = false, disablePrev = false } = props;
+
+ const onPrevItem = () => {
+ const prevActiveItem = activeItem === 1 ? activeItem : activeItem - 1;
+ setActiveItem(prevActiveItem);
+ };
+
+ const onNextItem = (totalPages) => {
+ const nextActiveItem = activeItem === totalPages ? activeItem : activeItem + 1;
+ setActiveItem(nextActiveItem);
+ };
+
+ const items = [];
+ for (let number = 1; number <= totalPages; number++) {
+ const isItemActive = activeItem === number;
+
+ const handlePaginationChange = () => {
+ setActiveItem(number);
+ };
+
+ items.push(
+
+ {number}
+
+ );
+ };
+
+ return (
+
+
+ {withIcons ?
+ {items}
+ onNextItem(totalPages)}>
+ {withIcons ?
+
+ );
+};
+
+render(
+
+
+
+
+
+);`}
+ />
+
+
+ );
+};
diff --git a/src/pages/components/Popovers.js b/src/pages/components/Popovers.js
index 113b9692..51b57d05 100644
--- a/src/pages/components/Popovers.js
+++ b/src/pages/components/Popovers.js
@@ -1,97 +1,97 @@
-
-import React from 'react';
-import { Col, Row, Button, Popover, Container, OverlayTrigger } from '@themesberg/react-bootstrap';
-
-import Documentation from "../../components/Documentation";
-
-
-export default () => {
- return (
-
-
-
- Popovers
-
- Use popovers to indicate extra content for your users when clicking on an element.
-
-
-
-
- The <OverlayTrigger> and <Popover> component can be used to show extra information by clicking on a given element. You can set the title and content using the <Popover.Title> and <Popover.Content> subcomponents. Make sure you wrap the <OverlayTrigger> component around the popover and the element that will trigger the event.
- }
- scope={{ Button, Popover, OverlayTrigger }}
- imports={`import { Button, Popover, OverlayTrigger } from '@themesberg/react-bootstrap';`}
- example={`
- Popover on top
- Vivamus sagittis lacus vel augue laoreet rutrum faucibus.
-
- }>
- Popover on top
- `}
- />
-
- The <Popover> can also be positioned accordingly, using the placement="*" attribute, where the value can be either top, right, bottom or left.
- }
- scope={{ Button, Popover, OverlayTrigger }}
- imports={`import { Button, Popover, OverlayTrigger } from '@themesberg/react-bootstrap';`}
- example={`
-
- Popover on top
- Vivamus sagittis lacus vel augue laoreet rutrum faucibus.
-
- }>
- Popover on top
-
-
- Popover on right
- Vivamus sagittis lacus vel augue laoreet rutrum faucibus.
-
- }>
- Popover on right
-
-
- Popover on bottom
- Vivamus sagittis lacus vel augue laoreet rutrum faucibus.
-
- }>
- Popover on bottom
-
-
- Popover on left
- Vivamus sagittis lacus vel augue laoreet rutrum faucibus.
-
- }>
- Popover on left
-
- `}
- />
-
-
- );
-};
+
+import React from 'react';
+import { Col, Row, Button, Popover, Container, OverlayTrigger } from '@themesberg/react-bootstrap';
+
+import Documentation from "../../components/Documentation";
+
+
+export default () => {
+ return (
+
+
+
+ Popovers
+
+ Use popovers to indicate extra content for your users when clicking on an element.
+
+
+
+
+ The <OverlayTrigger> and <Popover> component can be used to show extra information by clicking on a given element. You can set the title and content using the <Popover.Title> and <Popover.Content> subcomponents. Make sure you wrap the <OverlayTrigger> component around the popover and the element that will trigger the event.
+ }
+ scope={{ Button, Popover, OverlayTrigger }}
+ imports={`import { Button, Popover, OverlayTrigger } from '@themesberg/react-bootstrap';`}
+ example={`
+ Popover on top
+ Vivamus sagittis lacus vel augue laoreet rutrum faucibus.
+
+ }>
+ Popover on top
+ `}
+ />
+
+ The <Popover> can also be positioned accordingly, using the placement="*" attribute, where the value can be either top, right, bottom or left.
+ }
+ scope={{ Button, Popover, OverlayTrigger }}
+ imports={`import { Button, Popover, OverlayTrigger } from '@themesberg/react-bootstrap';`}
+ example={`
+
+ Popover on top
+ Vivamus sagittis lacus vel augue laoreet rutrum faucibus.
+
+ }>
+ Popover on top
+
+
+ Popover on right
+ Vivamus sagittis lacus vel augue laoreet rutrum faucibus.
+
+ }>
+ Popover on right
+
+
+ Popover on bottom
+ Vivamus sagittis lacus vel augue laoreet rutrum faucibus.
+
+ }>
+ Popover on bottom
+
+
+ Popover on left
+ Vivamus sagittis lacus vel augue laoreet rutrum faucibus.
+
+ }>
+ Popover on left
+
+ `}
+ />
+
+
+ );
+};
diff --git a/src/pages/components/Progress.js b/src/pages/components/Progress.js
index c350f4c5..6ef82da9 100644
--- a/src/pages/components/Progress.js
+++ b/src/pages/components/Progress.js
@@ -1,63 +1,63 @@
-
-import React from 'react';
-import { Col, Row, Container } from '@themesberg/react-bootstrap';
-
-import Documentation from "../../components/Documentation";
-import Progress from "../../components/Progress";
-
-export default () => (
-
-
-
- Progress
-
- Use progress bars to indicate percentage based components.
-
-
-
-
- Use the <Progress> component to show progress bars or loaders for your app. You can set the value of the bar using the value attribute. You can also change the appearance using the variant="*" attributes using the default Bootstrap color classes, such as primary, secondary, danger and so on.
- }
- scope={{ Progress }}
- imports={`import Progress from "src/components/Progress";`}
- example={`To update the appearance of the <Progress> component you can use the following classes for the variant attribute. You can also add a label text using the label="lorem ipsum" attribute.
- }
- scope={{ Progress }}
- imports={`import Progress from "src/components/Progress";`}
- example={`
- `}
- />
-
- You can also use one of the four available sizes for the <Progress> updating the size="*" attribute.
- }
- scope={{ Progress }}
- imports={`import Progress from "src/components/Progress";`}
- example={`
- `}
- />
-
-
-);
+
+import React from 'react';
+import { Col, Row, Container } from '@themesberg/react-bootstrap';
+
+import Documentation from "../../components/Documentation";
+import Progress from "../../components/Progress";
+
+export default () => (
+
+
+
+ Progress
+
+ Use progress bars to indicate percentage based components.
+
+
+
+
+ Use the <Progress> component to show progress bars or loaders for your app. You can set the value of the bar using the value attribute. You can also change the appearance using the variant="*" attributes using the default Bootstrap color classes, such as primary, secondary, danger and so on.
+ }
+ scope={{ Progress }}
+ imports={`import Progress from "src/components/Progress";`}
+ example={`To update the appearance of the <Progress> component you can use the following classes for the variant attribute. You can also add a label text using the label="lorem ipsum" attribute.
+ }
+ scope={{ Progress }}
+ imports={`import Progress from "src/components/Progress";`}
+ example={`
+ `}
+ />
+
+ You can also use one of the four available sizes for the <Progress> updating the size="*" attribute.
+ }
+ scope={{ Progress }}
+ imports={`import Progress from "src/components/Progress";`}
+ example={`
+ `}
+ />
+
+
+);
diff --git a/src/pages/components/Tables.js b/src/pages/components/Tables.js
index 4e10c535..cba64c65 100644
--- a/src/pages/components/Tables.js
+++ b/src/pages/components/Tables.js
@@ -1,142 +1,142 @@
-
-import React from "react";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faAngleDown, faAngleUp } from "@fortawesome/free-solid-svg-icons";
-import { Col, Row, Table, Image, Container } from '@themesberg/react-bootstrap';
-
-import Documentation from "../../components/Documentation";
-
-import USAFlag from "../../assets/img/flags/united-states-of-america.svg";
-import CanadaFlag from "../../assets/img/flags/canada.svg";
-import UKFlag from "../../assets/img/flags/united-kingdom.svg";
-import FranceFlag from "../../assets/img/flags/france.svg";
-import JapanFlag from "../../assets/img/flags/japan.svg";
-import GermanyFlag from "../../assets/img/flags/germany.svg";
-
-
-export default () => {
- return (
-
-
-
- Tables
-
- Use tables to show more complex amount of data.
-
-
-
-
-
- The <Table> component can be used to show more complex amounts of data. We recommend you to use the local <TableRow> method and component to build rows for the table and set the columns and props from there.
- In this example, the props from <TableRow>, such as the country, countryIcon, value, and percentage are being set as props. After that, the <TableRow> components are being added in the final <Table> rendering.
-
- }
- scope={{ Image, Table, FontAwesomeIcon, faAngleDown, faAngleUp, USAFlag, CanadaFlag, UKFlag, FranceFlag, JapanFlag, GermanyFlag }}
- imports={`import { Image, Table } from '@themesberg/react-bootstrap';
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faAngleDown, faAngleUp } from "@fortawesome/free-solid-svg-icons";
-
-import USAFlag from "src/assets/img/flags/united-states-of-america.svg";
-import CanadaFlag from "src/assets/img/flags/canada.svg";
-import UKFlag from "src/assets/img/flags/united-kingdom.svg";
-import FranceFlag from "src/assets/img/flags/france.svg";
-import JapanFlag from "src/assets/img/flags/japan.svg";
-import GermanyFlag from "src/assets/img/flags/germany.svg";`}
- example={``}
- />
-
-
- );
+
+import React from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faAngleDown, faAngleUp } from "@fortawesome/free-solid-svg-icons";
+import { Col, Row, Table, Image, Container } from '@themesberg/react-bootstrap';
+
+import Documentation from "../../components/Documentation";
+
+import USAFlag from "../../assets/img/flags/united-states-of-america.svg";
+import CanadaFlag from "../../assets/img/flags/canada.svg";
+import UKFlag from "../../assets/img/flags/united-kingdom.svg";
+import FranceFlag from "../../assets/img/flags/france.svg";
+import JapanFlag from "../../assets/img/flags/japan.svg";
+import GermanyFlag from "../../assets/img/flags/germany.svg";
+
+
+export default () => {
+ return (
+
+
+
+ Tables
+
+ Use tables to show more complex amount of data.
+
+
+
+
+
+ The <Table> component can be used to show more complex amounts of data. We recommend you to use the local <TableRow> method and component to build rows for the table and set the columns and props from there.
+ In this example, the props from <TableRow>, such as the country, countryIcon, value, and percentage are being set as props. After that, the <TableRow> components are being added in the final <Table> rendering.
+
+ }
+ scope={{ Image, Table, FontAwesomeIcon, faAngleDown, faAngleUp, USAFlag, CanadaFlag, UKFlag, FranceFlag, JapanFlag, GermanyFlag }}
+ imports={`import { Image, Table } from '@themesberg/react-bootstrap';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faAngleDown, faAngleUp } from "@fortawesome/free-solid-svg-icons";
+
+import USAFlag from "src/assets/img/flags/united-states-of-america.svg";
+import CanadaFlag from "src/assets/img/flags/canada.svg";
+import UKFlag from "src/assets/img/flags/united-kingdom.svg";
+import FranceFlag from "src/assets/img/flags/france.svg";
+import JapanFlag from "src/assets/img/flags/japan.svg";
+import GermanyFlag from "src/assets/img/flags/germany.svg";`}
+ example={``}
+ />
+
+
+ );
};
\ No newline at end of file
diff --git a/src/pages/components/Tabs.js b/src/pages/components/Tabs.js
index b4342052..a500c57d 100644
--- a/src/pages/components/Tabs.js
+++ b/src/pages/components/Tabs.js
@@ -1,203 +1,203 @@
-
-import React from "react";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faLaptopCode, faPalette } from "@fortawesome/free-solid-svg-icons";
-import { faUser } from "@fortawesome/free-regular-svg-icons";
-import { Col, Row, Nav, Tab, Card, Container } from '@themesberg/react-bootstrap';
-
-import Documentation from "../../components/Documentation";
-
-export default () => {
- return (
-
-
-
- Tabs
-
- Use tabs to partition important data into easily navigable and interchangeable elements.
-
-
-
-
-
- The <Tab> component is great if you want to show multiple resources of content with an easy partitioning using nav tabs. First you need to use the <Tab.Container> component to wrap around the content.
- The first part of the component will be the <Nav> component where you can add as many <NavItem> components as you'd like. The <Nav.Link> component can then be used to set the tab panel that it should open up when clicking on it.
- The <Tab.Content> component and its subcomponents are the content that will be shown based on which <Nav.Link> is being clicked on. The eventKey="*" attribute should be used for both the <Nav.Link> and <Tab.Content> to link the two together.
-
- }
- scope={{ Nav, Tab }}
- imports={`import { Nav, Tab } from '@themesberg/react-bootstrap';`}
- example={`
-
-
-
- Home
-
-
-
-
- Profile
-
-
-
-
- Messages
-
-
-
-
-
-
- Exercitation photo booth stumptown tote bag Banksy, elit small batch freegan sed. Craft beer elit seitan exercitation, photo booth et 8-bit kale chips proident chillwave deep v laborum. Aliquip veniam delectus, Marfa eiusmod Pinterest in do umami readymade swag.
-
-
- Day handsome addition horrible sensible goodness two contempt. Evening for married his account removal. Estimable me disposing of be moonlight cordially curiosity.
-
-
-
-
- Photo booth stumptown tote bag Banksy, elit small batch freegan sed. Craft beer elit seitan exercitation, photo booth et 8-bit kale chips proident chillwave deep v laborum. Aliquip veniam delectus, Marfa eiusmod Pinterest in do umami readymade swag.
-
-
- Day handsome addition horrible sensible goodness two contempt. Evening for married his account removal. Estimable me disposing of be moonlight cordially curiosity.
-
-
-
-
- Exercitation photo booth stumptown tote bag Banksy, elit small batch freegan sed. Craft beer elit seitan exercitation, photo booth et 8-bit kale chips proident chillwave deep v laborum. Aliquip veniam delectus, Marfa eiusmod Pinterest in do umami readymade swag.
-
-
- Day handsome addition horrible sensible goodness two contempt. Evening for married his account removal. Estimable me disposing of be moonlight cordially curiosity.
-
-
-
- `}
- />
-
- The following example shows how you can add an icon using the <FontAwesomeIcon> component inside the navigation item component.
- }
- scope={{ Row, Col, Nav, Tab, FontAwesomeIcon, faPalette, faLaptopCode, faUser }}
- imports={`import { Row, Col, Nav, Tab } from '@themesberg/react-bootstrap';
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faLaptopCode, faPalette } from "@fortawesome/free-solid-svg-icons";
-import { faUser } from "@fortawesome/free-regular-svg-icons";`}
- example={`
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Exercitation photo booth stumptown tote bag Banksy, elit small batch freegan sed. Craft beer elit seitan exercitation, photo booth et 8-bit kale chips proident chillwave deep v laborum. Aliquip veniam delectus, Marfa eiusmod Pinterest in do umami readymade swag.
-
-
- Day handsome addition horrible sensible goodness two contempt. Evening for married his account removal. Estimable me disposing of be moonlight cordially curiosity.
-
-
-
-
- Photo booth stumptown tote bag Banksy, elit small batch freegan sed. Craft beer elit seitan exercitation, photo booth et 8-bit kale chips proident chillwave deep v laborum. Aliquip veniam delectus, Marfa eiusmod Pinterest in do umami readymade swag.
-
-
- Day handsome addition horrible sensible goodness two contempt. Evening for married his account removal. Estimable me disposing of be moonlight cordially curiosity.
-
-
-
-
- Exercitation photo booth stumptown tote bag Banksy, elit small batch freegan sed. Craft beer elit seitan exercitation, photo booth et 8-bit kale chips proident chillwave deep v laborum. Aliquip veniam delectus, Marfa eiusmod Pinterest in do umami readymade swag.
-
-
- Day handsome addition horrible sensible goodness two contempt. Evening for married his account removal. Estimable me disposing of be moonlight cordially curiosity.
-
-
-
-
-
- `}
- />
-
-
-
-
-
-
- Home
-
-
-
-
- Profile
-
-
-
-
- Messages
-
-
-
-
-
-
-
- Exercitation photo booth stumptown tote bag Banksy, elit small batch freegan sed. Craft beer elit seitan exercitation, photo booth et 8-bit kale chips proident chillwave deep v laborum. Aliquip veniam delectus, Marfa eiusmod Pinterest in do umami readymade swag.
-
-
- Day handsome addition horrible sensible goodness two contempt. Evening for married his account removal. Estimable me disposing of be moonlight cordially curiosity.
-
-
-
-
- Photo booth stumptown tote bag Banksy, elit small batch freegan sed. Craft beer elit seitan exercitation, photo booth et 8-bit kale chips proident chillwave deep v laborum. Aliquip veniam delectus, Marfa eiusmod Pinterest in do umami readymade swag.
-
-
- Day handsome addition horrible sensible goodness two contempt. Evening for married his account removal. Estimable me disposing of be moonlight cordially curiosity.
-
-
-
-
- Exercitation photo booth stumptown tote bag Banksy, elit small batch freegan sed. Craft beer elit seitan exercitation, photo booth et 8-bit kale chips proident chillwave deep v laborum. Aliquip veniam delectus, Marfa eiusmod Pinterest in do umami readymade swag.
-
-
- Day handsome addition horrible sensible goodness two contempt. Evening for married his account removal. Estimable me disposing of be moonlight cordially curiosity.
-
-
-
-
-
-`}
- />
-
-
-
- );
+
+import React from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faLaptopCode, faPalette } from "@fortawesome/free-solid-svg-icons";
+import { faUser } from "@fortawesome/free-regular-svg-icons";
+import { Col, Row, Nav, Tab, Card, Container } from '@themesberg/react-bootstrap';
+
+import Documentation from "../../components/Documentation";
+
+export default () => {
+ return (
+
+
+
+ Tabs
+
+ Use tabs to partition important data into easily navigable and interchangeable elements.
+
+
+
+
+
+ The <Tab> component is great if you want to show multiple resources of content with an easy partitioning using nav tabs. First you need to use the <Tab.Container> component to wrap around the content.
+ The first part of the component will be the <Nav> component where you can add as many <NavItem> components as you'd like. The <Nav.Link> component can then be used to set the tab panel that it should open up when clicking on it.
+ The <Tab.Content> component and its subcomponents are the content that will be shown based on which <Nav.Link> is being clicked on. The eventKey="*" attribute should be used for both the <Nav.Link> and <Tab.Content> to link the two together.
+
+ }
+ scope={{ Nav, Tab }}
+ imports={`import { Nav, Tab } from '@themesberg/react-bootstrap';`}
+ example={`
+
+
+
+ Home
+
+
+
+
+ Profile
+
+
+
+
+ Messages
+
+
+
+
+
+
+ Exercitation photo booth stumptown tote bag Banksy, elit small batch freegan sed. Craft beer elit seitan exercitation, photo booth et 8-bit kale chips proident chillwave deep v laborum. Aliquip veniam delectus, Marfa eiusmod Pinterest in do umami readymade swag.
+
+
+ Day handsome addition horrible sensible goodness two contempt. Evening for married his account removal. Estimable me disposing of be moonlight cordially curiosity.
+
+
+
+
+ Photo booth stumptown tote bag Banksy, elit small batch freegan sed. Craft beer elit seitan exercitation, photo booth et 8-bit kale chips proident chillwave deep v laborum. Aliquip veniam delectus, Marfa eiusmod Pinterest in do umami readymade swag.
+
+
+ Day handsome addition horrible sensible goodness two contempt. Evening for married his account removal. Estimable me disposing of be moonlight cordially curiosity.
+
+
+
+
+ Exercitation photo booth stumptown tote bag Banksy, elit small batch freegan sed. Craft beer elit seitan exercitation, photo booth et 8-bit kale chips proident chillwave deep v laborum. Aliquip veniam delectus, Marfa eiusmod Pinterest in do umami readymade swag.
+
+
+ Day handsome addition horrible sensible goodness two contempt. Evening for married his account removal. Estimable me disposing of be moonlight cordially curiosity.
+
+
+
+ `}
+ />
+
+ The following example shows how you can add an icon using the <FontAwesomeIcon> component inside the navigation item component.
+ }
+ scope={{ Row, Col, Nav, Tab, FontAwesomeIcon, faPalette, faLaptopCode, faUser }}
+ imports={`import { Row, Col, Nav, Tab } from '@themesberg/react-bootstrap';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faLaptopCode, faPalette } from "@fortawesome/free-solid-svg-icons";
+import { faUser } from "@fortawesome/free-regular-svg-icons";`}
+ example={`
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Exercitation photo booth stumptown tote bag Banksy, elit small batch freegan sed. Craft beer elit seitan exercitation, photo booth et 8-bit kale chips proident chillwave deep v laborum. Aliquip veniam delectus, Marfa eiusmod Pinterest in do umami readymade swag.
+
+
+ Day handsome addition horrible sensible goodness two contempt. Evening for married his account removal. Estimable me disposing of be moonlight cordially curiosity.
+
+
+
+
+ Photo booth stumptown tote bag Banksy, elit small batch freegan sed. Craft beer elit seitan exercitation, photo booth et 8-bit kale chips proident chillwave deep v laborum. Aliquip veniam delectus, Marfa eiusmod Pinterest in do umami readymade swag.
+
+
+ Day handsome addition horrible sensible goodness two contempt. Evening for married his account removal. Estimable me disposing of be moonlight cordially curiosity.
+
+
+
+
+ Exercitation photo booth stumptown tote bag Banksy, elit small batch freegan sed. Craft beer elit seitan exercitation, photo booth et 8-bit kale chips proident chillwave deep v laborum. Aliquip veniam delectus, Marfa eiusmod Pinterest in do umami readymade swag.
+
+
+ Day handsome addition horrible sensible goodness two contempt. Evening for married his account removal. Estimable me disposing of be moonlight cordially curiosity.
+
+
+
+
+
+ `}
+ />
+
+
+
+
+
+
+ Home
+
+
+
+
+ Profile
+
+
+
+
+ Messages
+
+
+
+
+
+
+
+ Exercitation photo booth stumptown tote bag Banksy, elit small batch freegan sed. Craft beer elit seitan exercitation, photo booth et 8-bit kale chips proident chillwave deep v laborum. Aliquip veniam delectus, Marfa eiusmod Pinterest in do umami readymade swag.
+
+
+ Day handsome addition horrible sensible goodness two contempt. Evening for married his account removal. Estimable me disposing of be moonlight cordially curiosity.
+
+
+
+
+ Photo booth stumptown tote bag Banksy, elit small batch freegan sed. Craft beer elit seitan exercitation, photo booth et 8-bit kale chips proident chillwave deep v laborum. Aliquip veniam delectus, Marfa eiusmod Pinterest in do umami readymade swag.
+
+
+ Day handsome addition horrible sensible goodness two contempt. Evening for married his account removal. Estimable me disposing of be moonlight cordially curiosity.
+
+
+
+
+ Exercitation photo booth stumptown tote bag Banksy, elit small batch freegan sed. Craft beer elit seitan exercitation, photo booth et 8-bit kale chips proident chillwave deep v laborum. Aliquip veniam delectus, Marfa eiusmod Pinterest in do umami readymade swag.
+
+
+ Day handsome addition horrible sensible goodness two contempt. Evening for married his account removal. Estimable me disposing of be moonlight cordially curiosity.
+
+
+
+
+
+`}
+ />
+
+
+
+ );
};
\ No newline at end of file
diff --git a/src/pages/components/Toasts.js b/src/pages/components/Toasts.js
index 8be674b3..adf76f21 100644
--- a/src/pages/components/Toasts.js
+++ b/src/pages/components/Toasts.js
@@ -1,106 +1,106 @@
-
-import React, { useState } from 'react';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faBootstrap } from '@fortawesome/free-brands-svg-icons';
-import { Col, Row, Card, Toast, Button, Container } from '@themesberg/react-bootstrap';
-
-import Documentation from "../../components/Documentation";
-
-
-export default () => {
- const [showDefault, setShowDefault] = useState(true);
- const [showPrimary, setShowPrimary] = useState(true);
- const [showTertiary, setShowTertiary] = useState(true);
-
- const handleCloseDefault = () => setShowDefault(false);
- const handleClosePrimary = () => setShowPrimary(false);
- const handleCloseTertiary = () => setShowTertiary(false);
-
- return (
-
-
-
- Toasts
-
- Use toasts to indicate messages.
-
-
-
-
-
- Use the <Toast> component to show messages and notifications to the user. The component is split into two main subcomponents: <Toast.Header> and <Toast.Body> where you can add the text that you want.
- You can also use the handleClose function to handle the event of closing the component.
-
- }
- scope={{ Card, Toast, Button, useState, FontAwesomeIcon, faBootstrap, showDefault, setShowDefault, handleCloseDefault }}
- imports={`import React, { useState } from 'react';
-import { Card, Toast, Button } from '@themesberg/react-bootstrap';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faBootstrap } from '@fortawesome/free-brands-svg-icons';
-
-const [showDefault, setShowDefault] = useState(true);
-const toggleDefaultToast = () => setShowDefault(!showDefault);`}
- example={`
-
- Volt
- 11 mins ago
-
-
- Hello, world! This is a toast message.
-
- `}
- />
-
- If you'd like to customize the appearance of the <Toast> component, you can easily do so by adding a bg-primary, bg-secondary, and any other bg-* modifier class to the main <Toast> component.
- }
- scope={{ Toast, Button, useState, FontAwesomeIcon, faBootstrap, showPrimary, setShowPrimary, handleClosePrimary, showTertiary, setShowTertiary, handleCloseTertiary }}
- imports={`import React, { useState } from 'react';
-import { Toast, Button } from '@themesberg/react-bootstrap';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faBootstrap } from '@fortawesome/free-brands-svg-icons';
-
-const [showPrimary, setShowPrimary] = useState(true);
-const [showTertiary, setShowTertiary] = useState(true);
-
-const handleClosePrimary = () => setShowPrimary(false);
-const handleCloseTertiary = () => setShowTertiary(false);`}
- example={`
-
-
- Themesberg
- 11 mins ago
-
-
- Hello, world! This is a toast message.
-
-
-
-
-
- Themesberg
- 11 mins ago
-
-
- Hello, world! This is a toast message.
-
-
- `}
- />
-
-
-
- );
-};
+
+import React, { useState } from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faBootstrap } from '@fortawesome/free-brands-svg-icons';
+import { Col, Row, Card, Toast, Button, Container } from '@themesberg/react-bootstrap';
+
+import Documentation from "../../components/Documentation";
+
+
+export default () => {
+ const [showDefault, setShowDefault] = useState(true);
+ const [showPrimary, setShowPrimary] = useState(true);
+ const [showTertiary, setShowTertiary] = useState(true);
+
+ const handleCloseDefault = () => setShowDefault(false);
+ const handleClosePrimary = () => setShowPrimary(false);
+ const handleCloseTertiary = () => setShowTertiary(false);
+
+ return (
+
+
+
+ Toasts
+
+ Use toasts to indicate messages.
+
+
+
+
+
+ Use the <Toast> component to show messages and notifications to the user. The component is split into two main subcomponents: <Toast.Header> and <Toast.Body> where you can add the text that you want.
+ You can also use the handleClose function to handle the event of closing the component.
+
+ }
+ scope={{ Card, Toast, Button, useState, FontAwesomeIcon, faBootstrap, showDefault, setShowDefault, handleCloseDefault }}
+ imports={`import React, { useState } from 'react';
+import { Card, Toast, Button } from '@themesberg/react-bootstrap';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faBootstrap } from '@fortawesome/free-brands-svg-icons';
+
+const [showDefault, setShowDefault] = useState(true);
+const toggleDefaultToast = () => setShowDefault(!showDefault);`}
+ example={`
+
+ Volt
+ 11 mins ago
+
+
+ Hello, world! This is a toast message.
+
+ `}
+ />
+
+ If you'd like to customize the appearance of the <Toast> component, you can easily do so by adding a bg-primary, bg-secondary, and any other bg-* modifier class to the main <Toast> component.
+ }
+ scope={{ Toast, Button, useState, FontAwesomeIcon, faBootstrap, showPrimary, setShowPrimary, handleClosePrimary, showTertiary, setShowTertiary, handleCloseTertiary }}
+ imports={`import React, { useState } from 'react';
+import { Toast, Button } from '@themesberg/react-bootstrap';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faBootstrap } from '@fortawesome/free-brands-svg-icons';
+
+const [showPrimary, setShowPrimary] = useState(true);
+const [showTertiary, setShowTertiary] = useState(true);
+
+const handleClosePrimary = () => setShowPrimary(false);
+const handleCloseTertiary = () => setShowTertiary(false);`}
+ example={`
+
+
+ Themesberg
+ 11 mins ago
+
+
+ Hello, world! This is a toast message.
+
+
+
+
+
+ Themesberg
+ 11 mins ago
+
+
+ Hello, world! This is a toast message.
+
+
+ `}
+ />
+
+
+
+ );
+};
diff --git a/src/pages/components/Tooltips.js b/src/pages/components/Tooltips.js
index 58a17ed8..8a779473 100644
--- a/src/pages/components/Tooltips.js
+++ b/src/pages/components/Tooltips.js
@@ -1,82 +1,82 @@
-
-import React from 'react';
-import { Col, Row, Button, Tooltip, Container, OverlayTrigger } from '@themesberg/react-bootstrap';
-
-import Documentation from "../../components/Documentation";
-
-
-export default () => {
- return (
-
-
-
- Tooltips
-
- Use tooltips to indicate extra content for your users when hovering over an element.
-
-
-
-
- Use the <OverlayTrigger> and <Tooltip> to show extra information when hovering or clicking on a given element. Make sure to wrap both the triggering element (ie. a button) and the <Tooltip> component in a <OverlayTrigger> component.
- }
- scope={{ Button, Tooltip, OverlayTrigger }}
- imports={`import { Button, Tooltip, OverlayTrigger } from '@themesberg/react-bootstrap';`}
- example={`Tooltip on top
- }>
- Tooltip on top
- `}
- />
-
- You can also easily position the <Tooltip> component in any direction using the placement="*" attribute, where the value can be top, right, bottom or left.
- }
- scope={{ Button, Tooltip, OverlayTrigger }}
- imports={`import { Button, Tooltip, OverlayTrigger } from '@themesberg/react-bootstrap';`}
- example={`
- Tooltip on top
- }>
- Tooltip on top
-
- Tooltip on right
- }>
- Tooltip on right
-
- Tooltip on bottom
- }>
- Tooltip on bottom
-
- Tooltip on left
- }>
- Tooltip on left
-
- `}
- />
-
-
- );
-};
+
+import React from 'react';
+import { Col, Row, Button, Tooltip, Container, OverlayTrigger } from '@themesberg/react-bootstrap';
+
+import Documentation from "../../components/Documentation";
+
+
+export default () => {
+ return (
+
+
+
+ Tooltips
+
+ Use tooltips to indicate extra content for your users when hovering over an element.
+
+
+
+
+ Use the <OverlayTrigger> and <Tooltip> to show extra information when hovering or clicking on a given element. Make sure to wrap both the triggering element (ie. a button) and the <Tooltip> component in a <OverlayTrigger> component.
+ }
+ scope={{ Button, Tooltip, OverlayTrigger }}
+ imports={`import { Button, Tooltip, OverlayTrigger } from '@themesberg/react-bootstrap';`}
+ example={`Tooltip on top
+ }>
+ Tooltip on top
+ `}
+ />
+
+ You can also easily position the <Tooltip> component in any direction using the placement="*" attribute, where the value can be top, right, bottom or left.
+ }
+ scope={{ Button, Tooltip, OverlayTrigger }}
+ imports={`import { Button, Tooltip, OverlayTrigger } from '@themesberg/react-bootstrap';`}
+ example={`
+ Tooltip on top
+ }>
+ Tooltip on top
+
+ Tooltip on right
+ }>
+ Tooltip on right
+
+ Tooltip on bottom
+ }>
+ Tooltip on bottom
+
+ Tooltip on left
+ }>
+ Tooltip on left
+
+ `}
+ />
+
+
+ );
+};
diff --git a/src/pages/dashboard/DashboardOverview.js b/src/pages/dashboard/DashboardOverview.js
index d27ae255..96a359aa 100644
--- a/src/pages/dashboard/DashboardOverview.js
+++ b/src/pages/dashboard/DashboardOverview.js
@@ -1,131 +1,131 @@
-
-import React from "react";
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faCashRegister, faChartLine, faCloudUploadAlt, faPlus, faRocket, faTasks, faUserShield } from '@fortawesome/free-solid-svg-icons';
-import { Col, Row, Button, Dropdown, ButtonGroup } from '@themesberg/react-bootstrap';
-
-import { CounterWidget, CircleChartWidget, BarChartWidget, TeamMembersWidget, ProgressTrackWidget, RankingWidget, SalesValueWidget, SalesValueWidgetPhone, AcquisitionWidget } from "../../components/Widgets";
-import { PageVisitsTable } from "../../components/Tables";
-import { trafficShares, totalOrders } from "../../data/charts";
-
-export default () => {
- return (
- <>
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Share
- Export
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-};
+
+import React from "react";
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faCashRegister, faChartLine, faCloudUploadAlt, faPlus, faRocket, faTasks, faUserShield } from '@fortawesome/free-solid-svg-icons';
+import { Col, Row, Button, Dropdown, ButtonGroup } from '@themesberg/react-bootstrap';
+
+import { CounterWidget, CircleChartWidget, BarChartWidget, TeamMembersWidget, ProgressTrackWidget, RankingWidget, SalesValueWidget, SalesValueWidgetPhone, AcquisitionWidget } from "../../components/Widgets";
+import { PageVisitsTable } from "../../components/Tables";
+import { trafficShares, totalOrders } from "../../data/charts";
+
+export default () => {
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+
+
+ */}
+
+
+
+
+ Share
+ Export
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
diff --git a/src/pages/documentation/DocsBuild.js b/src/pages/documentation/DocsBuild.js
index 74a936e3..d1d974b1 100644
--- a/src/pages/documentation/DocsBuild.js
+++ b/src/pages/documentation/DocsBuild.js
@@ -1,25 +1,25 @@
-
-import React from 'react';
-import { Row, Col, Card, Container } from '@themesberg/react-bootstrap';
-
-import { CommandsTable } from '../../components/Tables';
-
-export default () => (
-
-
-
-
-
-
- Learn the commands that will help you work with Volt React Dashboard and the commands that can build the final production version of your app.
-
- Available commands
-
-
-
-
-
-
-);
+
+import React from 'react';
+import { Row, Col, Card, Container } from '@themesberg/react-bootstrap';
+
+import { CommandsTable } from '../../components/Tables';
+
+export default () => (
+
+
+
+
+
+
+ Learn the commands that will help you work with Volt React Dashboard and the commands that can build the final production version of your app.
+
+ Available commands
+
+
+
+
+
+
+);
diff --git a/src/pages/documentation/DocsChangelog.js b/src/pages/documentation/DocsChangelog.js
index 6c4be219..1c0238c5 100644
--- a/src/pages/documentation/DocsChangelog.js
+++ b/src/pages/documentation/DocsChangelog.js
@@ -1,26 +1,26 @@
-
-import React from 'react';
-import { Row, Col, Card, Container } from '@themesberg/react-bootstrap';
-
-
-export default () => (
-
-
-
-
-
- Changelog
- This is the changelog for the new features and bug fixes for Volt React Dashboard
-
- Version 1.0.0 - January 19, 2021
-
- Initial release files
-
-
-
-
-
-
-
-);
+
+import React from 'react';
+import { Row, Col, Card, Container } from '@themesberg/react-bootstrap';
+
+
+export default () => (
+
+
+
+
+
+ Changelog
+ This is the changelog for the new features and bug fixes for Volt React Dashboard
+
+ Version 1.0.0 - January 19, 2021
+
+ Initial release files
+
+
+
+
+
+
+
+);
diff --git a/src/pages/documentation/DocsDownload.js b/src/pages/documentation/DocsDownload.js
index 5a7e6477..e0d1ab8c 100644
--- a/src/pages/documentation/DocsDownload.js
+++ b/src/pages/documentation/DocsDownload.js
@@ -1,25 +1,25 @@
-
-import React from 'react';
-import { Row, Col, Card, Container } from '@themesberg/react-bootstrap';
-
-
-export default () => (
-
-
-
-
-
- Download
- Download files for Volt React Dashboard
- Use the following links to download Volt React Dashboard files:
-
- Download Volt React Dashboard .
-
-
-
-
-
-
-
-);
+
+import React from 'react';
+import { Row, Col, Card, Container } from '@themesberg/react-bootstrap';
+
+
+export default () => (
+
+
+
+
+
+ Download
+ Download files for Volt React Dashboard
+ Use the following links to download Volt React Dashboard files:
+
+ Download Volt React Dashboard .
+
+
+
+
+
+
+
+);
diff --git a/src/pages/documentation/DocsFolderStructure.js b/src/pages/documentation/DocsFolderStructure.js
index 28d3c599..0ee3b493 100644
--- a/src/pages/documentation/DocsFolderStructure.js
+++ b/src/pages/documentation/DocsFolderStructure.js
@@ -1,55 +1,55 @@
-
-import React from 'react';
-import { Row, Col, Card, Container } from '@themesberg/react-bootstrap';
-
-
-export default () => (
-
-
-
-
-
- File structure
- Learn more about the file structure for Volt React Dashboard
-
- Main folders and files
- At the top level of the project you'll find:
-
- Three folders: public, src and node_modules
- And two files: package.json and README.md
-
-
- public/ folder
-
- The root folder that gets served up as our react app. The most important file in public folder is the index.html file. You can tweak this file, for example, to set the page title or add some library that may be incompatible with webpack and you have no other option but to include it as a {`
](https://themesberg.com/product/admin-dashboard/volt-bootstrap-5-dashboard)[
](https://themesberg.com/product/dashboard/volt-react)[
](https://themesberg.com/product/laravel/volt-admin-dashboard-template).
-
-| HTML | React |
-| --- | --- |
-| [](https://github.com/themesberg/volt-bootstrap-5-dashboard) | [](https://demo.themesberg.com/volt-react-dashboard/)
-
-## Demo
-
-| Dashboard | Transactions | Settings | Forms |
-| --- | --- | --- | --- |
-| [](https://demo.themesberg.com/volt-react-dashboard/#/dashboard/overview) | [](https://demo.themesberg.com/volt-react-dashboard/#/transactions) | [](https://demo.themesberg.com/volt-react-dashboard/#/settings) | [](https://demo.themesberg.com/volt-react-dashboard/#/tables/bootstrap-tables)
-
-| Sign in | Sign up | Forgot password | Reset password |
-| --- | --- | --- | --- |
-| [](https://demo.themesberg.com/volt-react-dashboard/#/examples/sign-in) | [](https://demo.themesberg.com/volt-react-dashboard/#/examples/sign-up) | [](https://demo.themesberg.com/volt-react-dashboard/#/examples/forgot-password) | [](https://demo.themesberg.com/volt-react-dashboard/#/examples/reset-password)
-
-| Lock Profile | 404 Not Found | 500 Server Error | Documentation |
-| --- | --- | --- | --- |
-| [](https://demo.themesberg.com/volt-react-dashboard/#/examples/lock) | [](https://demo.themesberg.com/volt-react-dashboard/#/examples/404) | [](https://demo.themesberg.com/volt-react-dashboard/#/examples/500) | [](https://demo.themesberg.com/volt-react-dashboard/#/documentation/quick-start)
-
-- [Live Demo](https://demo.themesberg.com/volt-react-dashboard)
-- [Download](https://themesberg.com/product/dashboard/volt-react)
-
-## Quick start
-
-1. Register and Download from [Themesberg](https://themesberg.com/product/dashboard/volt-react) or clone this repository
-2. Download the project's zip
-
-### Using Yarn
-
-3. Make sure you have [Yarn](https://yarnpkg.com/) installed.
-4. After installing `yarn`, open a terminal and run `yarn install` in the main volt folder to download all project dependencies.
-
-```
-yarn install
-```
-
-5. Then start the app in development mode by running the following command in terminal:
-
-```
-yarn start
-```
-
-6. Open http://localhost:3000 to view it in the browser. Any changes you make to the code will be automatically reflected in the browser.
-
-7. If you want to generate the production files, change the `homepage` value from the `package.json` to the domain name that the app will be hosted on, and then run the following command in the terminal:
-
-```
-yarn build
-```
-
-### Using NPM
-
-3. Make sure you have [Node.js](https://nodejs.org/en/) installed. Make sure the installed Node version is >= 8.10 and of npm >= 5.6
-
-4. After installing Node.js, open a terminal and run `npm install` in the main `volt-react-dashboard/` folder to download all project dependencies. You'll find them in the `node_modules/` folder.
-
-```
-npm install
-```
-
-5. Then start the app in development mode by running the following command in terminal:
-
-```
-npm run start
-```
-
-6. Open http://localhost:3000 to view it in the browser. Any changes you make to the code will be automatically reflected in the browser.
-
-7. If you want to generate the production files, change the `homepage` value from the `package.json` to the domain name that the app will be hosted on, and then run the following command in the terminal:
-
-```
-npm run build
-```
-
-## Documentation
-
-Every component, plugin and getting started is thoroughly documented on our [online documentation](https://demo.themesberg.com/volt-react-dashboard/#/documentation/quick-start).
-
-## File Structure
-
-Within the download you'll find the following directories and files:
-
-```
-Volt React Dashboard
-.
-├── LICENSE.md
-├── README.md
-├── package-lock.json
-├── package.json
-├── public
-│ ├── android-chrome-192x192.png
-│ ├── android-chrome-512x512.png
-│ ├── apple-touch-icon.png
-│ ├── browserconfig.xml
-│ ├── favicon-16x16.png
-│ ├── favicon-32x32.png
-│ ├── favicon.ico
-│ ├── index.html
-│ ├── manifest.json
-│ ├── mstile-150x150.png
-│ ├── robots.txt
-│ ├── safari-pinned-tab.svg
-│ └── site.webmanifest
-├── src
-│ ├── assets
-│ │ ├── img
-│ │ └── syntax-themes
-│ ├── components
-│ │ ├── AccordionComponent.js
-│ │ ├── Charts.js
-│ │ ├── Code.js
-│ │ ├── CodeEditor.js
-│ │ ├── Documentation.js
-│ │ ├── Footer.js
-│ │ ├── Forms.js
-│ │ ├── Navbar.js
-│ │ ├── Preloader.js
-│ │ ├── Progress.js
-│ │ ├── ScrollToTop.js
-│ │ ├── Sidebar.js
-│ │ ├── Tables.js
-│ │ └── Widgets.js
-│ ├── data
-│ │ ├── charts.js
-│ │ ├── commands.js
-│ │ ├── features.js
-│ │ ├── notifications.js
-│ │ ├── pages.js
-│ │ ├── tables.js
-│ │ ├── teamMembers.js
-│ │ └── transactions.js
-│ ├── index.js
-│ ├── pages
-│ │ ├── HomePage.js
-│ │ ├── Presentation.js
-│ │ ├── Settings.js
-│ │ ├── Transactions.js
-│ │ ├── components
-│ │ ├── dashboard
-│ │ ├── documentation
-│ │ ├── examples
-│ │ └── tables
-│ ├── routes.js
-│ └── scss
-│ ├── volt
-│ └── volt.scss
-└── yarn.lock
-
-```
-
-## Browser Support
-
-At present, we officially aim to support the last two versions of the following browsers:
-
-
-
-## Resources
-
-- Demo: