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

button as component

Browse Source
This commit is contained in:
Timur Ercan
2023-02-02 13:44:35 +01:00
parent d36bf46133
commit 7255819d86
4 changed files with 44 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -10,6 +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";
const RecipientsPage: NextPageWithLayout = (props: any) => { const RecipientsPage: NextPageWithLayout = (props: any) => {
const router = useRouter(); const router = useRouter();
@ -20,8 +21,6 @@ const RecipientsPage: NextPageWithLayout = (props: any) => {
<Head> <Head>
<title>{title}</title> <title>{title}</title>
</Head> </Head>
{/* -todo add signers ui -todo add breadcrumps -todo who will sign this
dropdown */}
<div className="mt-10"> <div className="mt-10">
<div> <div>
<nav className="sm:hidden" aria-label="Back"> <nav className="sm:hidden" aria-label="Back">
@ -94,24 +93,17 @@ const RecipientsPage: NextPageWithLayout = (props: any) => {
</h2> </h2>
</div> </div>
<div className="mt-4 flex flex-shrink-0 md:mt-0 md:ml-4"> <div className="mt-4 flex flex-shrink-0 md:mt-0 md:ml-4">
<button <Button
type="button" color="primary"
disabled={(props?.document?.Recipient?.length || 0) === 0} icon={PaperAirplaneIcon}
onClick={() => { onClick={() => {
if ( alert();
confirm( // todo do stuff
`Send document out to ${props?.document?.Recipient?.length} recipients?`
)
) {
router.push("/documents/" + props.document.id);
toast.success("Document sent!");
}
}} }}
className="ml-3 inline-flex items-center rounded-md border border-transparent disabled:bg-gray-300 bg-neon px-4 py-2 text-sm font-medium text-white shadow-sm bg-grey hover:bg-neon-dark focus:outline-none focus:ring-2 focus:neon-dark focus:ring-offset-2" disabled={(props?.document?.Recipient?.length || 0) === 0}
> >
<PaperAirplaneIcon className="inline text-white w-4 mr-1"></PaperAirplaneIcon>
Send Send
</button> </Button>
</div> </div>
</div> </div>
<div className="overflow-hidden rounded-md bg-white shadow mt-10 p-6"> <div className="overflow-hidden rounded-md bg-white shadow mt-10 p-6">

34
packages/ui/components/button/Button.tsx Normal file
View File

@ -0,0 +1,34 @@
import { classNames } from "@documenso/lib";
import Link from "next/link";
import React from "react";
import { Tooltip } from "react-tooltip";
import short from "short-uuid";
export function Button(props: any) {
const isLink = typeof props.href !== "undefined";
const { color = "primary", icon, disabled, onClick } = props;
const baseStyles =
"inline-flex items-center justify-center rounded-md border border-transparent px-4 py-2 text-sm font-medium text-white shadow-sm sm:w-auto disabled:bg-gray-300";
const primaryStyles = "bg-neon hover:bg-neon-dark";
const secondaryStyles =
"border-gray-300 bg-white text-gray-700 hover:bg-gray-50";
return isLink ? (
<Link id={props.id} href={props.href} className={classNames(baseStyles)}>
{props.children}
</Link>
) : (
<button
id={props.id}
className={classNames(
baseStyles,
color === "primary" ? primaryStyles : secondaryStyles
)}
onClick={props.onClick}
{...props}
>
<props.icon className="inline text-inherit w-4 mr-1"></props.icon>
{props.children}
</button>
);
}

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

@ -0,0 +1 @@
export { Button } from "./button";

2
packages/ui/index.ts
View File

@ -1 +1 @@
export {}; export { Button } from "./components/./button";