vtorio/app/api-docs/page.tsx

import { ApiReferenceReact } from '@scalar/api-reference-react'
import '@scalar/api-reference-react/style.css'

const openApiSpec = {
  openapi: '3.0.3',
  info: {
    title: 'Vtorio API',
    version: '1.0.0',
    description: 'File upload and management API for Vtorio application',
  },
  servers: [
    {
      url: 'http://localhost:3000',
      description: 'Development server',
    },
  ],
  components: {
    schemas: {
      File: {
        type: 'object',
        properties: {
          id: { type: 'string' },
          filename: { type: 'string' },
          mimetype: { type: 'string' },
          size: { type: 'number' },
          createdAt: { type: 'string', format: 'date-time' },
          updatedAt: { type: 'string', format: 'date-time' },
        },
        required: ['id', 'filename', 'mimetype', 'size', 'createdAt'],
      },
      Error: {
        type: 'object',
        properties: {
          success: { type: 'boolean', example: false },
          error: { type: 'string' },
        },
        required: ['success', 'error'],
      },
    },
  },
  paths: {
  },
}

export default function ApiDocs() {
  return (
    <div className="min-h-screen bg-gray-50">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <div className="bg-white shadow rounded-lg">
          <div className="px-4 py-5 sm:p-6">
            <div className="mb-4">
              <h1 className="text-2xl font-bold text-gray-900">
                Vtorio API Documentation
              </h1>
              <p className="text-gray-600 mt-2">
                Interactive API documentation for file upload and management endpoints.
              </p>
            </div>
            <ApiReferenceReact
              configuration={{
                content: openApiSpec,
                theme: 'default',
                layout: 'modern'
              }}
            />
          </div>
        </div>
      </div>
    </div>
  )
}