feat(SearchBar): Show price range next to the filter

[zhengow]

Thank you for your contribution to the KodaDot NFT gallery.
👇 _ Let's make a quick check before the contribution.

PR type

• Bugfix
• Feature
• Refactoring

What's new?

• PR closes Show price range next to the filter #2400
• Show price range next to the filter

Before submitting Pull Request, please make sure:

• My contribution builds clean without any errors or warnings
• I've merged recent default branch -- main and I've no conflicts
• I've tried to respect high code quality standards
• I've didn't break any original functionality
• I've posted a screenshot of demonstrated change in this PR

Optional

• I've tested it at </rmrk/collection/26902bc2f7c20c546a-1FVG7>
• I've tested PR on mobile and everything seems works
• I found edge cases
• I've written some unit tests 🧪

Had issue bounty label?

• Fill up your KSM address: Payout

Community participation

• Are you at KodaDot Discord?

Screenshot

• My fix has changed sticky header in series and spotlight on UI; a screenshot is best to understand changes for others.

[netlify]

✔️ Deploy Preview for koda-nuxt ready!

🔨 Explore the source changes: 93c38bd

🔍 Inspect the deploy log: https://app.netlify.com/sites/koda-nuxt/deploys/621140cada29a600082aae6e

😎 Browse the preview: https://deploy-preview-2403--koda-nuxt.netlify.app

[yangwao]

hey, this issue should follow after this one #2398

if you can fetch changes from that PR into yours

It's meanwhile merged in main

[yangwao]

Hey @zhengow this doesn't seems to be fixed well

[zhengow]

I change the text position and now it looks like this:

plz review again.
btw, what device do u use to check? and what's the screen resolution？

[yangwao]

It should be next to the filter.
You've made it under filter. :)

It was made on desktop

[zhengow]

fix the postion to "next to"
now it looks like this:

price_show.mp4

plz review again :)

[yangwao]

okay let's go! :)

pay 100 usd

[yangwao]

😍 Perfect, I’ve sent the payout
💵 $100 @ 138.87 USD/KSM ~ 0.72 $KSM
🧗 EgCzZLpVe7zg7RHh79qPyC8UrykVkA22YY2oj7sWMZf15Ws
🔗 0x0ba82161c726d9d5cdca69fb032e85df969f216c1b89a06d57ecdacb75b31682

🪅 Let’s grab another issue and get rewarded!
🪄 github.com/kodadot/nft-gallery/issues