split_components.js

const fs = require('fs');

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

// Replace synchronous imports with dynamic imports
const syncImports = [
  'import { AnimatedPremiumButton } from "@/components/landing/animated-premium-button"',
  'import DigitalHoverButton from "@/components/buttons/digital-hover-button"',
  'import AestheticGlossButton from "@/components/buttons/aesthetic-gloss-button"',
  'import NeoSlideButton from "@/components/buttons/neo-slide-button"',
  'import HapticPressButton from "@/components/buttons/haptic-press-button"',
  'import CyberRockerToggle from "@/components/buttons/cyber-rocker-toggle"',
  'import LiquidMetalButton from "@/components/buttons/liquid-metal-button"',
  'import AsciiGlitchRipple from "@/components/motion/ascii-glitch-ripple"'
];

const dynamicImports = `import dynamic from 'next/dynamic';

const AnimatedPremiumButton = dynamic(() => import('@/components/landing/animated-premium-button').then(mod => mod.AnimatedPremiumButton), { ssr: false });
const DigitalHoverButton = dynamic(() => import('@/components/buttons/digital-hover-button'));
const AestheticGlossButton = dynamic(() => import('@/components/buttons/aesthetic-gloss-button'));
const NeoSlideButton = dynamic(() => import('@/components/buttons/neo-slide-button'));
const HapticPressButton = dynamic(() => import('@/components/buttons/haptic-press-button'));
const CyberRockerToggle = dynamic(() => import('@/components/buttons/cyber-rocker-toggle'));
const LiquidMetalButton = dynamic(() => import('@/components/buttons/liquid-metal-button'), { ssr: false });
const AsciiGlitchRipple = dynamic(() => import('@/components/motion/ascii-glitch-ripple'), { ssr: false });
`;

// Remove old imports
syncImports.forEach(imp => {
  page = page.replace(imp, '');
});

// Add dynamic imports after imports block
page = page.replace(/import { Prism as SyntaxHighlighter } from "react-syntax-highlighter"\nimport { oneDark } from "react-syntax-highlighter\/dist\/esm\/styles\/prism"/, 
`import { Prism as SyntaxHighlighter } from "react-syntax-highlighter"
import { oneDark } from "react-syntax-highlighter/dist/esm/styles/prism"

${dynamicImports}`);

fs.writeFileSync(pagePath, page);