RoundedContainerWithGradientBorder.tsx (1711B)
1 import { cn } from "@/lib/utils" 2 3 export function RoundedContainerWithGradientBorder({ className, allItemsClassName, innerContainerClassName, children }: { className?: string, allItemsClassName?: string, innerContainerClassName?: string, children: React.ReactNode }) { 4 return ( 5 <div className={cn("relative w-24 h-24 flex justify-center items-center backdrop-blur-sm", allItemsClassName, className)}> 6 <div className={cn("z-10 relative p-6 w-full h-full", innerContainerClassName)}> 7 {children} 8 </div> 9 <div className={cn("absolute z-0 w-full h-full p-[1px] rounded-2xl bg-gradient-to-tr from-gray-800 via-gray-400 to-gray-800 opacity-40 shadow-lg", allItemsClassName)}> 10 <div className={cn("w-full h-full flex justify-center items-center rounded-2xl bg-gray-900", allItemsClassName)}/> 11 </div> 12 </div> 13 ) 14 } 15 16 export function RoundedContainerWithColorGradientBorder({ className, allItemsClassName, children }: { className?: string, allItemsClassName?: string, children: React.ReactNode }) { 17 return ( 18 <div className={cn("relative w-24 h-24 flex justify-center items-center backdrop-blur-sm", allItemsClassName, className)}> 19 <div className="z-10 relative p-6 w-full h-full"> 20 {children} 21 </div> 22 <div className={cn("absolute z-0 w-full h-full p-[1px] rounded-2xl bg-gradient-to-br from-damuspink-500 via-damuspink-500/20 to-deeppurple-700 opacity-40 shadow-lg", allItemsClassName)}> 23 <div className={cn("w-full h-full flex justify-center items-center rounded-2xl bg-gray-900", allItemsClassName)}/> 24 </div> 25 </div> 26 ) 27 }