feat: shimmer button

[epoll31]

---

name: Shimmer Button about: Added a Shimmer Button variation title: Shimmer Button labels: 'feature' assignees: 'epoll31'

Description

Added a Shimmer Button variation

Related Issue

Fixes #117

Proposed Changes

• Added component to showcase src/showcase/components/button/ShimmerButton.tsx
• Added docs page src/app/docs/components/button/shimmer-button/page.mdx
• Added added card src/showcase/ui-group/ButtonCards.tsx
• Added --shimmer-button-x property to src/styles/tailwind.css
• Added animation and keyframes to tailwind.config.ts
• Added credit to credits.md

Screenshots

https://github.com/Ansub/SyntaxUI/assets/16091805/b6126aad-4a46-448f-a472-78072bcba4d8

Checklist

Please check the boxes that apply:

• [x] I have tested the changes locally
• [x] I ran npm run build and build is successful
• [ ] I have added necessary documentation (if applicable)
  • I did not add documentation
• [x] I have updated the credits.md file (if applicable)

Additional Context

Please provide any additional context or information about the pull request here.

[vercel[bot]]

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

A member of the Team first needs to authorize it.

[vercel[bot]]

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 2, 2024 6:18am

[Ansub]

@property --shimmer-button-x {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0;

is there is a way to directly integrate this in the button itself? there should be 🤔

[epoll31]

I can look into it :)

[epoll31]

I was able to

• remove the --shimmer-button-x from src/styles/tailwind.css
• remove the animation from tailwind.config.ts
• contain entire animation into src/showcase/components/button/ShimmerButton.tsx
• simplify src/app/docs/components/button/shimmer-button/page.mdx using ComponentPreview since it is contained within a single file

Thanks for pushing me to do this, it is much cleaner. We can also work on transitioning the Discord Button from multiple file into this format using ShimmerButton as a reference

[Ansub]

man is there is anything you can't do! 😂✨

Nailed it, made the code so much cleaner now.

keep up the good work Ethan 😎