New theme and first connection with dgraph

.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true

components/Footer.tsx

@@ -1,4 +1,6 @@
 const Footer: React.FC = () => {
+  const getYear = () => new Date().getFullYear();
+
   return <footer className="mt-auto"></footer>;
 };
 

components/Input.tsx

@@ -0,0 +1,41 @@
+import { classNames } from "../utils";
+
+export interface InputProps {
+  name: string;
+  touched: { [key: string]: boolean };
+  errors: { [key: string]: string };
+  type: "text" | "number" | "date";
+  label?: string;
+}
+
+const Input: React.FC<InputProps> = (props) => {
+  const hasError = (): boolean => {
+    if (props.touched && props.touched[props.name] === true) {
+      if (props.errors && props.errors[props.name]) {
+        return true;
+      }
+    }
+    return false;
+  };
+
+  return (
+    <div className={classNames("form-group")}>
+      {props.label && (
+        <label className="form-label" htmlFor={`input-${props.name}`}>
+          {props.label}
+        </label>
+      )}
+      <input
+        className={classNames("form-control", hasError() ? "is-invalid" : "")}
+        {...props}
+        id={`input-${props.name}`}
+        type={props.type}
+      />
+      {hasError() && (
+        <div className="invalid-feedback">{props.errors[props.name]}</div>
+      )}
+    </div>
+  );
+};
+
+export default Input;

components/Navbar.tsx

@@ -1,171 +1,82 @@
-import { Fragment } from "react";
+/* eslint-disable @next/next/no-html-link-for-pages */
+import { forwardRef } from "react";
+import { useRouter } from "next/router";
 import Link from "next/link";
 import { useUser } from "@auth0/nextjs-auth0";
-import { Disclosure, Menu, Transition } from "@headlessui/react";
-import { BellIcon, MenuIcon, XIcon } from "@heroicons/react/outline";
+import { Navbar as StrapNavbar, Nav, Dropdown } from "react-bootstrap";
+import NavbarSearch from "./NavbarSearch";
 import { classNames } from "../utils";
 
-const navigation = [{ name: "Dashboard", href: "/dashboard", current: true }];
-
 const Navbar: React.FC = () => {
-  const { user, error, isLoading } = useUser();
-  console.log("user", user);
-
-  if (user) {
-    return (
-      <Disclosure as="nav" className="bg-gray-800">
-        {({ open }) => (
-          <>
-            <div className="max-w-7xl mx-auto px-2 sm:px-6 lg:px-8">
-              <div className="relative flex items-center justify-between h-16">
-                <div className="absolute inset-y-0 left-0 flex items-center sm:hidden">
-                  {/* Mobile menu button*/}
-                  <Disclosure.Button className="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white">
-                    <span className="sr-only">Open main menu</span>
-                    {open ? (
-                      <XIcon className="block h-6 w-6" aria-hidden="true" />
-                    ) : (
-                      <MenuIcon className="block h-6 w-6" aria-hidden="true" />
-                    )}
-                  </Disclosure.Button>
-                </div>
-                <div className="flex-1 flex items-center justify-center sm:items-stretch sm:justify-start">
-                  <div className="flex-shrink-0 flex items-center">
-                    <img
-                      className="block lg:hidden h-8 w-auto"
-                      src="https://tailwindui.com/img/logos/workflow-mark-indigo-500.svg"
-                      alt="Workflow"
-                    />
-                    <img
-                      className="hidden lg:block h-8 w-auto"
-                      src="https://tailwindui.com/img/logos/workflow-logo-indigo-500-mark-white-text.svg"
-                      alt="Workflow"
-                    />
-                  </div>
-                  <div className="hidden sm:block sm:ml-6">
-                    <div className="flex space-x-4">
-                      {navigation.map((item) => (
-                        <Link key={item.name} href={item.href}>
-                          <a
-                            className={classNames(
-                              item.current
-                                ? "bg-gray-900 text-white"
-                                : "text-gray-300 hover:bg-gray-700 hover:text-white",
-                              "px-3 py-2 rounded-md text-sm font-medium"
-                            )}
-                            aria-current={item.current ? "page" : undefined}
-                          >
-                            {item.name}
-                          </a>
-                        </Link>
-                      ))}
-                    </div>
-                  </div>
-                </div>
-                <div className="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0">
-                  <button
-                    type="button"
-                    className="bg-gray-800 p-1 rounded-full text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white"
-                  >
-                    <span className="sr-only">View notifications</span>
-                    <BellIcon className="h-6 w-6" aria-hidden="true" />
-                  </button>
+  const router = useRouter();
+  const { user } = useUser();
 
-                  {/* Profile dropdown */}
-                  <Menu as="div" className="ml-3 relative">
-                    <div>
-                      <Menu.Button className="bg-gray-800 flex text-sm rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white">
-                        <span className="sr-only">Open user menu</span>
-                        <img
-                          className="h-8 w-8 rounded-full"
-                          src={user?.picture || ""}
-                          alt="profile"
-                        />
-                      </Menu.Button>
-                    </div>
-                    <Transition
-                      as={Fragment}
-                      enter="transition ease-out duration-100"
-                      enterFrom="transform opacity-0 scale-95"
-                      enterTo="transform opacity-100 scale-100"
-                      leave="transition ease-in duration-75"
-                      leaveFrom="transform opacity-100 scale-100"
-                      leaveTo="transform opacity-0 scale-95"
-                    >
-                      <Menu.Items className="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none">
-                        <Menu.Item>
-                          {({ active }) => (
-                            <Link href="/me">
-                              <a
-                                className={classNames(
-                                  active ? "bg-gray-100" : "",
-                                  "block px-4 py-2 text-sm text-gray-700"
-                                )}
-                              >
-                                Your Profile
-                              </a>
-                            </Link>
-                          )}
-                        </Menu.Item>
-                        <Menu.Item>
-                          {({ active }) => (
-                            <a
-                              href="#"
-                              className={classNames(
-                                active ? "bg-gray-100" : "",
-                                "block px-4 py-2 text-sm text-gray-700"
-                              )}
-                            >
-                              Settings
-                            </a>
-                          )}
-                        </Menu.Item>
-                        <Menu.Item>
-                          {({ active }) => (
-                            <Link href="/api/auth/logout">
-                              <a
-                                className={classNames(
-                                  active ? "bg-gray-100" : "",
-                                  "block px-4 py-2 text-sm text-gray-700"
-                                )}
-                              >
-                                Sign out
-                              </a>
-                            </Link>
-                          )}
-                        </Menu.Item>
-                      </Menu.Items>
-                    </Transition>
-                  </Menu>
-                </div>
-              </div>
-            </div>
-            <Disclosure.Panel className="sm:hidden">
-              <div className="px-2 pt-2 pb-3 space-y-1">
-                {navigation.map((item) => (
-                  <Link key={item.name} href={item.href}>
-                    <a
-                      className={classNames(
-                        item.current
-                          ? "bg-gray-900 text-white"
-                          : "text-gray-300 hover:bg-gray-700 hover:text-white",
-                        "block px-3 py-2 rounded-md text-base font-medium"
-                      )}
-                      aria-current={item.current ? "page" : undefined}
-                    >
-                      {item.name}
-                    </a>
-                  </Link>
-                ))}
-              </div>
-            </Disclosure.Panel>
-          </>
-        )}
-      </Disclosure>
-    );
-  }
-
-  return null;
+  return (
+    <StrapNavbar expand="lg">
+      <div className="container">
+        <StrapNavbar.Toggle className="me-auto" aria-controls="navbar">
+          <span className="navbar-toggler-icon" />
+        </StrapNavbar.Toggle>
+        <Link href="/dashboard">
+          <a className="navbar-brand me-auto">
+            <img src="/img/logo.svg" alt="logo" className="navbar-brand-img" />
+          </a>
+        </Link>
+        <NavbarSearch />
+        <div className="navbar-user">
+          <Dropdown>
+            <Dropdown.Toggle as={CustomToggle}>
+              <img
+                src={user?.picture || "/img/avatars/profiles/avatar-1.jpg"}
+                alt="profile"
+                className="avatar-img rounded-circle"
+              />
+            </Dropdown.Toggle>
+            <Dropdown.Menu className="dropdown-menu-end mt-3">
+              <Link href="/profile">
+                <a className="dropdown-item">Profile</a>
+              </Link>
+              <Link href="/settings">
+                <a className="dropdown-item">Settings</a>
+              </Link>
+              <hr className="dropdown-divider" />
+              <a href="/api/auth/logout" className="dropdown-item">
+                Logout
+              </a>
+            </Dropdown.Menu>
+          </Dropdown>
+        </div>
+        <StrapNavbar.Collapse className="me-lg-auto order-lg-first">
+          <Nav>
+            <Link href="/dashboard">
+              <a
+                className={classNames(
+                  "nav-link",
+                  router.asPath === "/dashboard" && "active"
+                )}
+              >
+                Dashboard
+              </a>
+            </Link>
+          </Nav>
+        </StrapNavbar.Collapse>
+      </div>
+    </StrapNavbar>
+  );
 };
 
+// eslint-disable-next-line react/display-name
+const CustomToggle = forwardRef(({ children, onClick }: any, ref: any) => (
+  <a
+    ref={ref}
+    onClick={(e) => {
+      e.preventDefault();
+      onClick(e);
+    }}
+    className="avatar avatar-sm dropdown-toggle"
+  >
+    {children}
+  </a>
+));
+
 export default Navbar;

components/NavbarSearch.tsx

@@ -0,0 +1,20 @@
+const NavbarSearch: React.FC = () => {
+  return (
+    <form className="form-inline me-4 d-none d-lg-flex">
+      <div className="input-group input-group-rounded input-group-merge input-group-reverse">
+        <input
+          type="search"
+          className="form-control dropdown-toggle list-search"
+          data-bs-toggle="dropdown"
+          placeholder="Search"
+          aria-label="Search"
+        />
+        <div className="input-group-text">
+          <i className="fe fe-search"></i>
+        </div>
+      </div>
+    </form>
+  );
+};
+
+export default NavbarSearch;