Quickstart

'use client';

import { useState } from 'react';
import dynamic from 'next/dynamic';

const ImageEditor = dynamic(
  () => import('@layermetry/media-editor').then(mod => ({ default: mod.ImageEditor })),
  { ssr: false }
);

export default function StudioPage() {
  const [file, setFile] = useState<File | null>(null);
  const [showEditor, setShowEditor] = useState(false);

  const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
    const selectedFile = e.target.files?.[0];
    if (selectedFile && selectedFile.type.startsWith('image/')) {
      setFile(selectedFile);
      setShowEditor(true);
    }
  };

  const handleExport = (result: any) => {
    console.log('Exported image:', result.base64);
    // Download or upload the result
    const link = document.createElement('a');
    link.href = result.base64;
    link.download = 'edited-image.png';
    link.click();
  };

  return (
    <div className="min-h-screen p-6">
      {!showEditor && (
        <div>
          <h1 className="text-3xl font-bold mb-4">Image Studio</h1>
          <input
            type="file"
            accept="image/*"
            onChange={handleFileSelect}
            className="mb-4"
          />
        </div>
      )}

      {showEditor && file && (
        <div className="fixed inset-0 z-50">
          <ImageEditor
            licenseKey="YOUR_LICENSE_KEY_HERE"
            apiUrl="https://localhost:3030/social"
            files={file}
            onClose={() => setShowEditor(false)}
            callback={handleExport}
          />
        </div>
      )}
    </div>
  );
}