Preview #1
Preview #1
Conversation
| <button | ||
| type="button" | ||
| title="Next" | ||
| onClick={() => setShowPreviewModal(showPreviewModal - 1)}> |
There was a problem hiding this comment.
you will need some validation I think, to stop people clicking outside the range of history items. Try adding a 'hasNextItem' function and disable the next button if its false. then disable the previous button if the current index is 0
| {leftIcon && ( | ||
| <ChevronDoubleLeftIcon | ||
| aria-hidden="true" | ||
| className="absolute -mt-60 ml-10 h-8 w-8 text-stone-400 cursor-not-allowed" |
There was a problem hiding this comment.
something that is probably worth looking into is the ‘top, left, right, bottom’ attributes for css. They are used with absolute (and static/fixed/sticky) positioned elements rather than using margin
| <ChevronDoubleRightIcon | ||
| aria-hidden="true" | ||
| className="absolute -mt-60 h-8 w-8 text-stone-400 cursor-not-allowed" | ||
| style={{ marginLeft: '50rem' }} |
There was a problem hiding this comment.
generally, if you find yourself reaching for margin of more than 2 or 3 em you should look for a different way to do it. Also with tailwind you shouldn't use 'style' unless you really need to, because its less efficient
No description provided.