-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: Update button label to "Download Trail" in SearchResults component
- Loading branch information
Showing
5 changed files
with
211 additions
and
71 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,98 @@ | ||
| import Modal from 'react-modal'; | ||
|
|
||
| const EditModal = ({ | ||
| isOpen, | ||
| closeModalFn, | ||
| data, | ||
| metadata, | ||
| onSave, | ||
| }: { | ||
| isOpen: boolean; | ||
| closeModalFn: () => void; | ||
| data: any; | ||
| metadata: any; | ||
| onSave: (data: any, metadata: any) => void; | ||
| }) => { | ||
| return ( | ||
| <Modal | ||
| isOpen={isOpen} | ||
| onRequestClose={closeModalFn} | ||
| contentLabel="Edit Modal" | ||
| ariaHideApp={false} | ||
| > | ||
| <textarea | ||
| id="edit-modal-textarea" | ||
| rows={4} | ||
| className="my-4 block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500" | ||
| > | ||
| {data} | ||
| </textarea> | ||
| {Object.entries(metadata).map(([key, value]) => ( | ||
| <div key={key} className="my-2"> | ||
| <label | ||
| htmlFor={key} | ||
| className="block text-sm font-medium text-gray-700" | ||
| > | ||
| {key} | ||
| </label> | ||
| <input | ||
| id={key} | ||
| type="text" | ||
| className="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500" | ||
| defaultValue={String(value)} | ||
| /> | ||
| </div> | ||
| ))} | ||
| <div className="flex space-x-2"> | ||
| <button | ||
| type="button" | ||
| className="mb-2 me-2 w-full rounded-lg border border-gray-300 px-5 py-2.5 text-sm font-medium text-gray-700 hover:bg-gray-800 hover:text-white focus:outline-none focus:ring-4 focus:ring-gray-300" | ||
| onClick={() => { | ||
| // get data from textarea and inputs | ||
| const newData = ( | ||
| document.getElementById('edit-modal-textarea') as HTMLInputElement | ||
| ).value; | ||
| const newMetadata: any = {}; | ||
| Object.entries(metadata).forEach(([key]) => { | ||
| const input = document.getElementById(key) as HTMLInputElement; | ||
| newMetadata[key] = input.value; | ||
| }); | ||
| // if data is empty, do not save | ||
| if (!newData) { | ||
| return; | ||
| } | ||
| // if no changes, do not save | ||
| if ( | ||
| newData === data && | ||
| JSON.stringify(newMetadata) === JSON.stringify(metadata) | ||
| ) { | ||
| closeModalFn(); | ||
| return; | ||
| } | ||
| // if metadata.alias_ids is not a correct array, do not save | ||
| if ( | ||
| newMetadata.alias_ids && | ||
| !Array.isArray(newMetadata.alias_ids) | ||
| ) { | ||
| return; | ||
| } | ||
| // send data to parent | ||
| onSave(newData, newMetadata); | ||
| closeModalFn(); | ||
| }} | ||
| > | ||
| Save | ||
| </button> | ||
| <button | ||
| type="button" | ||
| className="mb-2 me-2 w-full rounded-lg border border-gray-300 px-5 py-2.5 text-sm font-medium text-gray-700 hover:bg-gray-800 hover:text-white focus:outline-none focus:ring-4 focus:ring-gray-300" | ||
| onClick={closeModalFn} | ||
| > | ||
| Cancel | ||
| </button> | ||
| </div> | ||
| </Modal> | ||
| ); | ||
| }; | ||
|
|
||
| export default EditModal; |
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,49 @@ | ||
| const Loading = () => { | ||
| return ( | ||
| <div className="flex justify-center"> | ||
| <div | ||
| role="status" | ||
| className="my-4 max-w-md animate-pulse space-y-4 divide-y divide-gray-200 rounded border border-gray-200 p-4 shadow md:p-6 " | ||
| > | ||
| <div className="flex items-center justify-between"> | ||
| <div> | ||
| <div className="mb-2.5 h-2.5 w-24 rounded-full bg-gray-300" /> | ||
| <div className="h-2 w-32 rounded-full bg-gray-200" /> | ||
| </div> | ||
| <div className="h-2.5 w-12 rounded-full bg-gray-300" /> | ||
| </div> | ||
| <div className="flex items-center justify-between pt-4"> | ||
| <div> | ||
| <div className="mb-2.5 h-2.5 w-24 rounded-full bg-gray-300" /> | ||
| <div className="h-2 w-32 rounded-full bg-gray-200" /> | ||
| </div> | ||
| <div className="h-2.5 w-12 rounded-full bg-gray-300" /> | ||
| </div> | ||
| <div className="flex items-center justify-between pt-4"> | ||
| <div> | ||
| <div className="mb-2.5 h-2.5 w-24 rounded-full bg-gray-300" /> | ||
| <div className="h-2 w-32 rounded-full bg-gray-200" /> | ||
| </div> | ||
| <div className="h-2.5 w-12 rounded-full bg-gray-300" /> | ||
| </div> | ||
| <div className="flex items-center justify-between pt-4"> | ||
| <div> | ||
| <div className="mb-2.5 h-2.5 w-24 rounded-full bg-gray-300" /> | ||
| <div className="h-2 w-32 rounded-full bg-gray-200" /> | ||
| </div> | ||
| <div className="h-2.5 w-12 rounded-full bg-gray-300" /> | ||
| </div> | ||
| <div className="flex items-center justify-between pt-4"> | ||
| <div> | ||
| <div className="mb-2.5 h-2.5 w-24 rounded-full bg-gray-300" /> | ||
| <div className="h-2 w-32 rounded-full bg-gray-200" /> | ||
| </div> | ||
| <div className="h-2.5 w-12 rounded-full bg-gray-300" /> | ||
| </div> | ||
| <span className="sr-only">Loading...</span> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default Loading; |
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,21 @@ | ||
| const UrlSVG = () => { | ||
| return ( | ||
| <svg | ||
| className="ms-2.5 size-3 rtl:rotate-[270deg]" | ||
| aria-hidden="true" | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| fill="none" | ||
| viewBox="0 0 18 18" | ||
| > | ||
| <path | ||
| stroke="currentColor" | ||
| strokeLinecap="round" | ||
| strokeLinejoin="round" | ||
| strokeWidth="2" | ||
| d="M15 11v4.833A1.166 1.166 0 0 1 13.833 17H2.167A1.167 1.167 0 0 1 1 15.833V4.167A1.166 1.166 0 0 1 2.167 3h4.618m4.447-2H17v5.768M9.111 8.889l7.778-7.778" | ||
| /> | ||
| </svg> | ||
| ); | ||
| }; | ||
|
|
||
| export default UrlSVG; |