update_codes.js

const fs = require('fs');
const path = require('path');

const pageTsxPath = 'frontend/app/dashboard/components/page.tsx';
let pageTsx = fs.readFileSync(pageTsxPath, 'utf8');

const digitalHoverCode = `"use client"

import React, { useState, useRef, useEffect } from 'react';

export default function DigitalHoverButton({ label = "Digital Hover" }: { label?: string }) {
  const buttonRef = useRef<HTMLButtonElement>(null);
  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });
  const [isHovered, setIsHovered] = useState(false);
  const [isPressed, setIsPressed] = useState(false);

  useEffect(() => {
    const handleMouseMove = (e: MouseEvent) => {
      if (buttonRef.current && isHovered) {
        const rect = buttonRef.current.getBoundingClientRect();
        setMousePosition({
          x: e.clientX - rect.left,
          y: e.clientY - rect.top,
        });
      }
    };

    window.addEventListener('mousemove', handleMouseMove);
    return () => window.removeEventListener('mousemove', handleMouseMove);
  }, [isHovered]);

  return (
    <div className="relative group">
      {/* Outer ambient glow that expands on hover */}
      <div 
        className={\`absolute -inset-1 bg-gradient-to-r from-zinc-200/80 via-slate-200/80 to-gray-200/80 dark:from-zinc-500/30 dark:via-slate-500/30 dark:to-gray-500/30 rounded-2xl blur-xl transition-all duration-1000 ease-out \${
          isHovered ? 'opacity-100 scale-105' : 'opacity-0 scale-90'
        }\`}
      />
      
      <button
        ref={buttonRef}
        onMouseEnter={() => setIsHovered(true)}
        onMouseLeave={() => {
          setIsHovered(false);
          setIsPressed(false);
        }}
        onMouseDown={() => setIsPressed(true)}
        onMouseUp={() => setIsPressed(false)}
        className={\`relative flex items-center justify-center gap-2 px-6 py-3 rounded-xl overflow-hidden outline-none bg-white dark:bg-[#0a0a0f] border border-zinc-200 dark:border-white/5 backdrop-blur-md transition-all duration-500 ease-[cubic-bezier(0.23,1,0.32,1)] \${
          isPressed 
            ? 'scale-[0.98] shadow-[inset_0_2px_10px_rgba(0,0,0,0.05)] dark:shadow-[inset_0_2px_10px_rgba(0,0,0,0.5)]' 
            : 'shadow-[0_2px_10px_rgba(0,0,0,0.06),inset_0_1px_0_rgba(255,255,255,1)] dark:shadow-[0_4px_24px_-8px_rgba(0,0,0,0.8),inset_0_1px_1px_rgba(255,255,255,0.05)]'
        }\`}
      >
        {/* Dynamic spotlight that follows cursor */}
        <div 
          className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none mix-blend-overlay dark:mix-blend-screen"
          style={{
            background: isHovered 
              ? \`radial-gradient(120px circle at \${mousePosition.x}px \${mousePosition.y}px, rgba(200,200,200,0.2), transparent 50%)\` 
              : 'transparent',
          }}
        />

        {/* Soft gradient background layer */}
        <div 
          className={\`absolute inset-0 bg-gradient-to-b from-black/[0.02] dark:from-white/[0.03] to-transparent pointer-events-none transition-opacity duration-500 \${
            isHovered ? 'opacity-100' : 'opacity-50'
          }\`}
        />

        {/* Top edge highlight for 3D effect */}
        <div className="absolute inset-x-4 top-0 h-px bg-gradient-to-r from-transparent via-white dark:via-white/20 to-transparent mix-blend-overlay" />
        {/* Bottom edge glow */}
        <div className={\`absolute inset-x-6 bottom-0 h-[2px] bg-gradient-to-r from-transparent via-zinc-400/40 dark:via-zinc-500/40 to-transparent blur-sm transition-opacity duration-500 \${isHovered ? 'opacity-100' : 'opacity-0'}\`} />
        <div className={\`absolute inset-x-10 bottom-0 h-px bg-gradient-to-r from-transparent via-zinc-300/50 dark:via-zinc-400/50 to-transparent transition-opacity duration-500 \${isHovered ? 'opacity-100' : 'opacity-0'}\`} />

        {/* Shine sweep effect */}
        <div 
          className="absolute top-0 bottom-0 w-32 bg-gradient-to-r from-transparent via-black/5 dark:via-white/10 to-transparent skew-x-[25deg] transition-transform duration-1000 ease-[cubic-bezier(0.16,1,0.3,1)] pointer-events-none"
          style={{
            transform: isHovered ? 'translateX(300%)' : 'translateX(-200%)'
          }}
        />

        {/* Content Container */}
        <div className="relative z-10 flex items-center justify-center">
          <span className={\`text-sm font-semibold tracking-wide transition-all duration-500 \${
            isHovered ? 'text-black dark:text-white drop-shadow-[0_0_12px_rgba(0,0,0,0.1)] dark:drop-shadow-[0_0_12px_rgba(255,255,255,0.4)]' : 'text-zinc-700 dark:text-zinc-400'
          }\`}>
           {label}
          </span>
        </div>
      </button>
    </div>
  );
}`;

const animatedPremiumCode = `"use client"

import React from "react"
import Link from "next/link"
import { Calendar } from "lucide-react"

interface AnimatedPremiumButtonProps {
  href: string
  text: string
  icon?: React.ReactNode
  onClick?: (e: React.MouseEvent) => void
}

export function AnimatedPremiumButton({
  href,
  text,
  icon = <Calendar className="size-4" />,
  onClick,
}: AnimatedPremiumButtonProps) {
  return (
    <div className="group relative overflow-hidden rounded-[13px] bg-border/20 p-[1.5px] shadow-sm transition-all hover:shadow-md dark:bg-border/40">
      {/* Animated Glow Wrapper */}
      <div
        className="absolute inset-0 z-0 opacity-80 transition-opacity duration-700 group-hover:opacity-100"
        style={{
          maskImage:
            "radial-gradient(circle at 100% 0%, black 0%, transparent 45%), radial-gradient(circle at 0% 100%, black 0%, transparent 45%)",
          WebkitMaskImage:
            "radial-gradient(circle at 100% 0%, black 0%, transparent 45%), radial-gradient(circle at 0% 100%, black 0%, transparent 45%)",
        }}
      >
        <div className="absolute inset-[-1000%] animate-[spin_6s_linear_infinite] bg-[conic-gradient(from_90deg_at_50%_50%,transparent_0%,#3b82f6_40%,transparent_80%)] dark:bg-[conic-gradient(from_90deg_at_50%_50%,transparent_0%,#ffffff_40%,transparent_80%)]" />
      </div>

      {/* Inner Button Background */}
      <div className="relative z-10 rounded-[11px] bg-background/95 backdrop-blur-sm transition-colors hover:bg-background/80">
        <Link
          href={href}
          onClick={onClick}
          className="flex h-12 items-center justify-center gap-2 rounded-[11px] px-8 text-[15px] font-medium text-foreground"
        >
          {/* Animated Icon Sliding Effect */}
          <div className="relative flex h-4 w-4 items-center justify-center overflow-hidden">
            <div className="absolute transition-transform duration-500 ease-out group-hover:-translate-y-[150%]">
              {icon}
            </div>
            <div className="absolute translate-y-[150%] transition-transform duration-500 ease-out group-hover:translate-y-0">
              {icon}
            </div>
          </div>
          <span>{text}</span>
        </Link>
      </div>
    </div>
  )
}`;

const arrDigi = digitalHoverCode.split('\n').map(l => JSON.stringify(l));
const arrAnim = animatedPremiumCode.split('\n').map(l => JSON.stringify(l));

const REPLACEMENT = `const COMPONENT_DETAILS: Record<string, { code: string, filename: string, deps: string, install: string }> = {
  'premium-glow': {
    filename: 'AnimatedPremiumButton.tsx',
    deps: 'lucide-react · next',
    install: 'npm i lucide-react',
    code: [
      ${arrAnim.join(',\n      ')}
    ].join('\\n')
  },
  'digital-hover': {
    filename: 'DigitalHoverButton.tsx',
    deps: 'react',
    install: 'npm i react',
    code: [
      ${arrDigi.join(',\n      ')}
    ].join('\\n')
  }
};`;

pageTsx = pageTsx.replace(/const PREMIUM_CODE = [\s\S]*?(?=\nconst INITIAL_COMPONENTS)/, REPLACEMENT);

// Now update the JSX to use `COMPONENT_DETAILS[viewSource]?.filename` etc.
// Replace filename
pageTsx = pageTsx.replace(
  /<span className="font-mono text-\[11px\] font-medium text-\[#8b949e\]">AnimatedPremiumButton\.tsx<\/span>/g,
  `<span className="font-mono text-[11px] font-medium text-[#8b949e]">{COMPONENT_DETAILS[viewSource || '']?.filename || 'Button.tsx'}</span>`
);

// Replace dependencies
pageTsx = pageTsx.replace(
  /<span className="font-mono text-\[9px\] text-\[#8b949e\]">lucide-react · motion<\/span>/g,
  `<span className="font-mono text-[9px] text-[#8b949e]">{COMPONENT_DETAILS[viewSource || '']?.deps || 'react'}</span>`
);

// Replace install command
pageTsx = pageTsx.replace(
  /pnpm add lucide-react motion/g,
  `{COMPONENT_DETAILS[viewSource || '']?.install || 'npm i react'}`
);

// Replace writeText argument
pageTsx = pageTsx.replace(
  /writeText\("pnpm add lucide-react motion"\)/g,
  `writeText(COMPONENT_DETAILS[viewSource || '']?.install || 'npm i react')`
);

// Replace the actual code displayed
pageTsx = pageTsx.replace(
  /\{PREMIUM_CODE\}/g,
  `{COMPONENT_DETAILS[viewSource || '']?.code || '// Component code goes here...'}`
);

// Replace the copy code argument
pageTsx = pageTsx.replace(
  /writeText\(PREMIUM_CODE\)/g,
  `writeText(COMPONENT_DETAILS[viewSource || '']?.code || '')`
);

fs.writeFileSync(pageTsxPath, pageTsx);