[Feature]: Removed Framer-Motion from Icon Toggle

SyntaxUI / syntaxui

Get free access to pre-built, Tailwind CSS-powered components, animations and effects - brought to life using Framer Motion. Just copy, paste and you're ready to go!

https://syntaxui.com

MIT License

573 stars 42 forks source link

[Feature]: Removed Framer-Motion from Icon Toggle #213

Closed shashank6341 closed 1 month ago

shashank6341 commented 1 month ago

Description

Removed the Framer Motion dependency from the Icon Toggle Component .

Related Issue

Fixes #201

Proposed Changes

Modified src/showcase/components/toggle/IconToggle.tsx
- Removed framer-motion references.
- Achieved the same transition effect using Tailwind CSS directly, instead of combining it with Framer Motion.
- Added a local version of the cn function for code preview visibility.
Modified src/app/(docs)/components/toggle/icon-toggle/page.mdx
- Removed usingFramer prop from Component Preview.
- Added usingCn prop in Component Preview.

Screenshots

ScreenRecording2024-05-30at12 26 32AM-ezgif com-video-to-gif-converter

Checklist

Please check the boxes that apply:

[x] I have rebased my branch on top of the latest main branch.
[x] I have tested the changes locally
[x] I ran npm run build and build is successful
[x] I have added necessary documentation (if applicable)
[x] I have updated the credits.md file (if applicable)

vercel[bot] commented 1 month ago

@shashank6341 is attempting to deploy a commit to the SyntaxUI Team on Vercel.

A member of the Team first needs to authorize it.

Ansub commented 1 month ago

@epoll31 since you have rewritten the the code for framer motion into tailwind css, can you review this PR too.

vercel[bot] commented 1 month ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
syntax-ui	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 31, 2024 4:15am

epoll31 commented 1 month ago

@Ansub @shashank6341

So I was looking through the PR and it looks pretty good overall. I didn't love the use of the showIcon state variable.

I feel like it makes the animation very choppy when it doesn't need that. I made some edits that eliminated that variable.

I also changed how the icon transitions from Check to X where instead of only rendering one or the other, we always render both with opposite values in opacity. Animating between these looks much smoother now.

I wasn't able to make changes on this branch directly, so I opened up a new PR from my branch to this PR's branch

https://github.com/shashank6341/syntaxui/pull/1

shashank6341 commented 1 month ago

Hi @epoll31 @Ansub.

I agree to the feedback, I have merged the changes from @epoll31 and is now reflecting in this PR.

Ansub commented 1 month ago

Congratulations @shashank6341 you can ping me on discord to get the contributor badge ✨