Ryan/documenso
1
0
Fork 1
mirror of https://github.com/documenso/documenso.git synced 2025-11-12 15:53:02 +10:00
Code Issues Packages Projects Releases Wiki Activity

breadcrumb basics

Browse Source
This commit is contained in:
Timur Ercan
2023-02-03 12:18:55 +01:00
parent 05daf6e6a4
commit 143f8aa543
5 changed files with 58 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
apps/web/pages/dashboard.tsx
View File

@ -119,8 +119,8 @@ const DashboardPage: NextPageWithLayout = (props: any) => {
aria-hidden="true"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
strokeLinecap="round"
strokeLinejoin="round"
d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m3.75 9v6m3-3H9m1.5-12H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"
/>
</svg>

45
apps/web/pages/documents/[id]/index.tsx
View File

@ -17,7 +17,7 @@ import {
} from "@heroicons/react/24/outline";
import { getDocument } from "@documenso/lib/query";
import { Document as PrismaDocument } from "@prisma/client";
import { Button } from "@documenso/ui";
import { Button, Breadcrumb } from "@documenso/ui";
const PDFViewer = dynamic(() => import("../../../components/pdf-viewer"), {
ssr: false,
@ -30,48 +30,7 @@ const DocumentsDetailPage: NextPageWithLayout = (props: any) => {
<div className="mt-4">
<div>
<div>
<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>
<Breadcrumb document={props.document}></Breadcrumb>
</div>
<div className="mt-2 md:flex md:items-center md:justify-between">
<div className="min-w-0 flex-1">

52
packages/ui/components/breadcrumb/breadcrumb.tsx Normal file
View File

@ -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>
</>
);
}

1
packages/ui/components/breadcrumb/index.ts Normal file
View File

@ -0,0 +1 @@
export { Breadcrumb } from "./breadcrumb";

1
packages/ui/index.ts
View File

@ -1 +1,2 @@
export { Button } from "./components/button/index";
export { Breadcrumb } from "./components/breadcrumb/index";