diff --git a/apps/saladeaula.digital/app/routes/layout.tsx b/apps/saladeaula.digital/app/routes/layout.tsx
index d2d25ea..55c07db 100644
--- a/apps/saladeaula.digital/app/routes/layout.tsx
+++ b/apps/saladeaula.digital/app/routes/layout.tsx
@@ -13,7 +13,7 @@ import { authMiddleware } from '@repo/auth/middleware/auth'
import { ModeToggle, ThemedImage } from '@repo/ui/components/dark-mode'
import { NavUser } from '@repo/ui/components/nav-user'
import { Button } from '@repo/ui/components/ui/button'
-import { HoverBorderGradient } from '@repo/ui/components/ui/hover-border-gradient'
+import { ShineBorder } from '@repo/ui/components/ui/shine-border'
import {
NavigationMenu,
NavigationMenuLink,
@@ -142,9 +142,13 @@ export default function Component({
-
+
+
+
diff --git a/package-lock.json b/package-lock.json
index 5a64681..ee1cdd5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1331,7 +1331,6 @@
"cpu": [
"x64"
],
- "dev": true,
"license": "Apache-2.0",
"optional": true,
"os": [
@@ -1348,7 +1347,6 @@
"cpu": [
"arm64"
],
- "dev": true,
"license": "Apache-2.0",
"optional": true,
"os": [
@@ -1365,7 +1363,6 @@
"cpu": [
"x64"
],
- "dev": true,
"license": "Apache-2.0",
"optional": true,
"os": [
@@ -1382,7 +1379,6 @@
"cpu": [
"arm64"
],
- "dev": true,
"license": "Apache-2.0",
"optional": true,
"os": [
@@ -1399,7 +1395,6 @@
"cpu": [
"x64"
],
- "dev": true,
"license": "Apache-2.0",
"optional": true,
"os": [
@@ -1945,7 +1940,6 @@
"cpu": [
"arm64"
],
- "dev": true,
"license": "Apache-2.0",
"optional": true,
"os": [
@@ -1968,7 +1962,6 @@
"cpu": [
"x64"
],
- "dev": true,
"license": "Apache-2.0",
"optional": true,
"os": [
@@ -1991,7 +1984,6 @@
"cpu": [
"arm64"
],
- "dev": true,
"license": "LGPL-3.0-or-later",
"optional": true,
"os": [
@@ -2008,7 +2000,6 @@
"cpu": [
"x64"
],
- "dev": true,
"license": "LGPL-3.0-or-later",
"optional": true,
"os": [
@@ -2025,7 +2016,6 @@
"cpu": [
"arm"
],
- "dev": true,
"license": "LGPL-3.0-or-later",
"optional": true,
"os": [
@@ -2042,7 +2032,6 @@
"cpu": [
"arm64"
],
- "dev": true,
"license": "LGPL-3.0-or-later",
"optional": true,
"os": [
@@ -2059,7 +2048,6 @@
"cpu": [
"s390x"
],
- "dev": true,
"license": "LGPL-3.0-or-later",
"optional": true,
"os": [
@@ -2076,7 +2064,6 @@
"cpu": [
"x64"
],
- "dev": true,
"license": "LGPL-3.0-or-later",
"optional": true,
"os": [
@@ -2093,7 +2080,6 @@
"cpu": [
"arm64"
],
- "dev": true,
"license": "LGPL-3.0-or-later",
"optional": true,
"os": [
@@ -2110,7 +2096,6 @@
"cpu": [
"x64"
],
- "dev": true,
"license": "LGPL-3.0-or-later",
"optional": true,
"os": [
@@ -2127,7 +2112,6 @@
"cpu": [
"arm"
],
- "dev": true,
"license": "Apache-2.0",
"optional": true,
"os": [
@@ -2150,7 +2134,6 @@
"cpu": [
"arm64"
],
- "dev": true,
"license": "Apache-2.0",
"optional": true,
"os": [
@@ -2173,7 +2156,6 @@
"cpu": [
"s390x"
],
- "dev": true,
"license": "Apache-2.0",
"optional": true,
"os": [
@@ -2196,7 +2178,6 @@
"cpu": [
"x64"
],
- "dev": true,
"license": "Apache-2.0",
"optional": true,
"os": [
@@ -2219,7 +2200,6 @@
"cpu": [
"arm64"
],
- "dev": true,
"license": "Apache-2.0",
"optional": true,
"os": [
@@ -2242,7 +2222,6 @@
"cpu": [
"x64"
],
- "dev": true,
"license": "Apache-2.0",
"optional": true,
"os": [
@@ -2265,7 +2244,6 @@
"cpu": [
"wasm32"
],
- "dev": true,
"license": "Apache-2.0 AND LGPL-3.0-or-later AND MIT",
"optional": true,
"dependencies": {
@@ -2285,7 +2263,6 @@
"cpu": [
"ia32"
],
- "dev": true,
"license": "Apache-2.0 AND LGPL-3.0-or-later",
"optional": true,
"os": [
@@ -2305,7 +2282,6 @@
"cpu": [
"x64"
],
- "dev": true,
"license": "Apache-2.0 AND LGPL-3.0-or-later",
"optional": true,
"os": [
@@ -6971,7 +6947,6 @@
"cpu": [
"ppc64"
],
- "dev": true,
"license": "MIT",
"optional": true,
"os": [
@@ -6988,7 +6963,6 @@
"cpu": [
"arm"
],
- "dev": true,
"license": "MIT",
"optional": true,
"os": [
@@ -7005,7 +6979,6 @@
"cpu": [
"arm64"
],
- "dev": true,
"license": "MIT",
"optional": true,
"os": [
@@ -7022,7 +6995,6 @@
"cpu": [
"x64"
],
- "dev": true,
"license": "MIT",
"optional": true,
"os": [
@@ -7039,7 +7011,6 @@
"cpu": [
"arm64"
],
- "dev": true,
"license": "MIT",
"optional": true,
"os": [
@@ -7056,7 +7027,6 @@
"cpu": [
"x64"
],
- "dev": true,
"license": "MIT",
"optional": true,
"os": [
@@ -7073,7 +7043,6 @@
"cpu": [
"arm64"
],
- "dev": true,
"license": "MIT",
"optional": true,
"os": [
@@ -7090,7 +7059,6 @@
"cpu": [
"x64"
],
- "dev": true,
"license": "MIT",
"optional": true,
"os": [
@@ -7107,7 +7075,6 @@
"cpu": [
"arm"
],
- "dev": true,
"license": "MIT",
"optional": true,
"os": [
@@ -7124,7 +7091,6 @@
"cpu": [
"arm64"
],
- "dev": true,
"license": "MIT",
"optional": true,
"os": [
@@ -7141,7 +7107,6 @@
"cpu": [
"ia32"
],
- "dev": true,
"license": "MIT",
"optional": true,
"os": [
@@ -7158,7 +7123,6 @@
"cpu": [
"loong64"
],
- "dev": true,
"license": "MIT",
"optional": true,
"os": [
@@ -7175,7 +7139,6 @@
"cpu": [
"mips64el"
],
- "dev": true,
"license": "MIT",
"optional": true,
"os": [
@@ -7192,7 +7155,6 @@
"cpu": [
"ppc64"
],
- "dev": true,
"license": "MIT",
"optional": true,
"os": [
@@ -7209,7 +7171,6 @@
"cpu": [
"riscv64"
],
- "dev": true,
"license": "MIT",
"optional": true,
"os": [
@@ -7226,7 +7187,6 @@
"cpu": [
"s390x"
],
- "dev": true,
"license": "MIT",
"optional": true,
"os": [
@@ -7243,7 +7203,6 @@
"cpu": [
"x64"
],
- "dev": true,
"license": "MIT",
"optional": true,
"os": [
@@ -7260,7 +7219,6 @@
"cpu": [
"arm64"
],
- "dev": true,
"license": "MIT",
"optional": true,
"os": [
@@ -7277,7 +7235,6 @@
"cpu": [
"x64"
],
- "dev": true,
"license": "MIT",
"optional": true,
"os": [
@@ -7294,7 +7251,6 @@
"cpu": [
"arm64"
],
- "dev": true,
"license": "MIT",
"optional": true,
"os": [
@@ -7311,7 +7267,6 @@
"cpu": [
"x64"
],
- "dev": true,
"license": "MIT",
"optional": true,
"os": [
@@ -7328,7 +7283,6 @@
"cpu": [
"arm64"
],
- "dev": true,
"license": "MIT",
"optional": true,
"os": [
@@ -7345,7 +7299,6 @@
"cpu": [
"x64"
],
- "dev": true,
"license": "MIT",
"optional": true,
"os": [
@@ -7362,7 +7315,6 @@
"cpu": [
"arm64"
],
- "dev": true,
"license": "MIT",
"optional": true,
"os": [
@@ -7379,7 +7331,6 @@
"cpu": [
"ia32"
],
- "dev": true,
"license": "MIT",
"optional": true,
"os": [
@@ -7396,7 +7347,6 @@
"cpu": [
"x64"
],
- "dev": true,
"license": "MIT",
"optional": true,
"os": [
diff --git a/packages/ui/components.json b/packages/ui/components.json
index 2d24c0b..d0454f4 100644
--- a/packages/ui/components.json
+++ b/packages/ui/components.json
@@ -19,6 +19,6 @@
"hooks": "@/hooks"
},
"registries": {
- "@aceternity": "https://ui.aceternity.com/registry/{name}.json"
+ "@magicui": "https://magicui.design/r/{name}.json"
}
}
diff --git a/packages/ui/src/components/ui/hover-border-gradient.tsx b/packages/ui/src/components/ui/hover-border-gradient.tsx
deleted file mode 100644
index 1afdd19..0000000
--- a/packages/ui/src/components/ui/hover-border-gradient.tsx
+++ /dev/null
@@ -1,99 +0,0 @@
-"use client";
-import React, { useState, useEffect, useRef } from "react";
-
-import { motion } from "motion/react";
-import { cn } from "@/lib/utils";
-
-type Direction = "TOP" | "LEFT" | "BOTTOM" | "RIGHT";
-
-export function HoverBorderGradient({
- children,
- containerClassName,
- className,
- as: Tag = "button",
- duration = 1,
- clockwise = true,
- ...props
-}: React.PropsWithChildren<
- {
- as?: React.ElementType;
- containerClassName?: string;
- className?: string;
- duration?: number;
- clockwise?: boolean;
- } & React.HTMLAttributes
->) {
- const [hovered, setHovered] = useState(false);
- const [direction, setDirection] = useState("TOP");
-
- const rotateDirection = (currentDirection: Direction): Direction => {
- const directions: Direction[] = ["TOP", "LEFT", "BOTTOM", "RIGHT"];
- const currentIndex = directions.indexOf(currentDirection);
- const nextIndex = clockwise
- ? (currentIndex - 1 + directions.length) % directions.length
- : (currentIndex + 1) % directions.length;
- return directions[nextIndex];
- };
-
- const movingMap: Record = {
- TOP: "radial-gradient(20.7% 50% at 50% 0%, hsl(0, 0%, 100%) 0%, rgba(255, 255, 255, 0) 100%)",
- LEFT: "radial-gradient(16.6% 43.1% at 0% 50%, hsl(0, 0%, 100%) 0%, rgba(255, 255, 255, 0) 100%)",
- BOTTOM:
- "radial-gradient(20.7% 50% at 50% 100%, hsl(0, 0%, 100%) 0%, rgba(255, 255, 255, 0) 100%)",
- RIGHT:
- "radial-gradient(16.2% 41.199999999999996% at 100% 50%, hsl(0, 0%, 100%) 0%, rgba(255, 255, 255, 0) 100%)",
- };
-
- const highlight =
- "radial-gradient(75% 181.15942028985506% at 50% 50%, #3275F8 0%, rgba(255, 255, 255, 0) 100%)";
-
- useEffect(() => {
- if (!hovered) {
- const interval = setInterval(() => {
- setDirection((prevState) => rotateDirection(prevState));
- }, duration * 1000);
- return () => clearInterval(interval);
- }
- }, [hovered]);
- return (
- ) => {
- setHovered(true);
- }}
- onMouseLeave={() => setHovered(false)}
- className={cn(
- "relative flex rounded-full border content-center bg-black/20 hover:bg-black/10 transition duration-500 dark:bg-white/20 items-center flex-col flex-nowrap gap-10 h-min justify-center overflow-visible p-px decoration-clone w-fit",
- containerClassName
- )}
- {...props}
- >
-
- {children}
-
-
-
-
- );
-}
diff --git a/packages/ui/src/components/ui/shine-border.tsx b/packages/ui/src/components/ui/shine-border.tsx
new file mode 100644
index 0000000..1a55bfc
--- /dev/null
+++ b/packages/ui/src/components/ui/shine-border.tsx
@@ -0,0 +1,63 @@
+"use client"
+
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+interface ShineBorderProps extends React.HTMLAttributes {
+ /**
+ * Width of the border in pixels
+ * @default 1
+ */
+ borderWidth?: number
+ /**
+ * Duration of the animation in seconds
+ * @default 14
+ */
+ duration?: number
+ /**
+ * Color of the border, can be a single color or an array of colors
+ * @default "#000000"
+ */
+ shineColor?: string | string[]
+}
+
+/**
+ * Shine Border
+ *
+ * An animated background border effect component with configurable properties.
+ */
+export function ShineBorder({
+ borderWidth = 1,
+ duration = 14,
+ shineColor = "#000000",
+ className,
+ style,
+ ...props
+}: ShineBorderProps) {
+ return (
+
+ )
+}
diff --git a/packages/ui/src/globals.css b/packages/ui/src/globals.css
index 95947e7..32da7c4 100644
--- a/packages/ui/src/globals.css
+++ b/packages/ui/src/globals.css
@@ -57,6 +57,22 @@ body {
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
--color-sidebar-border: var(--sidebar-border);
--color-sidebar-ring: var(--sidebar-ring);
+ --animate-shine:
+ shine var(--duration) infinite linear;
+ @keyframes shine {
+ 0% {
+ background-position:
+ 0% 0%;
+ }
+ 50% {
+ background-position:
+ 100% 100%;
+ }
+ to {
+ background-position:
+ 0% 0%;
+ }
+ }
}
:root {
@@ -135,4 +151,4 @@ body {
body {
@apply bg-background text-foreground;
}
-}
+}
\ No newline at end of file