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

bradcrumb to compnent

Browse Source
This commit is contained in:
Timur Ercan
2023-02-03 13:06:26 +01:00
parent cc44ba87a2
commit 16ffe5dd33
3 changed files with 68 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -30,7 +30,20 @@ const DocumentsDetailPage: NextPageWithLayout = (props: any) => {
<div className="mt-4">
<div>
<div>
<Breadcrumb document={props.document}></Breadcrumb>
<Breadcrumb
document={props.document}
items={[
{
title: "Documents",
href: "/documents",
},
{
title: props.document.title,
href:
NEXT_PUBLIC_WEBAPP_URL + "/documents/" + props.document.id,
},
]}
/>
</div>
<div className="mt-2 md:flex md:items-center md:justify-between">
<div className="min-w-0 flex-1">

86
apps/web/pages/documents/[id]/recipients.tsx
View File

@ -10,7 +10,7 @@ import { useRouter } from "next/router";
import { toast } from "react-hot-toast";
import { getDocument } from "@documenso/lib/query";
import { Document as PrismaDocument } from "@prisma/client";
import { Button } from "@documenso/ui";
import { Breadcrumb, Button } from "@documenso/ui";
const RecipientsPage: NextPageWithLayout = (props: any) => {
const router = useRouter();
@ -23,68 +23,28 @@ const RecipientsPage: NextPageWithLayout = (props: any) => {
</Head>
<div className="mt-10">
<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>
<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 +
"/recipients"
}
aria-current="page"
className="ml-4 text-sm font-medium text-gray-500 hover:text-gray-700"
>
Recipients
</a>
</div>
</li>
</ol>
</nav>
<Breadcrumb
document={props.document}
items={[
{
title: "Documents",
href: "/documents",
},
{
title: props.document.title,
href:
NEXT_PUBLIC_WEBAPP_URL + "/documents/" + props.document.id,
},
{
title: "Recipients",
href:
NEXT_PUBLIC_WEBAPP_URL +
"/documents/" +
props.document.id +
"/recipients",
},
]}
/>
</div>
<div className="mt-2 md:flex md:items-center md:justify-between">
<div className="min-w-0 flex-1">

60
packages/ui/components/breadcrumb/breadcrumb.tsx
View File

@ -1,13 +1,18 @@
import React from "react";
import { ChevronLeftIcon, ChevronRightIcon } from "@heroicons/react/20/solid";
import { NEXT_PUBLIC_WEBAPP_URL } from "@documenso/lib";
import Link from "next/link";
export function Breadcrumb(props: any) {
return (
<>
<nav className="sm:hidden" aria-label="Back">
<a
href="#"
<Link
href={
props.items.length > 1
? props.items[props.items.length - 2].href
: props.items[0].href
}
className="flex items-center text-sm font-medium text-gray-500 hover:text-gray-700"
>
<ChevronLeftIcon
@ -15,36 +20,33 @@ export function Breadcrumb(props: any) {
aria-hidden="true"
/>
Back
</a>
</Link>
</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>
{props?.items.map((item: any, index: number) => (
<React.Fragment>
{index > 0 ? (
<ChevronRightIcon
key={item.href}
className="h-5 w-5 flex-shrink-0 text-gray-400"
aria-hidden="true"
/>
) : (
""
)}
<li key={item.href}>
<div className="flex">
<Link
href={item.href}
className="text-sm font-medium text-gray-500 hover:text-gray-700"
>
{item.title}
</Link>
</div>
</li>
</React.Fragment>
))}
</ol>
</nav>
</>