Brijesh's Git Server — watchman-frontend @ e5f8a20cacd1325bfa96c4cf086b0645862a9d5f

admin site for watchman

src/components/Breadcrumb.tsx (view raw)

 1
 2
 3
 4
 5
 6
 7
 8
 9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 
import Link from "next/link";
import { useRouter } from "next/router";

const Breadcrumb = () => {
  const router = useRouter();
  return (
    <div className="bg-slate-100 py-1 px-2 border-b border-slate-200">
      {router.pathname.startsWith("/projects") && (
        <div className="flex gap-0.5 items-center">
          <p>/</p>
          <Link className="hover:underline" href="/projects">
            Projects
          </Link>
          {router.pathname.replace("/projects", "") === "/create" && (
            <>
              <p>/</p>
              <Link className="hover:underline" href={"/projects/create"}>
                Create Project
              </Link>
            </>
          )}
          {/* if path contains only one slash, it means page is project details */}
          {(router.pathname.match(new RegExp("/", "g")) || []).length == 2 &&
            !router.pathname.includes("/create") &&
            !router.pathname.includes("/update") &&
            !router.pathname.includes("/delete") && (
              <>
                <p>/</p>
                <Link
                  className="hover:underline"
                  href={`/projects/${router.query.id}`}
                >
                  Project Details
                </Link>
              </>
            )}
        </div>
      )}
    </div>
  );
};

export default Breadcrumb;