breadcrumb basics

packages/ui/components/breadcrumb/breadcrumb.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+import { ChevronLeftIcon, ChevronRightIcon } from "@heroicons/react/20/solid";
+import { NEXT_PUBLIC_WEBAPP_URL } from "@documenso/lib";
+
+export function Breadcrumb(props: any) {
+  return (
+    <>
+      <nav className="sm:hidden" aria-label="Back">
+        <a
+          href="#"
+          className="flex items-center text-sm font-medium text-gray-500 hover:text-gray-700"
+        >
+          <ChevronLeftIcon
+            className="-ml-1 mr-1 h-5 w-5 flex-shrink-0 text-gray-400"
+            aria-hidden="true"
+          />
+          Back
+        </a>
+      </nav>
+      <nav className="hidden sm:flex" aria-label="Breadcrumb">
+        <ol role="list" className="flex items-center space-x-4">
+          <li>
+            <div className="flex">
+              <a
+                href="/documents"
+                className="text-sm font-medium text-gray-500 hover:text-gray-700"
+              >
+                Documents
+              </a>
+            </div>
+          </li>
+          <li>
+            <div className="flex items-center">
+              <ChevronRightIcon
+                className="h-5 w-5 flex-shrink-0 text-gray-400"
+                aria-hidden="true"
+              />
+              <a
+                href={
+                  NEXT_PUBLIC_WEBAPP_URL + "/documents/" + props.document.id
+                }
+                className="ml-4 text-sm font-medium text-gray-500 hover:text-gray-700"
+              >
+                "{props.document.title}"
+              </a>
+            </div>
+          </li>
+        </ol>
+      </nav>
+    </>
+  );
+}