Improve quote hover display

This commit is contained in:
Weves
2023-09-06 15:42:17 -07:00
committed by Chris Weaver
parent 78e1806688
commit 2d077a9544

View File

@@ -17,34 +17,32 @@ const QuoteDisplay = ({ quoteInfo }: { quoteInfo: Quote }) => {
onMouseLeave={() => setDetailIsOpen(false)} onMouseLeave={() => setDetailIsOpen(false)}
> >
{detailIsOpen && ( {detailIsOpen && (
<div className="absolute top-0 mt-10 pt-2 z-50"> <div className="absolute top-0 mt-9 pt-2 z-50">
<div className="rounded-lg shadow bg-gray-800 w-96 p-3 text-sm leading-relaxed text-gray-200"> <div className="flex flex-shrink-0 rounded-lg w-96 shadow bg-gray-800 p-3 text-sm leading-relaxed text-gray-200">
<div className="flex mt-1"> <div>
<div> <b>Quote:</b> <i>{quoteInfo.quote}</i>
<b>Quote:</b> <i>{quoteInfo.quote}</i> </div>
</div> <div
<div className="my-auto pl-3 ml-auto"
className="my-auto ml-1" onClick={() => {
onClick={() => { navigator.clipboard.writeText(quoteInfo.quote);
navigator.clipboard.writeText(quoteInfo.quote); setCopyClicked(true);
setCopyClicked(true); setTimeout(() => {
setTimeout(() => { setCopyClicked(false);
setCopyClicked(false); }, 1000);
}, 1000); }}
}} >
> {copyClicked ? (
{copyClicked ? ( <CheckmarkIcon
<CheckmarkIcon className="my-auto flex flex-shrink-0 text-gray-500 hover:text-gray-400 cursor-pointer"
className="my-auto flex flex-shrink-0 text-gray-500 hover:text-gray-400 cursor-pointer" size={20}
size={20} />
/> ) : (
) : ( <CopyIcon
<CopyIcon className="my-auto flex flex-shrink-0 text-gray-500 hover:text-gray-400 cursor-pointer"
className="my-auto flex flex-shrink-0 text-gray-500 hover:text-gray-400 cursor-pointer" size={20}
size={20} />
/> )}
)}
</div>
</div> </div>
</div> </div>
</div> </div>