-
-
Notifications
You must be signed in to change notification settings - Fork 557
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
42 changed files
with
626 additions
and
423 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
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,33 +1,56 @@ | ||
| import useCopyToClipboard from 'hooks/useCopyToClipboard' | ||
| import React from 'react' | ||
| import { FaRegCopy } from 'react-icons/fa' | ||
| import { Tooltip } from 'react-tooltip' | ||
| import useCopyToClipboard from "hooks/useCopyToClipboard"; | ||
| import React from "react"; | ||
| import { FaRegCopy, FaCheckSquare } from "react-icons/fa"; | ||
| import { Tooltip } from "react-tooltip"; | ||
|
|
||
| type CopyToClipboardProps = { | ||
| url: string | ||
| } | ||
| url: string; | ||
| }; | ||
|
|
||
| export const CopyToClipboard = ({ url }: CopyToClipboardProps): JSX.Element => { | ||
| const [copyToClipboard, { success }] = useCopyToClipboard() | ||
| const [copyToClipboard, { success }] = useCopyToClipboard(); | ||
|
|
||
| function handleCopy(e: React.MouseEvent<SVGElement, MouseEvent>) { | ||
| e.stopPropagation() | ||
| copyToClipboard(url) | ||
| e.stopPropagation(); | ||
| copyToClipboard(url); | ||
| } | ||
|
|
||
| return ( | ||
| <div | ||
| className="dropdown dropdown-left dropdown-hover"> | ||
| <div style={{ position: 'relative' }}> | ||
| <button data-tooltip-id="copy-tooltip" data-tooltip-content={success ? 'Copied!' : 'Copy'} data-tooltip-place="top"> | ||
| <FaRegCopy | ||
| size={'1.3rem'} | ||
| className="text-theme-primary cursor-pointer" | ||
| onClick={(e) => handleCopy(e)} | ||
| /> | ||
| <div className="dropdown dropdown-left dropdown-hover"> | ||
| <div style={{ position: "relative" }}> | ||
| <button | ||
| data-tooltip-id="copy-tooltip" | ||
| data-tooltip-content={success ? "Copied!" : "Copy"} | ||
| data-tooltip-place="top" | ||
| > | ||
| {success ? ( // Render the FaCheckSquare icon if success is true | ||
| <FaCheckSquare | ||
| size={"1.3rem"} | ||
| className="text-theme-primary cursor-pointer" | ||
| onClick={(e) => handleCopy(e)} | ||
| aria-label="Link copied" // Add aria-label for accessibility | ||
| /> | ||
| ) : ( | ||
| <FaRegCopy // Otherwise, render the default FaRegCopy icon | ||
| size={"1.3rem"} | ||
| className="text-theme-primary cursor-pointer" | ||
| onClick={(e) => handleCopy(e)} | ||
| aria-label="Copy link to clipboard" // Add aria-label for accessibility | ||
| /> | ||
| )} | ||
| </button> | ||
| <Tooltip id='copy-tooltip' style={{ backgroundColor: '#8b5cf6', fontSize: '13px', paddingLeft: '6px', paddingRight: '6px', paddingTop: '2px', paddingBottom: '2px' }} /> | ||
| <Tooltip | ||
| id="copy-tooltip" | ||
| style={{ | ||
| backgroundColor: "#8b5cf6", | ||
| fontSize: "13px", | ||
| paddingLeft: "6px", | ||
| paddingRight: "6px", | ||
| paddingTop: "2px", | ||
| paddingBottom: "2px", | ||
| }} | ||
| /> | ||
| </div> | ||
| </div> | ||
| ) | ||
| } | ||
| ); | ||
| } |
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,14 @@ | ||
| interface ErrorMessageProps { | ||
| children: React.ReactNode | ||
| className?: string | undefined | ||
| } | ||
|
|
||
| export const ErrorMessage: React.FC<ErrorMessageProps> = ({ | ||
| children, | ||
| className, | ||
| }) => { | ||
| const defaultClasses = 'text-red-500 mt-2' | ||
| const classes = defaultClasses + ' ' + (className ?? '') | ||
|
|
||
| return <p className={classes}>{children}</p> | ||
| } |
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
Oops, something went wrong.