From 6177c29dadde6f2e59045230ca73c0d16d3cf917 Mon Sep 17 00:00:00 2001 From: Muhammad Shiddiq Fathullah Date: Sun, 8 Jan 2023 16:27:57 +0700 Subject: [PATCH 01/34] Test Commit --- pages/landing.js | 1082 +++++++++++++++++++++++----------------------- 1 file changed, 549 insertions(+), 533 deletions(-) diff --git a/pages/landing.js b/pages/landing.js index a0f5d2e2..7ebc08bf 100644 --- a/pages/landing.js +++ b/pages/landing.js @@ -7,562 +7,578 @@ import Navbar from "components/Navbars/AuthNavbar.js"; import Footer from "components/Footers/Footer.js"; export default function Landing() { - return ( - <> - -
-
-
+ return ( + <> + +
+
+
-
-
-
-
-
-

- Your story starts with us. -

-

- This is a simple example of a Landing Page you can build - using Notus NextJS. It features multiple CSS components - based on the Tailwind CSS design system. -

-
-
-
-
-
- - - -
-
- -
-
-
-
-
-
-
-
-
Awarded Agency
-

- Divide details about your product or agency work into - parts. A paragraph describing a feature will be enough. -

-
-
-
- -
-
-
-
- +
+
+
+
+

+ Your story starts with us. +

+

+ This is a simple example of a Landing Page you can build + using Notus NextJS. It features multiple CSS components + based on the Tailwind CSS design system. +

+
+
+
-
Free Revisions
-

- Keep you user engaged by providing meaningful information. - Remember that by this time, the user is curious. -

-
-
-
- -
-
-
-
- +
+ + +
-
Verified Company
-

- Write a few lines about each one. A paragraph describing a - feature will be enough. Keep you user engaged! -

-
-
-
-
-
-
- -
-

- Working with us is a pleasure -

-

- Don't let your uses guess by attaching tooltips and popoves to - any element. Just make sure you enable them first via - JavaScript. -

-

- The kit comes with three pre-built pages to help you get - started faster. You can change the text and images and you're - good to go. Just make sure you enable them first via - JavaScript. -

- - - Check Notus NextJS! - - -
+
+
+
+
+
+
+
+ +
+
Awarded Agency
+

+ Divide details about your product or agency work into + parts. A paragraph describing a feature will be enough. +

+
+
+
-
-
- ... -
- - - -

- Top Notch Services -

-

- The Arctic Ocean freezes every winter and much of the - sea-ice then thaws every summer, and that process will - continue whatever happens. -

-
-
-
-
-
-
+
+
+
+
+ +
+
Free Revisions
+

+ Keep you user engaged by providing meaningful information. + Remember that by this time, the user is curious. +

+
+
+
-
-
- - - -
+
+
+
+
+ +
+
Verified Company
+

+ Write a few lines about each one. A paragraph describing a + feature will be enough. Keep you user engaged! +

+
+
+
+
+ +
+
+
+ +
+

+ Working with us is a pleasure +

+

+ Don't let your uses guess by attaching tooltips and popoves to + any element. Just make sure you enable them first via + JavaScript. +

+

+ The kit comes with three pre-built pages to help you get + started faster. You can change the text and images and you're + good to go. Just make sure you enable them first via + JavaScript. +

+ + + Check Notus NextJS! + + +
+ +
+
+ ... +
+ + + +

+ Top Notch Services +

+

+ The Arctic Ocean freezes every winter and much of the + sea-ice then thaws every summer, and that process will + continue whatever happens. +

+
+
+
+
+
+
+ +
+
+ + + +
-
-
-
- ... -
-
-
-
- -
-

A growing company

-

- The extension comes with three pre-built pages to help you - get started faster. You can change the text and images and - you're good to go. -

-
    -
  • -
    -
    - +
    +
    +
    + ... +
    +
    +
    +
    + +
    +

    A growing company

    +

    + The extension comes with three pre-built pages to help you + get started faster. You can change the text and images and + you're good to go. +

    +
      +
    • +
      +
      + -
      -
      -

      - Carefully crafted components -

      -
      -
      -
    • -
    • -
      -
      - +
      +
      +

      + Carefully crafted components +

      +
      +
      +
    • +
    • +
      +
      + -
      -
      -

      - Amazing page examples -

      -
      -
      -
    • -
    • -
      -
      - +
      +
      +

      + Amazing page examples +

      +
      +
      +
    • +
    • +
      +
      + +
      +
      +

      + Dynamic components +

      +
      +
      +
    • +
    +
    +
    -
    -

    - Dynamic components -

    -
    -
    -
  • -
-
-
-
-
-
- -
-
-
-
-

Here are our heroes

-

- According to the National Oceanic and Atmospheric - Administration, Ted, Scambos, NSIDClead scentist, puts the - potentially record maximum. -

-
-
-
-
-
- ... -
-
Ryan Tompson
-

- Web Developer -

-
- - - -
-
-
-
-
-
- ... -
-
Romina Hadid
-

- Marketing Specialist -

-
- - -
-
-
-
-
-
- ... -
-
Alexa Smith
-

- UI/UX Designer -

-
- - - -
-
-
-
-
-
- ... -
-
Jenna Kardi
-

- Founder and CEO -

-
- - - -
-
-
-
-
-
-
- -
-
- - - -
+
-
-
-
-

- Build something -

-

- Put the potentially record low maximum sea ice extent tihs - year down to low ice. According to the National Oceanic and - Atmospheric Administration, Ted, Scambos. -

-
-
-
-
-
- -
-
- Excelent Services -
-

- Some quick example text to build on the card title and make up - the bulk of the card's content. -

-
-
-
- -
-
- Grow your market -
-

- Some quick example text to build on the card title and make up - the bulk of the card's content. -

-
-
-
- -
-
- Launch time -
-

- Some quick example text to build on the card title and make up - the bulk of the card's content. -

-
-
-
- -
-
-
-
-
-
-

- Want to work with us? -

-

- Complete this form and we will get back to you in 24 - hours. -

-
- - +
+
+
+
+

Here are our heroes

+

+ According to the National Oceanic and Atmospheric + Administration, Ted, Scambos, NSIDClead scentist, puts the + potentially record maximum. +

+
+
+
+
+
+ ... +
+
Ryan Tompson
+

+ Web Developer +

+
+ + + +
+
+
+
+
+
+ ... +
+
Romina Hadid
+

+ Marketing Specialist +

+
+ + +
+
+
+
+
+
+ ... +
+
Alexa Smith
+

+ UI/UX Designer +

+
+ + + +
+
+
+
+
+
+ ... +
+
Jenna Kardi
+

+ Founder and CEO +

+
+ + + + +
+
+
+
+
+
-
- - +
+
+ + +
-
- - + > +
+
+
+
-
- -
-
- - ); + + ); } diff --git a/components/Cards/CardSocialTraffic.js b/components/Cards/CardSocialTraffic.js index 06da437a..d3c6bb7c 100644 --- a/components/Cards/CardSocialTraffic.js +++ b/components/Cards/CardSocialTraffic.js @@ -3,150 +3,150 @@ import React from "react"; // components export default function CardSocialTraffic() { - return ( - <> -
-
-
-
-

- Social traffic -

-
-
- -
-
-
-
- {/* Projects table */} - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- Referral - - Visitors -
- Facebook - - 1,480 - -
- 60% -
-
-
-
-
-
-
- Facebook - - 5,480 - -
- 70% -
-
-
-
-
-
-
- Google - - 4,807 - -
- 80% -
-
-
-
+ return ( + <> +
+
+
+
+

+ Social traffic +

+
+
+ +
-
-
- Instagram - - 3,678 - -
- 75% -
-
-
-
-
-
-
- twitter - - 2,645 - -
- 30% -
-
-
-
-
-
-
-
-
- - ); +
+
+ {/* Projects table */} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Referral + + Visitors +
+ Facebook + + 1,480 + +
+ 60% +
+
+
+
+
+
+
+ Facebook + + 5,480 + +
+ 70% +
+
+
+
+
+
+
+ Google + + 4,807 + +
+ 80% +
+
+
+
+
+
+
+ Instagram + + 3,678 + +
+ 75% +
+
+
+
+
+
+
+ twitter + + 2,645 + +
+ 30% +
+
+
+
+
+
+
+
+
+ + ); } diff --git a/components/Cards/CardStats.js b/components/Cards/CardStats.js index 9d8574d9..6926c2eb 100644 --- a/components/Cards/CardStats.js +++ b/components/Cards/CardStats.js @@ -2,82 +2,82 @@ import React from "react"; import PropTypes from "prop-types"; export default function CardStats({ - statSubtitle, - statTitle, - statArrow, - statPercent, - statPercentColor, - statDescripiron, - statIconName, - statIconColor, -}) { - return ( - <> -
-
-
-
-
- {statSubtitle} -
- + statSubtitle, + statTitle, + statArrow, + statPercent, + statPercentColor, + statDescripiron, + statIconName, + statIconColor, + }) { + return ( + <> +
+
+
+
+
+ {statSubtitle} +
+ {statTitle} -
-
-
- -
-
-
-

+

+
+
+ +
+
+
+

{" "} - {statPercent}% + {statPercent}% - {statDescripiron} -

-
-
- - ); + {statDescripiron} +

+
+
+ + ); } CardStats.defaultProps = { - statSubtitle: "Traffic", - statTitle: "350,897", - statArrow: "up", - statPercent: "3.48", - statPercentColor: "text-emerald-500", - statDescripiron: "Since last month", - statIconName: "far fa-chart-bar", - statIconColor: "bg-red-500", + statSubtitle: "Traffic", + statTitle: "350,897", + statArrow: "up", + statPercent: "3.48", + statPercentColor: "text-emerald-500", + statDescripiron: "Since last month", + statIconName: "far fa-chart-bar", + statIconColor: "bg-red-500", }; CardStats.propTypes = { - statSubtitle: PropTypes.string, - statTitle: PropTypes.string, - statArrow: PropTypes.oneOf(["up", "down"]), - statPercent: PropTypes.string, - // can be any of the text color utilities - // from tailwindcss - statPercentColor: PropTypes.string, - statDescripiron: PropTypes.string, - statIconName: PropTypes.string, - // can be any of the background color utilities - // from tailwindcss - statIconColor: PropTypes.string, + statSubtitle: PropTypes.string, + statTitle: PropTypes.string, + statArrow: PropTypes.oneOf(["up", "down"]), + statPercent: PropTypes.string, + // can be any of the text color utilities + // from tailwindcss + statPercentColor: PropTypes.string, + statDescripiron: PropTypes.string, + statIconName: PropTypes.string, + // can be any of the background color utilities + // from tailwindcss + statIconColor: PropTypes.string, }; diff --git a/components/Cards/CardTable.js b/components/Cards/CardTable.js index ad854d24..17723059 100644 --- a/components/Cards/CardTable.js +++ b/components/Cards/CardTable.js @@ -5,425 +5,425 @@ import PropTypes from "prop-types"; import TableDropdown from "components/Dropdowns/TableDropdown.js"; -export default function CardTable({ color }) { - return ( - <> -
-
-
-
-

+
- Card Tables -

-
-
-
-
- {/* Projects table */} - - - - - - - - - - - - - - + + + + + + + +
- Project - - Budget - - Status - - Users - - Completion -
- ...{" "} - + > +
+
+
+

+ Card Tables +

+
+
+
+
+ {/* Projects table */} + + + + + + + + + + + + + + - - - - - - - - + + + + + + + + - - - - - - - - + + + + + + + + - - - - - - - - + + + + + + + + - - - - - - - - + + + + + + + + - - - - - - - -
+ Project + + Budget + + Status + + Users + + Completion +
+ ...{" "} + Argon Design System - - $2,500 USD - - pending - -
- ... - ... - ... - ... -
-
-
- 60% -
-
-
-
-
-
-
- -
- ...{" "} - + + $2,500 USD + + pending + +
+ ... + ... + ... + ... +
+
+
+ 60% +
+
+
+
+
+
+
+ +
+ ...{" "} + Angular Now UI Kit PRO - - $1,800 USD - - {" "} - completed - -
- ... - ... - ... - ... -
-
-
- 100% -
-
-
-
-
-
-
- -
- ...{" "} - + + $1,800 USD + + {" "} + completed + +
+ ... + ... + ... + ... +
+
+
+ 100% +
+
+
+
+
+
+
+ +
+ ...{" "} + Black Dashboard Sketch - - $3,150 USD - - delayed - -
- ... - ... - ... - ... -
-
-
- 73% -
-
-
-
-
-
-
- -
- ...{" "} - + + $3,150 USD + + delayed + +
+ ... + ... + ... + ... +
+
+
+ 73% +
+
+
+
+
+
+
+ +
+ ...{" "} + React Material Dashboard - - $4,400 USD - - on - schedule - -
- ... - ... - ... - ... -
-
-
- 90% -
-
-
-
-
-
-
- -
- ...{" "} - + + $4,400 USD + + on + schedule + +
+ ... + ... + ... + ... +
+
+
+ 90% +
+
+
+
+
+
+
+ +
+ ...{" "} + React Material Dashboard - - $2,200 USD - - {" "} - completed - -
- ... - ... - ... - ... -
-
-
- 100% -
-
-
-
-
-
-
- -
-
- - - ); +
+ $2,200 USD + + {" "} + completed + +
+ ... + ... + ... + ... +
+
+
+ 100% +
+
+
+
+
+
+
+ +
+
+
+ + ); } CardTable.defaultProps = { - color: "light", + color: "light", }; CardTable.propTypes = { - color: PropTypes.oneOf(["light", "dark"]), + color: PropTypes.oneOf(["light", "dark"]), }; diff --git a/components/Dropdowns/IndexDropdown.js b/components/Dropdowns/IndexDropdown.js index 87761c42..3f3accd0 100644 --- a/components/Dropdowns/IndexDropdown.js +++ b/components/Dropdowns/IndexDropdown.js @@ -1,147 +1,147 @@ import React from "react"; import Link from "next/link"; -import { createPopper } from "@popperjs/core"; +import {createPopper} from "@popperjs/core"; const IndexDropdown = () => { - // dropdown props - const [dropdownPopoverShow, setDropdownPopoverShow] = React.useState(false); - const btnDropdownRef = React.createRef(); - const popoverDropdownRef = React.createRef(); - const openDropdownPopover = () => { - createPopper(btnDropdownRef.current, popoverDropdownRef.current, { - placement: "bottom-start", - }); - setDropdownPopoverShow(true); - }; - const closeDropdownPopover = () => { - setDropdownPopoverShow(false); - }; - return ( - <> - { - e.preventDefault(); - dropdownPopoverShow ? closeDropdownPopover() : openDropdownPopover(); - }} - > - Demo Pages - -
+ // dropdown props + const [dropdownPopoverShow, setDropdownPopoverShow] = React.useState(false); + const btnDropdownRef = React.createRef(); + const popoverDropdownRef = React.createRef(); + const openDropdownPopover = () => { + createPopper(btnDropdownRef.current, popoverDropdownRef.current, { + placement: "bottom-start", + }); + setDropdownPopoverShow(true); + }; + const closeDropdownPopover = () => { + setDropdownPopoverShow(false); + }; + return ( + <> + { + e.preventDefault(); + dropdownPopoverShow ? closeDropdownPopover() : openDropdownPopover(); + }} + > + Demo Pages + +
- Admin Layout - - - - Dashboard - - - - - Settings - - - - - Tables - - - - - Maps - - -
- + Admin Layout + + + + Dashboard + + + + + Settings + + + + + Tables + + + + + Maps + + +
+ Auth Layout - - - Login - - - - - Register - - -
- + + + Login + + + + + Register + + +
+ No Layout - - - Landing - - - - - Profile - - -
- - ); + + + Landing + + + + + Profile + + +
+ + ); }; export default IndexDropdown; diff --git a/components/Dropdowns/NotificationDropdown.js b/components/Dropdowns/NotificationDropdown.js index aef6d7d2..55540952 100644 --- a/components/Dropdowns/NotificationDropdown.js +++ b/components/Dropdowns/NotificationDropdown.js @@ -1,80 +1,80 @@ import React from "react"; -import { createPopper } from "@popperjs/core"; +import {createPopper} from "@popperjs/core"; const NotificationDropdown = () => { - // dropdown props - const [dropdownPopoverShow, setDropdownPopoverShow] = React.useState(false); - const btnDropdownRef = React.createRef(); - const popoverDropdownRef = React.createRef(); - const openDropdownPopover = () => { - createPopper(btnDropdownRef.current, popoverDropdownRef.current, { - placement: "bottom-start", - }); - setDropdownPopoverShow(true); - }; - const closeDropdownPopover = () => { - setDropdownPopoverShow(false); - }; - return ( - <> - { - e.preventDefault(); - dropdownPopoverShow ? closeDropdownPopover() : openDropdownPopover(); - }} - > - - -
- e.preventDefault()} - > - Action - - e.preventDefault()} - > - Another action - - e.preventDefault()} - > - Something else here - - - - ); + // dropdown props + const [dropdownPopoverShow, setDropdownPopoverShow] = React.useState(false); + const btnDropdownRef = React.createRef(); + const popoverDropdownRef = React.createRef(); + const openDropdownPopover = () => { + createPopper(btnDropdownRef.current, popoverDropdownRef.current, { + placement: "bottom-start", + }); + setDropdownPopoverShow(true); + }; + const closeDropdownPopover = () => { + setDropdownPopoverShow(false); + }; + return ( + <> + { + e.preventDefault(); + dropdownPopoverShow ? closeDropdownPopover() : openDropdownPopover(); + }} + > + + +
+ e.preventDefault()} + > + Action + + e.preventDefault()} + > + Another action + + e.preventDefault()} + > + Something else here + + + + ); }; export default NotificationDropdown; diff --git a/components/Dropdowns/PagesDropdown.js b/components/Dropdowns/PagesDropdown.js index cabb6b72..02c2f75f 100644 --- a/components/Dropdowns/PagesDropdown.js +++ b/components/Dropdowns/PagesDropdown.js @@ -1,147 +1,147 @@ import React from "react"; import Link from "next/link"; -import { createPopper } from "@popperjs/core"; +import {createPopper} from "@popperjs/core"; const PagesDropdown = () => { - // dropdown props - const [dropdownPopoverShow, setDropdownPopoverShow] = React.useState(false); - const btnDropdownRef = React.createRef(); - const popoverDropdownRef = React.createRef(); - const openDropdownPopover = () => { - createPopper(btnDropdownRef.current, popoverDropdownRef.current, { - placement: "bottom-start", - }); - setDropdownPopoverShow(true); - }; - const closeDropdownPopover = () => { - setDropdownPopoverShow(false); - }; - return ( - <> - { - e.preventDefault(); - dropdownPopoverShow ? closeDropdownPopover() : openDropdownPopover(); - }} - > - Demo Pages - -
+ // dropdown props + const [dropdownPopoverShow, setDropdownPopoverShow] = React.useState(false); + const btnDropdownRef = React.createRef(); + const popoverDropdownRef = React.createRef(); + const openDropdownPopover = () => { + createPopper(btnDropdownRef.current, popoverDropdownRef.current, { + placement: "bottom-start", + }); + setDropdownPopoverShow(true); + }; + const closeDropdownPopover = () => { + setDropdownPopoverShow(false); + }; + return ( + <> + { + e.preventDefault(); + dropdownPopoverShow ? closeDropdownPopover() : openDropdownPopover(); + }} + > + Demo Pages + +
- Admin Layout - - - - Dashboard - - - - - Settings - - - - - Tables - - - - - Maps - - -
- + Admin Layout + + + + Dashboard + + + + + Settings + + + + + Tables + + + + + Maps + + +
+ Auth Layout - - - Login - - - - - Register - - -
- + + + Login + + + + + Register + + +
+ No Layout - - - Landing - - - - - Profile - - -
- - ); + + + Landing + + + + + Profile + + +
+ + ); }; export default PagesDropdown; diff --git a/components/Dropdowns/TableDropdown.js b/components/Dropdowns/TableDropdown.js index bf754c1d..c7d1fb97 100644 --- a/components/Dropdowns/TableDropdown.js +++ b/components/Dropdowns/TableDropdown.js @@ -1,70 +1,70 @@ import React from "react"; -import { createPopper } from "@popperjs/core"; +import {createPopper} from "@popperjs/core"; const NotificationDropdown = () => { - // dropdown props - const [dropdownPopoverShow, setDropdownPopoverShow] = React.useState(false); - const btnDropdownRef = React.createRef(); - const popoverDropdownRef = React.createRef(); - const openDropdownPopover = () => { - createPopper(btnDropdownRef.current, popoverDropdownRef.current, { - placement: "left-start", - }); - setDropdownPopoverShow(true); - }; - const closeDropdownPopover = () => { - setDropdownPopoverShow(false); - }; - return ( - <> - { - e.preventDefault(); - dropdownPopoverShow ? closeDropdownPopover() : openDropdownPopover(); - }} - > - - - - - ); + // dropdown props + const [dropdownPopoverShow, setDropdownPopoverShow] = React.useState(false); + const btnDropdownRef = React.createRef(); + const popoverDropdownRef = React.createRef(); + const openDropdownPopover = () => { + createPopper(btnDropdownRef.current, popoverDropdownRef.current, { + placement: "left-start", + }); + setDropdownPopoverShow(true); + }; + const closeDropdownPopover = () => { + setDropdownPopoverShow(false); + }; + return ( + <> + { + e.preventDefault(); + dropdownPopoverShow ? closeDropdownPopover() : openDropdownPopover(); + }} + > + + + + + ); }; export default NotificationDropdown; diff --git a/components/Dropdowns/UserDropdown.js b/components/Dropdowns/UserDropdown.js index 22271c77..c08390ca 100644 --- a/components/Dropdowns/UserDropdown.js +++ b/components/Dropdowns/UserDropdown.js @@ -1,88 +1,89 @@ import React from "react"; -import { createPopper } from "@popperjs/core"; +import {createPopper} from "@popperjs/core"; const UserDropdown = () => { - // dropdown props - const [dropdownPopoverShow, setDropdownPopoverShow] = React.useState(false); - const btnDropdownRef = React.createRef(); - const popoverDropdownRef = React.createRef(); - const openDropdownPopover = () => { - createPopper(btnDropdownRef.current, popoverDropdownRef.current, { - placement: "bottom-start", - }); - setDropdownPopoverShow(true); - }; - const closeDropdownPopover = () => { - setDropdownPopoverShow(false); - }; - return ( - <> - { - e.preventDefault(); - dropdownPopoverShow ? closeDropdownPopover() : openDropdownPopover(); - }} - > -
- + // dropdown props + const [dropdownPopoverShow, setDropdownPopoverShow] = React.useState(false); + const btnDropdownRef = React.createRef(); + const popoverDropdownRef = React.createRef(); + const openDropdownPopover = () => { + createPopper(btnDropdownRef.current, popoverDropdownRef.current, { + placement: "bottom-start", + }); + setDropdownPopoverShow(true); + }; + const closeDropdownPopover = () => { + setDropdownPopoverShow(false); + }; + return ( + <> + { + e.preventDefault(); + dropdownPopoverShow ? closeDropdownPopover() : openDropdownPopover(); + }} + > +
+ ... -
-
- + +
+ e.preventDefault()} + > + Action + + e.preventDefault()} + > + Another action + + e.preventDefault()} + > + Something else here + + + + ); }; export default UserDropdown; diff --git a/components/Footers/Footer.js b/components/Footers/Footer.js index 47f3c290..ba649689 100644 --- a/components/Footers/Footer.js +++ b/components/Footers/Footer.js @@ -1,162 +1,162 @@ import React from "react"; export default function Footer() { - return ( - <> - - - ); + + + ); } diff --git a/components/Footers/FooterAdmin.js b/components/Footers/FooterAdmin.js index 6dd83a22..e84249a5 100644 --- a/components/Footers/FooterAdmin.js +++ b/components/Footers/FooterAdmin.js @@ -1,62 +1,62 @@ import React from "react"; export default function FooterAdmin() { - return ( - <> - - - ); + return ( + <> + + + ); } diff --git a/components/Footers/FooterSmall.js b/components/Footers/FooterSmall.js index f24c2db6..b8819645 100644 --- a/components/Footers/FooterSmall.js +++ b/components/Footers/FooterSmall.js @@ -1,68 +1,68 @@ import React from "react"; export default function FooterSmall(props) { - return ( - <> - - - ); + return ( + <> + + + ); } diff --git a/components/Headers/HeaderStats.js b/components/Headers/HeaderStats.js index 8eb71897..99dfb74b 100644 --- a/components/Headers/HeaderStats.js +++ b/components/Headers/HeaderStats.js @@ -5,66 +5,66 @@ import React from "react"; import CardStats from "components/Cards/CardStats.js"; export default function HeaderStats() { - return ( - <> - {/* Header */} -
-
-
- {/* Card stats */} -
-
- -
-
- -
-
- -
-
- -
+ return ( + <> + {/* Header */} +
+
+
+ {/* Card stats */} +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
-
-
-
- - ); + + ); } diff --git a/components/Maps/MapExample.js b/components/Maps/MapExample.js index 2e3eb367..32acb916 100644 --- a/components/Maps/MapExample.js +++ b/components/Maps/MapExample.js @@ -1,90 +1,90 @@ import React from "react"; function MapExample() { - const mapRef = React.useRef(null); - React.useEffect(() => { - let google = window.google; - let map = mapRef.current; - let lat = "40.748817"; - let lng = "-73.985428"; - const myLatlng = new google.maps.LatLng(lat, lng); - const mapOptions = { - zoom: 12, - center: myLatlng, - scrollwheel: false, - zoomControl: true, - styles: [ - { - featureType: "administrative", - elementType: "labels.text.fill", - stylers: [{ color: "#444444" }], - }, - { - featureType: "landscape", - elementType: "all", - stylers: [{ color: "#f2f2f2" }], - }, - { - featureType: "poi", - elementType: "all", - stylers: [{ visibility: "off" }], - }, - { - featureType: "road", - elementType: "all", - stylers: [{ saturation: -100 }, { lightness: 45 }], - }, - { - featureType: "road.highway", - elementType: "all", - stylers: [{ visibility: "simplified" }], - }, - { - featureType: "road.arterial", - elementType: "labels.icon", - stylers: [{ visibility: "off" }], - }, - { - featureType: "transit", - elementType: "all", - stylers: [{ visibility: "off" }], - }, - { - featureType: "water", - elementType: "all", - stylers: [{ color: "#cbd5e0" }, { visibility: "on" }], - }, - ], - }; + const mapRef = React.useRef(null); + React.useEffect(() => { + let google = window.google; + let map = mapRef.current; + let lat = "40.748817"; + let lng = "-73.985428"; + const myLatlng = new google.maps.LatLng(lat, lng); + const mapOptions = { + zoom: 12, + center: myLatlng, + scrollwheel: false, + zoomControl: true, + styles: [ + { + featureType: "administrative", + elementType: "labels.text.fill", + stylers: [{color: "#444444"}], + }, + { + featureType: "landscape", + elementType: "all", + stylers: [{color: "#f2f2f2"}], + }, + { + featureType: "poi", + elementType: "all", + stylers: [{visibility: "off"}], + }, + { + featureType: "road", + elementType: "all", + stylers: [{saturation: -100}, {lightness: 45}], + }, + { + featureType: "road.highway", + elementType: "all", + stylers: [{visibility: "simplified"}], + }, + { + featureType: "road.arterial", + elementType: "labels.icon", + stylers: [{visibility: "off"}], + }, + { + featureType: "transit", + elementType: "all", + stylers: [{visibility: "off"}], + }, + { + featureType: "water", + elementType: "all", + stylers: [{color: "#cbd5e0"}, {visibility: "on"}], + }, + ], + }; - map = new google.maps.Map(map, mapOptions); + map = new google.maps.Map(map, mapOptions); - const marker = new google.maps.Marker({ - position: myLatlng, - map: map, - animation: google.maps.Animation.DROP, - title: "Notus NextJS!", - }); + const marker = new google.maps.Marker({ + position: myLatlng, + map: map, + animation: google.maps.Animation.DROP, + title: "Notus NextJS!", + }); - const contentString = - '

Notus NextJS

' + - "

A free Admin for Tailwind CSS, React, React Hooks, and NextJS.

"; + const contentString = + '

Notus NextJS

' + + "

A free Admin for Tailwind CSS, React, React Hooks, and NextJS.

"; - const infowindow = new google.maps.InfoWindow({ - content: contentString, - }); + const infowindow = new google.maps.InfoWindow({ + content: contentString, + }); - google.maps.event.addListener(marker, "click", function () { - infowindow.open(map, marker); + google.maps.event.addListener(marker, "click", function () { + infowindow.open(map, marker); + }); }); - }); - return ( - <> -
-
-
- - ); + return ( + <> +
+
+
+ + ); } export default MapExample; diff --git a/components/Navbars/AdminNavbar.js b/components/Navbars/AdminNavbar.js index 07925873..f4ace80e 100644 --- a/components/Navbars/AdminNavbar.js +++ b/components/Navbars/AdminNavbar.js @@ -3,39 +3,42 @@ import React from "react"; import UserDropdown from "components/Dropdowns/UserDropdown.js"; export default function Navbar() { - return ( - <> - {/* Navbar */} - + {/* End Navbar */} + + ); } diff --git a/components/Navbars/AuthNavbar.js b/components/Navbars/AuthNavbar.js index c267b593..eeea17af 100644 --- a/components/Navbars/AuthNavbar.js +++ b/components/Navbars/AuthNavbar.js @@ -5,95 +5,96 @@ import Link from "next/link"; import PagesDropdown from "components/Dropdowns/PagesDropdown.js"; export default function Navbar(props) { - const [navbarOpen, setNavbarOpen] = React.useState(false); - return ( - <> - + + ); } diff --git a/components/Navbars/IndexNavbar.js b/components/Navbars/IndexNavbar.js index f2e2c590..d2959064 100644 --- a/components/Navbars/IndexNavbar.js +++ b/components/Navbars/IndexNavbar.js @@ -5,95 +5,96 @@ import Link from "next/link"; import IndexDropdown from "components/Dropdowns/IndexDropdown.js"; export default function Navbar(props) { - const [navbarOpen, setNavbarOpen] = React.useState(false); - return ( - <> - + + ); } diff --git a/components/PageChange/PageChange.js b/components/PageChange/PageChange.js index 652d84df..5af0f646 100644 --- a/components/PageChange/PageChange.js +++ b/components/PageChange/PageChange.js @@ -6,23 +6,23 @@ import React from "react"; // core components export default function PageChange(props) { - return ( -
-
-
-
-
- + return ( +
+
+
+
+
+ +
+

+ Loading page contents for: {props.path} +

+
-

- Loading page contents for: {props.path} -

-
-
- ); + ); } diff --git a/components/Sidebar/Sidebar.js b/components/Sidebar/Sidebar.js index 962c2225..bfe08b3d 100644 --- a/components/Sidebar/Sidebar.js +++ b/components/Sidebar/Sidebar.js @@ -1,358 +1,361 @@ import React from "react"; import Link from "next/link"; -import { useRouter } from "next/router"; +import {useRouter} from "next/router"; import NotificationDropdown from "components/Dropdowns/NotificationDropdown.js"; import UserDropdown from "components/Dropdowns/UserDropdown.js"; export default function Sidebar() { - const [collapseShow, setCollapseShow] = React.useState("hidden"); - const router = useRouter(); - return ( - <> - - - ); +
  • + + + VueJS + +
  • + +
    +
    + + + ); } diff --git a/layouts/Admin.js b/layouts/Admin.js index fe189c89..4a6b029a 100644 --- a/layouts/Admin.js +++ b/layouts/Admin.js @@ -7,19 +7,19 @@ import Sidebar from "components/Sidebar/Sidebar.js"; import HeaderStats from "components/Headers/HeaderStats.js"; import FooterAdmin from "components/Footers/FooterAdmin.js"; -export default function Admin({ children }) { - return ( - <> - -
    - - {/* Header */} - -
    - {children} - -
    -
    - - ); +export default function Admin({children}) { + return ( + <> + +
    + + {/* Header */} + +
    + {children} + +
    +
    + + ); } diff --git a/layouts/Auth.js b/layouts/Auth.js index d5bd60b5..15077cc2 100644 --- a/layouts/Auth.js +++ b/layouts/Auth.js @@ -5,22 +5,22 @@ import React from "react"; import Navbar from "components/Navbars/AuthNavbar.js"; import FooterSmall from "components/Footers/FooterSmall.js"; -export default function Auth({ children }) { - return ( - <> - -
    -
    -
    - {children} - -
    -
    - - ); +export default function Auth({children}) { + return ( + <> + +
    +
    +
    + {children} + +
    +
    + + ); } diff --git a/pages/404.js b/pages/404.js index 27fd58c8..345e220a 100644 --- a/pages/404.js +++ b/pages/404.js @@ -1,12 +1,12 @@ -import React, { Component } from "react"; +import React, {Component} from "react"; import Router from "next/router"; export default class Error404 extends Component { - componentDidMount = () => { - Router.push("/"); - }; + componentDidMount = () => { + Router.push("/"); + }; - render() { - return
    ; - } + render() { + return
    ; + } } diff --git a/pages/_app.js b/pages/_app.js index 61af7f60..ab442429 100644 --- a/pages/_app.js +++ b/pages/_app.js @@ -10,25 +10,25 @@ import "@fortawesome/fontawesome-free/css/all.min.css"; import "styles/tailwind.css"; Router.events.on("routeChangeStart", (url) => { - console.log(`Loading: ${url}`); - document.body.classList.add("body-page-transition"); - ReactDOM.render( - , - document.getElementById("page-transition") - ); + console.log(`Loading: ${url}`); + document.body.classList.add("body-page-transition"); + ReactDOM.render( + , + document.getElementById("page-transition") + ); }); Router.events.on("routeChangeComplete", () => { - ReactDOM.unmountComponentAtNode(document.getElementById("page-transition")); - document.body.classList.remove("body-page-transition"); + ReactDOM.unmountComponentAtNode(document.getElementById("page-transition")); + document.body.classList.remove("body-page-transition"); }); Router.events.on("routeChangeError", () => { - ReactDOM.unmountComponentAtNode(document.getElementById("page-transition")); - document.body.classList.remove("body-page-transition"); + ReactDOM.unmountComponentAtNode(document.getElementById("page-transition")); + document.body.classList.remove("body-page-transition"); }); export default class MyApp extends App { - componentDidMount() { - let comment = document.createComment(` + componentDidMount() { + let comment = document.createComment(` ========================================================= * Notus NextJS - v1.1.0 based on Tailwind Starter Kit by Creative Tim @@ -47,36 +47,38 @@ export default class MyApp extends App { * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. `); - document.insertBefore(comment, document.documentElement); - } - static async getInitialProps({ Component, router, ctx }) { - let pageProps = {}; + document.insertBefore(comment, document.documentElement); + } + + static async getInitialProps({Component, router, ctx}) { + let pageProps = {}; + + if (Component.getInitialProps) { + pageProps = await Component.getInitialProps(ctx); + } - if (Component.getInitialProps) { - pageProps = await Component.getInitialProps(ctx); + return {pageProps}; } - return { pageProps }; - } - render() { - const { Component, pageProps } = this.props; - - const Layout = Component.layout || (({ children }) => <>{children}); - - return ( - - - - Notus NextJS by Creative Tim - - - - - - - ); - } + render() { + const {Component, pageProps} = this.props; + + const Layout = Component.layout || (({children}) => <>{children}); + + return ( + + + + Notus NextJS by Creative Tim + + + + + + + ); + } } diff --git a/pages/_document.js b/pages/_document.js index df812f3e..266322da 100644 --- a/pages/_document.js +++ b/pages/_document.js @@ -1,28 +1,28 @@ import React from "react"; -import Document, { Html, Head, Main, NextScript } from "next/document"; +import Document, {Html, Head, Main, NextScript} from "next/document"; class MyDocument extends Document { - render() { - return ( - - - - - - - - -
    -
    - - - - ); - } + render() { + return ( + + + + + + + + +
    +
    + + + + ); + } } export default MyDocument; diff --git a/pages/_error.js b/pages/_error.js index 994b12db..1074f1df 100644 --- a/pages/_error.js +++ b/pages/_error.js @@ -1,12 +1,12 @@ -import React, { Component } from "react"; +import React, {Component} from "react"; import Router from "next/router"; export default class _error extends Component { - componentDidMount = () => { - Router.push("/"); - }; + componentDidMount = () => { + Router.push("/"); + }; - render() { - return
    ; - } + render() { + return
    ; + } } diff --git a/pages/admin/dashboard.js b/pages/admin/dashboard.js index 896408f6..7585d06b 100644 --- a/pages/admin/dashboard.js +++ b/pages/admin/dashboard.js @@ -12,26 +12,26 @@ import CardSocialTraffic from "components/Cards/CardSocialTraffic.js"; import Admin from "layouts/Admin.js"; export default function Dashboard() { - return ( - <> -
    -
    - -
    -
    - -
    -
    -
    -
    - -
    -
    - -
    -
    - - ); + return ( + <> +
    +
    + +
    +
    + +
    +
    +
    +
    + +
    +
    + +
    +
    + + ); } Dashboard.layout = Admin; diff --git a/pages/admin/maps.js b/pages/admin/maps.js index aff5772d..e65abded 100644 --- a/pages/admin/maps.js +++ b/pages/admin/maps.js @@ -9,17 +9,17 @@ import MapExample from "components/Maps/MapExample.js"; import Admin from "layouts/Admin.js"; export default function Maps() { - return ( - <> -
    -
    -
    - -
    -
    -
    - - ); + return ( + <> +
    +
    +
    + +
    +
    +
    + + ); } Maps.layout = Admin; diff --git a/pages/admin/settings.js b/pages/admin/settings.js index b4f110b5..5ffaf6d6 100644 --- a/pages/admin/settings.js +++ b/pages/admin/settings.js @@ -10,18 +10,18 @@ import CardProfile from "components/Cards/CardProfile.js"; import Admin from "layouts/Admin.js"; export default function Settings() { - return ( - <> -
    -
    - -
    -
    - -
    -
    - - ); + return ( + <> +
    +
    + +
    +
    + +
    +
    + + ); } Settings.layout = Admin; diff --git a/pages/admin/tables.js b/pages/admin/tables.js index 86e89406..95917e87 100644 --- a/pages/admin/tables.js +++ b/pages/admin/tables.js @@ -9,18 +9,18 @@ import CardTable from "components/Cards/CardTable.js"; import Admin from "layouts/Admin.js"; export default function Tables() { - return ( - <> -
    -
    - -
    -
    - -
    -
    - - ); + return ( + <> +
    +
    + +
    +
    + +
    +
    + + ); } Tables.layout = Admin; diff --git a/pages/auth/login.js b/pages/auth/login.js index 911e5897..ffb0f77d 100644 --- a/pages/auth/login.js +++ b/pages/auth/login.js @@ -6,115 +6,116 @@ import Link from "next/link"; import Auth from "layouts/Auth.js"; export default function Login() { - return ( - <> -
    -
    -
    -
    -
    -
    -
    - Sign in with -
    -
    -
    - - -
    -
    -
    -
    -
    - Or sign in with credentials -
    -
    -
    - - -
    + return ( + <> +
    +
    +
    +
    +
    +
    +
    + Sign in with +
    +
    +
    + + +
    +
    +
    +
    +
    + Or sign in with credentials +
    + +
    + + +
    -
    - - -
    -
    - +
    -
    - -
    - -
    -
    - +
    + +
    +
    -
    -
    -
    - - ); + + ); } Login.layout = Auth; diff --git a/pages/auth/register.js b/pages/auth/register.js index ed4229ae..566120ad 100644 --- a/pages/auth/register.js +++ b/pages/auth/register.js @@ -5,119 +5,120 @@ import React from "react"; import Auth from "layouts/Auth.js"; export default function Register() { - return ( - <> -
    -
    -
    -
    -
    -
    -
    - Sign up with -
    -
    -
    - - -
    -
    -
    -
    -
    - Or sign up with credentials -
    -
    -
    - - -
    + return ( + <> +
    +
    +
    +
    +
    +
    +
    + Sign up with +
    +
    +
    + + +
    +
    +
    +
    +
    + Or sign up with credentials +
    + +
    + + +
    -
    - - -
    +
    + + +
    -
    - - -
    +
    + + +
    -
    - +
    -
    - -
    - -
    +
    + +
    + +
    +
    +
    +
    -
    -
    -
    - - ); + + ); } Register.layout = Auth; diff --git a/pages/index.js b/pages/index.js index e18f8059..0bf402a6 100644 --- a/pages/index.js +++ b/pages/index.js @@ -6,662 +6,694 @@ import IndexNavbar from "components/Navbars/IndexNavbar.js"; import Footer from "components/Footers/Footer.js"; export default function Index() { - return ( - <> - -
    -
    -
    -
    -

    - Notus NextJS - A beautiful extension for Tailwind CSS. -

    -

    - Notus NextJS is Free and Open Source. It does not change any of - the CSS from{" "} - - Tailwind CSS - - . It features multiple HTML elements and it comes with dynamic - components for ReactJS, Vue and Angular. -

    - -
    -
    -
    - ... -
    - -
    -
    - - - -
    -
    -
    -
    -
    + return ( + <> + +
    +
    +
    +
    +

    + Notus NextJS - A beautiful extension for Tailwind CSS. +

    +

    + Notus NextJS is Free and Open Source. It does not change any of + the CSS from{" "} + + Tailwind CSS + + . It features multiple HTML elements and it comes with dynamic + components for ReactJS, Vue and Angular. +

    + +
    +
    +
    ... -
    - - - -

    - Great for your awesome project -

    -

    - Putting together a page has never been easier than matching - together pre-made components. From landing pages - presentation to login areas, you can easily customise and - built your pages. -

    -
    -
    -
    +
    -
    -
    -
    -
    -
    -
    - -
    -
    - CSS Components -
    -

    - Notus NextJS comes with a huge number of Fully Coded CSS - components. -

    -
    -
    -
    -
    -
    - -
    -
    - JavaScript Components -
    -

    - We also feature many dynamic components for React, - NextJS, Vue and Angular. -

    -
    -
    +
    +
    + + +
    -
    -
    -
    -
    - -
    -
    Pages
    -

    - This extension also comes with 3 sample pages. They are - fully coded so you can start working instantly. -

    -
    -
    -
    -
    -
    - -
    -
    - Documentation -
    -

    - Built by developers for developers. You will love how - easy is to to work with Notus NextJS. -

    +
    +
    +
    +
    + ... +
    + + + +

    + Great for your awesome project +

    +

    + Putting together a page has never been easier than matching + together pre-made components. From landing pages + presentation to login areas, you can easily customise and + built your pages. +

    +
    +
    +
    + +
    +
    +
    +
    +
    +
    + +
    +
    + CSS Components +
    +

    + Notus NextJS comes with a huge number of Fully Coded CSS + components. +

    +
    +
    +
    +
    +
    + +
    +
    + JavaScript Components +
    +

    + We also feature many dynamic components for React, + NextJS, Vue and Angular. +

    +
    +
    +
    +
    +
    +
    +
    + +
    +
    Pages
    +

    + This extension also comes with 3 sample pages. They are + fully coded so you can start working instantly. +

    +
    +
    +
    +
    +
    + +
    +
    + Documentation +
    +

    + Built by developers for developers. You will love how + easy is to to work with Notus NextJS. +

    +
    +
    +
    +
    +
    -
    -
    -
    -
    -
    -
    -
    -
    -
    - -
    -

    - CSS Components -

    -

    - Every element that you need in a product comes built in as a - component. All components fit perfectly with each other and can - have different colours. -

    -
    - +
    +
    +
    +
    + +
    +

    + CSS Components +

    +

    + Every element that you need in a product comes built in as a + component. All components fit perfectly with each other and can + have different colours. +

    +
    + Buttons - + Inputs - + Labels - + Menus - + Navbars - + Pagination - + Progressbars - + Typography -
    - - View All{" "} - - -
    - -
    -
    - ... - ... - ... - ... - ... - ... -
    -
    -
    +
    + + View All{" "} + + +
    -
    - -
    -
    - -
    -

    - Javascript Components -

    -

    - In order to create a great User Experience some components - require JavaScript. In this way you can manipulate the elements - on the page and give more options to your users. -

    -

    - We created a set of Components that are dynamic and come to help - you. -

    -
    - +
    + + +
    +
    + +
    +

    + Javascript Components +

    +

    + In order to create a great User Experience some components + require JavaScript. In this way you can manipulate the elements + on the page and give more options to your users. +

    +

    + We created a set of Components that are dynamic and come to help + you. +

    +
    + Alerts - + Dropdowns - + Menus - + Modals - + Navbars - + Popovers - + Tabs - + Tooltips -
    - - View all{" "} - - -
    -
    -
    - -
    -
    -
    - +
    -

    - Complex Documentation -

    -

    - This extension comes a lot of fully coded examples that help - you get started faster. You can adjust the colors and also the - programming language. You can change the text and images and - you're good to go. -

    -
      -
    • -
      -
      - + +
      +
      +
      +
      +
      + +
      +

      + Complex Documentation +

      +

      + This extension comes a lot of fully coded examples that help + you get started faster. You can adjust the colors and also the + programming language. You can change the text and images and + you're good to go. +

      +
        +
      • +
        +
        + -
        -
        -

        - Built by Developers for Developers -

        -
        -
        -
      • -
      • -
        -
        - +
        +
        +

        + Built by Developers for Developers +

        +
        +
        +
      • +
      • +
        +
        + -
        -
        -

        - Carefully crafted code for Components -

        -
        -
        -
      • -
      • -
        -
        - +
        +
        +

        + Carefully crafted code for Components +

        +
        +
        +
      • +
      • +
        +
        + -
        -
        -

        - Dynamic Javascript Components -

        -
        -
        -
      • -
      -
      -
      - -
      - ... -
      -
      -
      +
      +
      +

      + Dynamic Javascript Components +

      +
      +
      +
    • +
    +
    +
    -
    -
    -

    Beautiful Example Pages

    -

    - Notus NextJS is a completly new product built using our past - experience in web templates. Take the examples we made for you and - start playing with them. -

    -
    -
    - - -
    -
    -
    -
    -
    -
    -
    - Login Page -
    - -
    - ... +
    + ... +
    -
    -
    -
    - Profile Page -
    - -
    - ... +
    +
    +

    Beautiful Example Pages

    +

    + Notus NextJS is a completly new product built using our past + experience in web templates. Take the examples we made for you and + start playing with them. +

    -
    +
    + +
    +
    +
    +
    +
    +
    +
    + Login Page +
    + +
    + ... +
    + +
    + +
    +
    + Profile Page +
    + +
    + ... +
    + +
    -
    -
    - Landing Page -
    - -
    - ... +
    +
    + Landing Page +
    + +
    + ... +
    + +
    +
    +
    -
    -
    -
    -
    -
    - + -
    -
    -
    -
    -
    - -
    -

    - Open Source -

    -

    - Since{" "} - - Tailwind CSS - {" "} - is an open source project we wanted to continue this movement - too. You can give this version a try to feel the design and also - test the quality of the code! -

    -

    - Get it free on Github and please help us spread the news with a - Star! -

    - - Github Star - -
    +
    +
    +
    +
    +
    + +
    +

    + Open Source +

    +

    + Since{" "} + + Tailwind CSS + {" "} + is an open source project we wanted to continue this movement + too. You can give this version a try to feel the design and also + test the quality of the code! +

    +

    + Get it free on Github and please help us spread the news with a + Star! +

    + + Github Star + +
    -
    - -
    -
    -
    -
    +
    + +
    +
    +
    +
    -
    -
    - - - -
    +
    +
    + + + +
    -
    -
    -
    -

    +

    +
    +
    +

    😍 -

    -

    - Do you love this Starter Kit? -

    -

    - Cause if you do, it can be yours now. Hit the buttons below to - navigate to get the Free version for your next project. Build a - new web app or give an old project a new look! -

    - -
    -
    -
    -
    -
    -
    - - ); +

    +

    + Do you love this Starter Kit? +

    +

    + Cause if you do, it can be yours now. Hit the buttons below to + navigate to get the Free version for your next project. Build a + new web app or give an old project a new look! +

    + +
    +
    +
    +
    + +