From 0ebf5d572d59ef3e8a5a8cee3eabf227ecbccdf4 Mon Sep 17 00:00:00 2001
From: Mumtahin Farabi <mfarabi619@gmail.com>
Date: Sat, 14 Dec 2024 14:11:26 -0500
Subject: [PATCH] feat(libs/magic-ui/rainbow-button): add component

---
 .../components/ui/rainbow-button.stories.tsx  | 21 ++++++++++++
 .../magic-ui/components/ui/rainbow-button.tsx | 34 +++++++++++++++++++
 libs/shared/config/tailwind/shadcn.ts         | 12 +++++++
 libs/shared/ui/global.css                     |  5 +++
 4 files changed, 72 insertions(+)
 create mode 100644 libs/external/magic-ui/components/ui/rainbow-button.stories.tsx
 create mode 100644 libs/external/magic-ui/components/ui/rainbow-button.tsx

diff --git a/libs/external/magic-ui/components/ui/rainbow-button.stories.tsx b/libs/external/magic-ui/components/ui/rainbow-button.stories.tsx
new file mode 100644
index 00000000..4eb20e41
--- /dev/null
+++ b/libs/external/magic-ui/components/ui/rainbow-button.stories.tsx
@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { RainbowButton } from './rainbow-button'
+
+const meta: Meta = {
+  title: 'Magic UI/Rainbow Button',
+  component: RainbowButton,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  args: {
+    children: 'Button',
+  },
+}
+
+export default meta
+
+type Story = StoryObj
+
+export const Default: Story = {
+}
diff --git a/libs/external/magic-ui/components/ui/rainbow-button.tsx b/libs/external/magic-ui/components/ui/rainbow-button.tsx
new file mode 100644
index 00000000..ded63a58
--- /dev/null
+++ b/libs/external/magic-ui/components/ui/rainbow-button.tsx
@@ -0,0 +1,34 @@
+import { cn } from '@shadcn/lib/utils'
+
+import React from 'react'
+
+interface RainbowButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {}
+
+export function RainbowButton({
+  children,
+  className,
+  ...props
+}: RainbowButtonProps) {
+  return (
+    <button
+      className={cn(
+        'group relative inline-flex h-11 animate-rainbow cursor-pointer items-center justify-center rounded-xl border-0 bg-[length:200%] px-8 py-2 font-medium text-primary-foreground transition-colors [background-clip:padding-box,border-box,border-box] [background-origin:border-box] [border:calc(0.08*1rem)_solid_transparent] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',
+
+        // before styles
+        'before:absolute before:bottom-[-20%] before:left-1/2 before:z-0 before:h-1/5 before:w-3/5 before:-translate-x-1/2 before:animate-rainbow before:bg-[linear-gradient(90deg,hsl(var(--color-1)),hsl(var(--color-5)),hsl(var(--color-3)),hsl(var(--color-4)),hsl(var(--color-2)))] before:[filter:blur(calc(0.8*1rem))]',
+
+        // light mode colors
+        'bg-[linear-gradient(#121213,#121213),linear-gradient(#121213_50%,rgba(18,18,19,0.6)_80%,rgba(18,18,19,0)),linear-gradient(90deg,hsl(var(--color-1)),hsl(var(--color-5)),hsl(var(--color-3)),hsl(var(--color-4)),hsl(var(--color-2)))]',
+
+        // dark mode colors
+        'dark:bg-[linear-gradient(#fff,#fff),linear-gradient(#fff_50%,rgba(255,255,255,0.6)_80%,rgba(0,0,0,0)),linear-gradient(90deg,hsl(var(--color-1)),hsl(var(--color-5)),hsl(var(--color-3)),hsl(var(--color-4)),hsl(var(--color-2)))]',
+
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </button>
+  )
+}
diff --git a/libs/shared/config/tailwind/shadcn.ts b/libs/shared/config/tailwind/shadcn.ts
index e1eed8fb..fe0022f1 100644
--- a/libs/shared/config/tailwind/shadcn.ts
+++ b/libs/shared/config/tailwind/shadcn.ts
@@ -51,6 +51,13 @@ export function buildConfig(
             DEFAULT: 'hsl(var(--card))',
             foreground: 'hsl(var(--card-foreground))',
           },
+          colors: {
+            'color-1': 'hsl(var(--color-1))',
+            'color-2': 'hsl(var(--color-2))',
+            'color-3': 'hsl(var(--color-3))',
+            'color-4': 'hsl(var(--color-4))',
+            'color-5': 'hsl(var(--color-5))',
+          },
         },
         borderRadius: {
           lg: `var(--radius)`,
@@ -76,11 +83,16 @@ export function buildConfig(
                 'rotate(360deg) translateY(calc(var(--radius) * 1px)) rotate(-360deg)',
             },
           },
+          'rainbow': {
+            '0%': { 'background-position': '0%' },
+            '100%': { 'background-position': '200%' },
+          },
         },
         animation: {
           'accordion-down': 'accordion-down 0.2s ease-out',
           'accordion-up': 'accordion-up 0.2s ease-out',
           'orbit': 'orbit calc(var(--duration)*1s) linear infinite',
+          'rainbow': 'rainbow var(--speed, 2s) infinite linear',
         },
       },
     },
diff --git a/libs/shared/ui/global.css b/libs/shared/ui/global.css
index f9615ca2..7f87a761 100644
--- a/libs/shared/ui/global.css
+++ b/libs/shared/ui/global.css
@@ -32,6 +32,11 @@
     --radius: 0.5rem;
     --g-keyboardblack-start: 0 0% 5%;
     --light-black: 0 0% 0% / 5%;
+    --color-1: 0 100% 63%;
+    --color-2: 270 100% 63%;
+    --color-3: 210 100% 63%;
+    --color-4: 195 100% 63%;
+    --color-5: 90 100% 63%;
   }
 
   .dark {