vit-design-webapp

'use client';

import dynamic from 'next/dynamic';
import { Toolbar } from '@/components/toolbar/Toolbar';
import { SelectionToolbar } from '@/components/toolbar/SelectionToolbar';
import { Sidebar } from '@/components/sidebar/Sidebar';
import { PropertiesPanel } from '@/components/toolbar/PropertiesPanel';
import { useKeyboardShortcuts } from '@/lib/hooks/useKeyboardShortcuts';

// Dynamic import Canvas to avoid SSR issues with Konva
const Canvas = dynamic(() => import('@/components/canvas/Canvas').then((mod) => mod.Canvas), {
  ssr: false,
  loading: () => (
    <div className="flex-1 flex items-center justify-center bg-neutral-900">
      <div className="flex flex-col items-center gap-4">
        <div className="w-12 h-12 border-4 border-indigo-500/30 border-t-indigo-500 rounded-full animate-spin" />
        <p className="text-neutral-400 text-sm">Loading editor...</p>
      </div>
    </div>
  ),
});

export default function Home() {
  // Initialize keyboard shortcuts
  useKeyboardShortcuts();

  return (
    <main className="h-screen flex flex-col bg-neutral-950 text-white overflow-hidden">
      {/* Header */}
      <header className="h-14 bg-neutral-900 border-b border-neutral-800 flex items-center justify-between px-4">
        <div className="flex items-center gap-3">
          <div className="w-8 h-8 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-lg flex items-center justify-center">
            <span className="text-white font-bold text-sm">V</span>
          </div>
          <div>
            <h1 className="text-sm font-semibold text-white">VIT Design</h1>
            <p className="text-xs text-neutral-500">App Screenshot Studio</p>
          </div>
        </div>

        <div className="flex items-center gap-4">
          <button className="px-4 py-1.5 rounded-lg text-sm text-neutral-400 hover:text-white hover:bg-neutral-800 transition-colors">
            Help
          </button>
          <button className="px-4 py-1.5 rounded-lg text-sm bg-indigo-500 hover:bg-indigo-600 text-white transition-colors">
            Export
          </button>
        </div>
      </header>

      {/* Toolbar */}
      <Toolbar />

      {/* Selection-specific toolbar (shows when text is selected) */}
      <SelectionToolbar />

      {/* Main content */}
      <div className="flex-1 flex overflow-hidden">
        {/* Left sidebar */}
        <Sidebar />

        {/* Canvas area */}
        <Canvas />

        {/* Right properties panel */}
        <PropertiesPanel />
      </div>
    </main>
  );
}