const { onSearch, selectedDao, widgetProvider } = props; State.init({ selectedDao: selectedDao }) if(selectedDao!=state.selectedDao) State.update({selectedDao}); const SearchWrapper = styled.div ` display: flex; flex-direction: column; width: 230px; margin-bottom: 25px; button { margin: 0; }; ` let ClipboardButton = styled.button` position: relative; top: 10px; display: flex; justify-content: space-evenly; align-items: center; border-radius: 4px; `; const clipboardSvg = ( <svg class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium copy-icon css-vubbuv" focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="ContentCopyIcon" aria-label="Copied to clipboard!" width={20} > <path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"></path> </svg> ); const search = () => { State.update({displayShare:true}) onSearch(state.dao); } function copy() { const link = `https://near.org/#/${widgetProvider}/widget/SputnikBOS.Home?selected_dao=${selectedDao}`; return () => { State.update({ showClipboardTooltip: true }); setTimeout(() => { State.update({ showClipboardTooltip: false }); }, 1000); clipboard.writeText(link); }; } return <SearchWrapper selectedDao={selectedDao}> <input type={'text'} placeholder={'marketing.sputnik-dao.near'} onChange={(e) => State.update({dao:e.target.value})} /> <button onClick={search}>Get dashboard</button> {state.selectedDao&&<OverlayTrigger key={"left"} placement={"left"} overlay={ <Tooltip id={`tooltip`}> Dashboard link added to clipboard. </Tooltip> } show={state.showClipboardTooltip} > <ClipboardButton onClick={copy()}> <span>Get your dashboard link </span> {clipboardSvg} </ClipboardButton> </OverlayTrigger>} </SearchWrapper>