feat: background grid

[epoll31]

Description

I added a simple component in the Effects group named BackgroundGrid that can be used to add a background grid to any page or any container very easily.

Related Issue

Fixes #202

Proposed Changes

• added the BackgroundGrid component to src/showcase/effects/BackgroundGrid.tsx
• added the BackgroundGrid example to src/showcase/ui-group/EffectCards.tsx
  • for this, I added a check in the data.map that will display an Image only when item.image exists and will display a preview only when item.preview exists so that we can use components as previews instead of only images
• added the docs page to src/app/(docs)/effects/background-grid/page.mdx
  • I used ComponentPreview with the preview override prop so that I can customize the props like size, color, strokeWidth, etc. to make it fit better on the page.
• added the appropriate link to src/components/Navigation.tsx with the new tag
• added my name to the credits.md under this new addition

Screenshots

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]]

@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	Jun 5, 2024 5:19am

[epoll31]

I've made the changes, but the new cn function is breaking things, so it it not ready to be merged just yet.

[epoll31]

@Ansub I have made the changes to use the new usingCn flag and I switched the cn function to import from utils. The background grid is working effectively and should be good now.

[epoll31]

I updated the BackgroundGrid component to have an elliptical fade effect now. I also removed the fade controls from the component which makes it more opinionated.

[Ansub]

can you fix the merge conflicts bro, i will merge it then

[epoll31]

Should be good now