🧹 moved Emoji Confetti to effects

Author: Ansub

src/app/(docs)/components/button/emoji-confetti-button/page.mdx

@@ -0,0 +1,8 @@
+export const metadata = {
+    title: 'Emoji Confetti ',
+    description:
+        'A confetti effects button that displays a random emoji confetti effect on click, implemented using Tailwind CSS & Framer Motion for React and libraries like Next.js.',
+}
+
+<BackButton href="/components/button" />
+<ComponentPreview path="effects/EmojiConfetti" usingFramer/>

src/app/(docs)/effects/emoji-confetti/page.mdx

@@ -321,13 +321,17 @@ export const navigation: Array<NavGroup> = [
       {
         title: 'Background',
         href: '/effects/background',
-        tag: 'new',
       },
       {
         title: 'Gradients',
         href: '/effects/gradients',
       },
       { title: 'Image Fade', href: '/effects/image-fade' },
+      {
+        title: 'Emoji Confetti',
+        href: '/effects/emoji-confetti',
+        tag: 'new',
+      },
     ],
   },
 ]

src/components/Navigation.tsx

@@ -13,7 +13,7 @@ interface Particle {
   rotationSpeed: number
 }
 
-const EmojiConfettiButton: React.FC = () => {
+const EmojiConfetti: React.FC = () => {
   const [isExploding, setIsExploding] = useState(false)
   const buttonRef = useRef<HTMLButtonElement>(null)
   const canvasRef = useRef<HTMLCanvasElement>(null)
@@ -111,7 +111,7 @@ const EmojiConfettiButton: React.FC = () => {
         whileTap={{ scale: 0.95 }}
         onClick={handleClick}
       >
-        Celebrate!
+        Click Me! 🎉
       </motion.button>
       {isExploding && (
         <canvas
@@ -124,4 +124,4 @@ const EmojiConfettiButton: React.FC = () => {
   )
 }
 
-export default EmojiConfettiButton
+export default EmojiConfetti

…omponents/button/EmojiConfettiButton.tsx src/showcase/effects/EmojiConfetti.tsxsrc/showcase/components/button/EmojiConfettiButton.tsx renamed to src/showcase/effects/EmojiConfetti.tsx src/showcase/components/button/EmojiConfettiButton.tsx renamed to src/showcase/effects/EmojiConfetti.tsx

@@ -1,4 +1,3 @@
-import Link from 'next/link'
 import ThreeDButton from '@/showcase/components/button/3DButton'
 import BorderGlowButton from '@/showcase/components/button/BorderGlowButton'
 import GradientFillButton from '@/showcase/components/button/GradientFillButton'
@@ -7,13 +6,12 @@ import NeubrutalismButton from '@/showcase/components/button/NeubrutalismButton'
 import ShimmerButton from '@/showcase/components/button/ShimmerButton'
 import ShineButton from '@/showcase/components/button/ShineButton'
 import StitchesButton from '@/showcase/components/button/StitchesButton'
-import TextRevealButton from '../components/button/TextRevealButton'
-import Card from './Card'
+import Link from 'next/link'
 import BounceButton from '../components/button/BounceButton'
 import MagneticButton from '../components/button/MagneticButton'
-import { title } from 'process'
 import StarWarsButton from '../components/button/StarWarsButton'
-import EmojiConfettiButton from '../components/button/EmojiConfettiButton'
+import TextRevealButton from '../components/button/TextRevealButton'
+import Card from './Card'
 
 const data = [
   {
@@ -46,11 +44,7 @@ const data = [
     link: '/components/button/star-wars-button',
     component: <StarWarsButton />,
   },
-  {
-    title: 'Emoji Confetti',
-    link: '/components/button/emoji-confetti-button',
-    component: <EmojiConfettiButton />,
-  },
+
   {
     title: 'Shine',
     link: '/components/button/shine-button',

src/showcase/ui-group/ButtonCards.tsx

@@ -2,6 +2,7 @@ import Image from 'next/image'
 import Link from 'next/link'
 import DotPatternBackground from '../effects/BackgroundDots'
 import Card from './Card'
+import EmojiConfetti from '../effects/EmojiConfetti'
 
 const data = [
   {
@@ -24,6 +25,12 @@ const data = [
     ),
     link: '/effects/background',
   },
+  {
+    id: 4,
+    title: 'Emoji Confetti',
+    link: '/effects/emoji-confetti',
+    preview: <EmojiConfetti />,
+  },
 ]
 
 const EffectCards = () => {