-
Notifications
You must be signed in to change notification settings - Fork 14
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat(Wallet): Vertical Slide #449
Conversation
… the current version
Branch preview✅ Deployed successfully in branch deployment: |
3d3f608
to
7faf95b
Compare
7faf95b
to
a9eea1d
Compare
const [selectedIndex, setSelectedIndex] = useState(0) | ||
|
||
const itemsImages = items.map((item) => item.image) | ||
const icons = [<RecoveryIcon key="recovery" />, <ScanIcon key="scan" />, <MultipleKeysIcon key="multiple-keys" />] |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nit: we can move this outside of the component.
{itemsImages[selectedIndex] ? ( | ||
<img src={itemsImages[selectedIndex].src} alt={itemsImages[selectedIndex].alt} className={css.image} /> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We can extract itemsImages[selectedIndex]
to a variable to simplify this.
// Change index every 5 seconds | ||
useEffect(() => { | ||
const interval = setInterval(() => { | ||
setSelectedIndex((prevIndex) => (prevIndex + 1) % items?.length) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This will return NaN
if items
is undefined.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I initiate items
to 0
in the received props
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
In which case, we don't need the optional chaining.
const handleCardClick = (index: number) => { | ||
setSelectedIndex(index) | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nit: this is somewhat neglible. You can just call setSelectedIndex
directly.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I prefer to leave the click handler
What it solves
Implements the Vertical Slider
Figma
https://www.figma.com/design/qtXXlwdslAze6yNbLLzIRa/Website-redesign-2.0?node-id=16164-3355&t=UyEbY16dBeLFg4eE-4