57 lines
1.6 KiB
TypeScript
57 lines
1.6 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface NeonBorderProps {
|
|
children: React.ReactNode;
|
|
className?: string;
|
|
color?: "green" | "cyan" | "purple" | "pink" | "multi";
|
|
animated?: boolean;
|
|
corners?: boolean;
|
|
}
|
|
|
|
const colorStyles = {
|
|
green: "border-[var(--color-neon-green)] shadow-[var(--glow-green)]",
|
|
cyan: "border-[var(--color-neon-cyan)] shadow-[var(--glow-cyan)]",
|
|
purple: "border-[var(--color-neon-purple)] shadow-[var(--glow-purple)]",
|
|
pink: "border-[var(--color-neon-pink)] shadow-[var(--glow-pink)]",
|
|
multi: "",
|
|
};
|
|
|
|
export function NeonBorder({
|
|
children,
|
|
className,
|
|
color = "green",
|
|
animated = false,
|
|
corners = false,
|
|
}: NeonBorderProps) {
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"relative border bg-card/50 backdrop-blur-sm",
|
|
color !== "multi" && colorStyles[color],
|
|
animated && "animate-neon-border-pulse",
|
|
corners && "corner-accent",
|
|
className
|
|
)}
|
|
>
|
|
{/* Multi-color gradient border */}
|
|
{color === "multi" && (
|
|
<div
|
|
className="absolute inset-0 -z-10 rounded-[inherit] p-[1px]"
|
|
style={{
|
|
background:
|
|
"linear-gradient(45deg, var(--color-neon-green), var(--color-neon-cyan), var(--color-neon-purple), var(--color-neon-pink))",
|
|
backgroundSize: animated ? "400% 400%" : "100% 100%",
|
|
animation: animated ? "gradient-rotate 4s linear infinite" : "none",
|
|
}}
|
|
>
|
|
<div className="h-full w-full rounded-[inherit] bg-card" />
|
|
</div>
|
|
)}
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|