✨ added Rotating Complete Button

Author: Ansub

src/app/(docs)/components/button/rotating-complete-button/page.mdx

@@ -0,0 +1,9 @@
+export const metadata = {
+  title: 'Rotating Complete Button',
+  description:
+    'A button that rotates when clicked and shows a checkmark when completed.',
+}
+
+<BackButton href="/components/button" />
+
+<ComponentPreview path="components/button/RotatingCompleteButton" />

src/showcase/components/button/RotatingCompleteButton.tsx

@@ -0,0 +1,49 @@
+'use client'
+
+import { motion } from 'framer-motion'
+import { Check, ChevronRight, Zap } from 'lucide-react'
+import React, { useEffect } from 'react'
+
+const RotatingCompleteButton = () => {
+  const [isOpen, setIsOpen] = React.useState(false)
+
+  useEffect(() => {
+    if (isOpen) {
+      setTimeout(() => {
+        setIsOpen(false)
+      }, 2000)
+    }
+  }, [isOpen])
+
+  return (
+    <motion.button
+      className={`rounded-full ${
+        isOpen ? 'bg-green-500' : 'bg-red-500'
+      } px-4 py-2 font-semibold text-white`}
+      animate={{
+        rotate: isOpen ? 180 : 0,
+      }}
+      whileHover={{ scale: 1.05 }}
+      whileTap={{ scale: 0.95 }}
+      onClick={() => setIsOpen(!isOpen)}
+    >
+      <motion.span
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        exit={{ opacity: 0 }}
+      >
+        {isOpen ? (
+          <span className="flex rotate-180 items-center gap-1 text-sm font-medium">
+            Marked as complete <Check size={16} />
+          </span>
+        ) : (
+          <span className="flex items-center gap-1 text-sm font-medium">
+            Mark as complete <ChevronRight size={16} />
+          </span>
+        )}
+      </motion.span>
+    </motion.button>
+  )
+}
+
+export default RotatingCompleteButton

src/showcase/ui-group/ButtonCards.tsx

@@ -12,6 +12,7 @@ import MagneticButton from '../components/button/MagneticButton'
 import StarWarsButton from '../components/button/StarWarsButton'
 import TextRevealButton from '../components/button/TextRevealButton'
 import Card from './Card'
+import RotatingCompleteButton from '@/showcase/components/button/3DButton'
 
 const data = [
   {
@@ -55,6 +56,11 @@ const data = [
     link: '/components/button/text-reveal-button',
     component: <TextRevealButton />,
   },
+  {
+    title: 'Rotating Complete',
+    link: '/components/button/rotating-complete-button',
+    component: <RotatingCompleteButton />,
+  },
   {
     title: 'Bounce',
     link: '/components/button/bounce-button',