button as component

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

View File

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

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

View File

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

View File

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