feat: Add New Shine Button

shrix1 commented 5 months ago

Description

This pull request adds a new React component called ShineButton to the project. The component renders a button with a shining effect that animates on hover.

Used bg-[#FF1059] (this looks good and punching) instead of bg-red-500

Proposed Changes

Added a new file ShineButton.tsx in the components/button folder with the ShineButton component.
Implemented the shining effect animation using Tailwind CSS.

Screenshots/video

https://github.com/Ansub/SyntaxUI/assets/92677078/1394899a-f29a-4bff-afa6-0630d9d18703

Checklist

Please check the boxes that apply:

[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)

Additional Context

The ShineButton component can be used throughout the application to add a visually appealing and interactive button element. It is built using React and styled with Tailwind CSS. The shining effect is achieved by creating a skewed overlay div that animates from left to right on hover.

vercel[bot] commented 5 months ago

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

A member of the Team first needs to authorize it.

vercel[bot] commented 5 months 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 6, 2024 3:34pm

Ansub commented 5 months ago

Can you use bg-red-500 for the button color? The current appearance looks out of place when someone views the button cards.

Ansub commented 5 months ago

why sometimes on hover shine doesn't appear? is this a expected behaviour or a bug

shrix1 commented 5 months ago

why sometimes on hover shine doesn't appear? is this a expected behaviour or a bug

used group/button for hover animation, because this button wrapper component also has group in it, that cause this issue

Ansub commented 5 months ago

can you rebase this with my main, there's a merge conflict.

also can you explain a little bit about what you mean my button wrapper component? i am missing out on context here.

shrix1 commented 5 months ago

can you rebase this with my main, there's a merge conflict.

also can you explain a little bit about what you mean my button wrapper component? i am missing out on context here.

Rebased and fixed merge conflicts and pushed my changes

The issue is ButtonCard.tsx has a group tailwind class in it
This group caused hover effect in ShineButton.tsx . So thats why in ShineButton component i add group name as group/button like Ethan did

SyntaxUI / syntaxui