feat: Border Glow Button

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

587 stars 43 forks source link

feat: Border Glow Button #155

Closed epoll31 closed 2 months ago

epoll31 commented 2 months ago

Description

I added a BorderGlow component

Related Issue

Fixes #154

Proposed Changes

I added the BorderGlow component to the showcase: src/showcase/effects/BorderGlow.tsx
I added a docs page to display the new component: src/app/docs/effects/border-glow/page.mdx
- This uses the new preview override in ComponentPreview
I added a link in src/components/Navigation.tsx
I added a card to the Effects UI Group: src/showcase/ui-group/EffectCards.tsx
I added 'Border Glow Effect' to credits.md

Screenshots

https://github.com/Ansub/SyntaxUI/assets/16091805/28526013-ef31-476b-ba84-e2c96507ec5d

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)

vercel[bot] commented 2 months ago

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

A member of the Team first needs to authorize it.

epoll31 commented 2 months ago

I just changed the effect for a button.

Here is a preview:

https://github.com/Ansub/SyntaxUI/assets/16091805/39f78014-2883-429b-9f89-17af6d89312b

epoll31 commented 2 months ago

I need to fix Navigation.tsx. It's still an effect. i need to change it to a button.

epoll31 commented 2 months ago

It should be good to go now :)

vercel[bot] commented 2 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 2:23pm

Ansub commented 2 months ago

made some minor changes:

removed useRef dependency from button
removed hover effect on button
removed Button text from all button cards instead of just Border Glow

great work with this button, I like that meta description that you wrote. will definitely help in google ranking.

epoll31 commented 2 months ago

Thanks, I appreciate it!

Just curious, why is the ref.current not necessary as a dependency for the useEffect?

Ansub commented 2 months ago

Thanks, I appreciate it!

Just curious, why is the ref.current not necessary as a dependency for the useEffect?

My VS Code was saying that it was an unnecessary dependency, and it started working after I removed it.