Ryan/documenso
1
0
Fork 1
mirror of https://github.com/documenso/documenso.git synced 2025-11-13 16:23:06 +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 className="mt-4">
<div> <div>
<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>
<div className="mt-2 md:flex md:items-center md:justify-between"> <div className="mt-2 md:flex md:items-center md:justify-between">
<div className="min-w-0 flex-1"> <div className="min-w-0 flex-1">

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

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

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