-
Notifications
You must be signed in to change notification settings - Fork 5
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #254 from sunrise-stake/develop
0.7.2 Maintenance
- Loading branch information
Showing
50 changed files
with
1,261 additions
and
284 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,55 +1,97 @@ | ||
| import clx from "classnames"; | ||
| import React, { type ReactNode } from "react"; | ||
| import React, { type MouseEventHandler, type ReactNode } from "react"; | ||
| import { type ModalControl } from "../hooks"; | ||
| import { InfoModal } from "./modals/InfoModal"; | ||
| import { useInfoModal } from "../hooks/useInfoModal"; | ||
|
|
||
| interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> { | ||
| color?: "primary" | "secondary" | "danger" | "ticket" | "white"; | ||
| variant?: "solid" | "outline"; | ||
| size?: "sm" | "md" | "lg"; | ||
| children?: ReactNode; | ||
| className?: string; | ||
| infoDisabled?: boolean; | ||
| disabledTitle?: string; | ||
| disabledMessage?: string; | ||
| } | ||
|
|
||
| // Execute the onClick only if the condition is true, otherwise show the modal | ||
| const orShowModal = | ||
| ( | ||
| condition: boolean, | ||
| executeIfTrue: MouseEventHandler, | ||
| modalIfFalse: ModalControl | ||
| ): MouseEventHandler => | ||
| (event) => { | ||
| if (condition) { | ||
| executeIfTrue(event); | ||
| } else { | ||
| modalIfFalse.trigger(); | ||
| } | ||
| }; | ||
|
|
||
| const Button: React.FC<ButtonProps> = ({ | ||
| children, | ||
| className, | ||
| color = "primary", | ||
| size = "md", | ||
| variant = "solid", | ||
| infoDisabled = false, | ||
| disabledTitle = "", | ||
| disabledMessage = "", | ||
| onClick, | ||
| ...rest | ||
| }) => ( | ||
| <button | ||
| className={clx( | ||
| "inline-flex items-center border-2 rounded-lg leading-6 shadow-sm disabled:brightness-75 hover:brightness-125", | ||
| { | ||
| "border-green hover:border-green-light": color === "primary", | ||
| "border-danger": color === "danger", | ||
| "border-outset": color === "secondary", | ||
| "border-ticket": color === "ticket", | ||
| "border-white": color === "white", | ||
| "bg-green hover:bg-green-light": | ||
| color === "primary" && variant === "solid", | ||
| "bg-danger": color === "danger" && variant === "solid", | ||
| "bg-outset": color === "secondary" && variant === "solid", | ||
| "bg-ticket": color === "ticket" && variant === "solid", | ||
| "bg-white": color === "white" && variant === "solid", | ||
| "bg-transparent": variant === "outline", | ||
| "text-green hover:text-green-light": | ||
| color === "primary" && variant === "outline", | ||
| "text-danger": color === "danger" && variant === "outline", | ||
| "text-outset": color === "secondary" && variant === "outline", | ||
| "text-ticket": color === "ticket" && variant === "outline", | ||
| "text-white": variant === "solid" && color !== "white", | ||
| "text-green": color === "white", | ||
| "px-8 py-4 text-2xl": size === "lg", | ||
| "px-8 py-4 text-xl": size === "md", | ||
| "px-5 py-3 text-xl": size === "sm", | ||
| }, | ||
| className | ||
| )} | ||
| {...rest} | ||
| > | ||
| {children} | ||
| </button> | ||
| ); | ||
| }) => { | ||
| const infoModal = useInfoModal(); | ||
| const wrappedOnClick = | ||
| onClick !== undefined | ||
| ? orShowModal(!infoDisabled, onClick, infoModal) | ||
| : undefined; | ||
| return ( | ||
| <button | ||
| onClick={wrappedOnClick} | ||
| className={clx( | ||
| "inline-flex items-center border-2 rounded-lg leading-6 shadow-sm disabled:brightness-75", | ||
| infoDisabled ? "brightness-75" : "hover:brightness-125", | ||
| { | ||
| "border-green": color === "primary", | ||
| "hover:border-green-light": color === "primary" && !infoDisabled, | ||
| "border-danger": color === "danger", | ||
| "border-outset": color === "secondary", | ||
| "border-ticket": color === "ticket", | ||
| "border-white": color === "white", | ||
| "bg-green": color === "primary" && variant === "solid", | ||
| "hover:bg-green-light": | ||
| color === "primary" && variant === "solid" && !infoDisabled, | ||
| "bg-danger": color === "danger" && variant === "solid", | ||
| "bg-outset": color === "secondary" && variant === "solid", | ||
| "bg-ticket": color === "ticket" && variant === "solid", | ||
| "bg-white": color === "white" && variant === "solid", | ||
| "bg-transparent": variant === "outline", | ||
| "text-green hover:text-green-light": | ||
| color === "primary" && variant === "outline", | ||
| "text-danger": color === "danger" && variant === "outline", | ||
| "text-outset": color === "secondary" && variant === "outline", | ||
| "text-ticket": color === "ticket" && variant === "outline", | ||
| "text-white": variant === "solid" && color !== "white", | ||
| "text-green": color === "white", | ||
| "px-8 py-4 text-2xl": size === "lg", | ||
| "px-8 py-4 text-xl": size === "md", | ||
| "px-5 py-3 text-xl": size === "sm", | ||
| }, | ||
| className | ||
| )} | ||
| {...rest} | ||
| > | ||
| <InfoModal | ||
| title={disabledTitle} | ||
| message={disabledMessage} | ||
| ok={infoModal.onModalOK} | ||
| show={infoModal.modalShown} | ||
| /> | ||
| {children} | ||
| </button> | ||
| ); | ||
| }; | ||
|
|
||
| export { Button }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,39 @@ | ||
| import { Dialog } from "@headlessui/react"; | ||
| import { ExclamationTriangleIcon } from "@heroicons/react/24/solid"; | ||
| import React, { type FC, type PropsWithChildren } from "react"; | ||
|
|
||
| import { BaseModal, type ModalProps } from "./"; | ||
|
|
||
| type InfoModalProps = { title: string; message?: string } & PropsWithChildren & | ||
| Omit<ModalProps, "cancel">; | ||
| const InfoModal: FC<InfoModalProps> = (props) => { | ||
| return ( | ||
| <BaseModal cancelVisible={false} {...props} cancel={() => {}}> | ||
| <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full"> | ||
| <ExclamationTriangleIcon | ||
| className="w-8" | ||
| aria-hidden="true" | ||
| color="#f9c23c" | ||
| /> | ||
| </div> | ||
| <div className="text-center"> | ||
| <Dialog.Title | ||
| as="h3" | ||
| className="text-md font-bold leading-6 text-[#f9c23c] text-center" | ||
| > | ||
| {props.title} | ||
| </Dialog.Title> | ||
| <div className="mt-2"> | ||
| <div className="flex flex-col gap-1 py-6 px-2"> | ||
| {props.message !== undefined && ( | ||
| <p className="text-md">{props.message}</p> | ||
| )} | ||
| {props.children} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </BaseModal> | ||
| ); | ||
| }; | ||
|
|
||
| export { InfoModal }; |
Oops, something went wrong.
b5b4dbdThere was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Successfully deployed to the following URLs:
app – ./
app.sunrisestake.com
app-git-main-sunrise-stake.vercel.app
app-sunrise-stake.vercel.app