first commit

app/api-docs/page.tsx

@@ -0,0 +1,318 @@
+"use client";
+
+import Link from "next/link";
+
+export default function ApiDocsPage() {
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-purple-50 dark:from-zinc-900 dark:via-black dark:to-zinc-900">
+      <div className="mx-auto max-w-5xl px-4 py-12">
+        {/* Header */}
+        <div className="mb-8 flex items-center justify-between">
+          <Link
+            href="/"
+            className="flex items-center gap-2 text-blue-600 hover:text-blue-700 dark:text-blue-400"
+          >
+            <svg
+              className="h-5 w-5"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M10 19l-7-7m0 0l7-7m-7 7h18"
+              />
+            </svg>
+            Ana Sayfa
+          </Link>
+        </div>
+
+        {/* Title */}
+        <div className="mb-12 text-center">
+          <h1 className="mb-4 bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-5xl font-bold text-transparent dark:from-blue-400 dark:to-purple-400">
+            API Dokümantasyonu
+          </h1>
+          <p className="text-xl text-gray-600 dark:text-gray-300">
+            Image Manipulation API - REST API Kullanım Kılavuzu
+          </p>
+        </div>
+
+        {/* Content */}
+        <div className="space-y-8">
+          {/* Base URL */}
+          <section className="rounded-xl bg-white p-6 shadow-lg dark:bg-zinc-800/50">
+            <h2 className="mb-4 text-2xl font-bold text-gray-900 dark:text-white">
+              Base URL
+            </h2>
+            <div className="rounded-lg bg-gray-100 p-4 dark:bg-zinc-900">
+              <code className="text-blue-600 dark:text-blue-400">
+                https://v2.beyhano.com.tr
+              </code>
+            </div>
+          </section>
+
+          {/* Authentication */}
+          <section className="rounded-xl bg-white p-6 shadow-lg dark:bg-zinc-800/50">
+            <h2 className="mb-4 text-2xl font-bold text-gray-900 dark:text-white">
+              Authentication
+            </h2>
+            <p className="mb-4 text-gray-600 dark:text-gray-300">
+              İki yöntem desteklenir: <strong>JWT</strong> (login/register ile alınan token) veya
+              hesabınız için oluşturduğunuz <strong>API anahtarı</strong> (
+              <code className="text-sm">img_</code> ile başlar). İkisi de aynı header ile
+              gönderilir:
+            </p>
+            <div className="rounded-lg bg-gray-100 p-4 dark:bg-zinc-900">
+              <code className="text-sm text-gray-800 dark:text-gray-200">
+                Authorization: Bearer &lt;jwt_token_veya_img_..._api_key&gt;
+              </code>
+            </div>
+            <p className="mt-4 text-gray-600 dark:text-gray-300">
+              API anahtarını web arayüzünde profil sayfasından oluşturabilirsiniz; isteğe bağlı
+              gün sınırı koyabilir veya süresiz bırakabilirsiniz. Admin, kullanıcı anahtarlarının
+              süresini panelden güncelleyebilir.
+            </p>
+          </section>
+
+          {/* Endpoints */}
+          <section className="rounded-xl bg-white p-6 shadow-lg dark:bg-zinc-800/50">
+            <h2 className="mb-6 text-2xl font-bold text-gray-900 dark:text-white">
+              Endpoints
+            </h2>
+
+            {/* Register */}
+            <div className="mb-8 border-l-4 border-green-500 pl-4">
+              <div className="mb-2 flex items-center gap-2">
+                <span className="rounded bg-green-100 px-2 py-1 text-xs font-semibold text-green-800 dark:bg-green-900/30 dark:text-green-400">
+                  POST
+                </span>
+                <code className="text-sm font-mono text-gray-700 dark:text-gray-300">
+                  /api/v1/auth/register
+                </code>
+              </div>
+              <p className="mb-3 text-gray-600 dark:text-gray-400">
+                Yeni kullanıcı kaydı oluşturur ve JWT token döner.
+              </p>
+              <div className="rounded-lg bg-gray-100 p-4 dark:bg-zinc-900">
+                <pre className="text-sm text-gray-800 dark:text-gray-200">
+{`{
+  "email": "user@example.com",
+  "password": "minimum8karakter",
+  "name": "Kullanıcı Adı"
+}`}
+                </pre>
+              </div>
+            </div>
+
+            {/* Login */}
+            <div className="mb-8 border-l-4 border-blue-500 pl-4">
+              <div className="mb-2 flex items-center gap-2">
+                <span className="rounded bg-blue-100 px-2 py-1 text-xs font-semibold text-blue-800 dark:bg-blue-900/30 dark:text-blue-400">
+                  POST
+                </span>
+                <code className="text-sm font-mono text-gray-700 dark:text-gray-300">
+                  /api/v1/auth/login
+                </code>
+              </div>
+              <p className="mb-3 text-gray-600 dark:text-gray-400">
+                Mevcut kullanıcı ile giriş yapar ve JWT token döner.
+              </p>
+              <div className="rounded-lg bg-gray-100 p-4 dark:bg-zinc-900">
+                <pre className="text-sm text-gray-800 dark:text-gray-200">
+{`{
+  "email": "user@example.com",
+  "password": "minimum8karakter"
+}`}
+                </pre>
+              </div>
+            </div>
+
+            {/* API Keys */}
+            <div className="mb-8 border-l-4 border-teal-500 pl-4">
+              <div className="mb-2 flex flex-wrap items-center gap-2">
+                <span className="rounded bg-teal-100 px-2 py-1 text-xs font-semibold text-teal-800 dark:bg-teal-900/30 dark:text-teal-400">
+                  GET
+                </span>
+                <code className="text-sm font-mono text-gray-700 dark:text-gray-300">
+                  /api/v1/api-keys
+                </code>
+              </div>
+              <p className="mb-2 text-gray-600 dark:text-gray-400">
+                Oturum veya Bearer ile: kendi API anahtarlarınızı listeler (tam değer dönmez).
+              </p>
+              <div className="mb-4 flex flex-wrap items-center gap-2">
+                <span className="rounded bg-teal-100 px-2 py-1 text-xs font-semibold text-teal-800 dark:bg-teal-900/30 dark:text-teal-400">
+                  POST
+                </span>
+                <code className="text-sm font-mono text-gray-700 dark:text-gray-300">
+                  /api/v1/api-keys
+                </code>
+              </div>
+              <p className="text-gray-600 dark:text-gray-400">
+                Body:{" "}
+                <code className="text-xs">
+                  {`{ "name": "Etiket", "expiresInDays": 30 }`}
+                </code>{" "}
+                — <code className="text-xs">expiresInDays</code> yok/null/0 ise süresiz.
+                Yanıtta tam anahtar yalnızca bir kez gelir.
+              </p>
+            </div>
+
+            {/* Upload Image */}
+            <div className="mb-8 border-l-4 border-purple-500 pl-4">
+              <div className="mb-2 flex items-center gap-2">
+                <span className="rounded bg-purple-100 px-2 py-1 text-xs font-semibold text-purple-800 dark:bg-purple-900/30 dark:text-purple-400">
+                  POST
+                </span>
+                <code className="text-sm font-mono text-gray-700 dark:text-gray-300">
+                  /api/v1/images/upload
+                </code>
+              </div>
+              <p className="mb-3 text-gray-600 dark:text-gray-400">
+                Resim yükler, belirtilen boyut/kalite/formatta işler ve kaydeder. (multipart/form-data)
+              </p>
+              <div className="space-y-2 text-sm text-gray-600 dark:text-gray-400">
+                <div><strong>file</strong> (required): Resim dosyası (max 10MB)</div>
+                <div><strong>width</strong> (optional): Genişlik (px), default: 800</div>
+                <div><strong>height</strong> (optional): Yükseklik (px), default: 600</div>
+                <div><strong>quality</strong> (optional): Kalite (1-100), default: 90</div>
+                <div><strong>format</strong> (optional): jpeg, png, webp, avif</div>
+              </div>
+            </div>
+
+            {/* List Images */}
+            <div className="mb-8 border-l-4 border-yellow-500 pl-4">
+              <div className="mb-2 flex items-center gap-2">
+                <span className="rounded bg-yellow-100 px-2 py-1 text-xs font-semibold text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400">
+                  GET
+                </span>
+                <code className="text-sm font-mono text-gray-700 dark:text-gray-300">
+                  /api/v1/images
+                </code>
+              </div>
+              <p className="text-gray-600 dark:text-gray-400">
+                Kullanıcının tüm resimlerini listeler.
+              </p>
+            </div>
+
+            {/* Delete Image */}
+            <div className="border-l-4 border-red-500 pl-4">
+              <div className="mb-2 flex items-center gap-2">
+                <span className="rounded bg-red-100 px-2 py-1 text-xs font-semibold text-red-800 dark:bg-red-900/30 dark:text-red-400">
+                  DELETE
+                </span>
+                <code className="text-sm font-mono text-gray-700 dark:text-gray-300">
+                  /api/v1/images/:id
+                </code>
+              </div>
+              <p className="text-gray-600 dark:text-gray-400">
+                Belirtilen ID'ye sahip resmi siler.
+              </p>
+            </div>
+          </section>
+
+          {/* Example Code */}
+          <section className="rounded-xl bg-white p-6 shadow-lg dark:bg-zinc-800/50">
+            <h2 className="mb-4 text-2xl font-bold text-gray-900 dark:text-white">
+              Örnek Kullanım (JavaScript)
+            </h2>
+            <div className="rounded-lg bg-gray-100 p-4 dark:bg-zinc-900">
+              <pre className="overflow-x-auto text-sm text-gray-800 dark:text-gray-200">
+{`// 1. Kayıt ol
+const registerResponse = await fetch(
+  'https://image.beyhano.com.tr/api/v1/auth/register',
+  {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({
+      email: 'user@example.com',
+      password: 'securepassword123',
+      name: 'Kullanıcı'
+    })
+  }
+);
+const { data } = await registerResponse.json();
+const token = data.accessToken;
+
+// 2. Resim yükle
+const formData = new FormData();
+formData.append('file', fileInput.files[0]);
+formData.append('width', '1920');
+formData.append('quality', '85');
+formData.append('format', 'webp');
+
+const uploadResponse = await fetch(
+  'https://image.beyhano.com.tr/api/v1/images/upload',
+  {
+    method: 'POST',
+    headers: { 'Authorization': \`Bearer \${token}\` },
+    body: formData
+  }
+);
+const uploadData = await uploadResponse.json();
+console.log('URL:', uploadData.data.image.url);`}
+              </pre>
+            </div>
+          </section>
+
+          {/* Features */}
+          <section className="rounded-xl bg-white p-6 shadow-lg dark:bg-zinc-800/50">
+            <h2 className="mb-4 text-2xl font-bold text-gray-900 dark:text-white">
+              Özellikler ve Limitler
+            </h2>
+            <div className="grid gap-4 sm:grid-cols-2">
+              <div>
+                <h3 className="mb-2 font-semibold text-gray-900 dark:text-white">
+                  ✅ Desteklenen Formatlar
+                </h3>
+                <ul className="space-y-1 text-gray-600 dark:text-gray-400">
+                  <li>• JPEG / JPG</li>
+                  <li>• PNG</li>
+                  <li>• WebP</li>
+                  <li>• AVIF</li>
+                  <li>• GIF</li>
+                </ul>
+              </div>
+              <div>
+                <h3 className="mb-2 font-semibold text-gray-900 dark:text-white">
+                  ⚙️ Limitler
+                </h3>
+                <ul className="space-y-1 text-gray-600 dark:text-gray-400">
+                  <li>• Max dosya: 10MB</li>
+                  <li>• Max boyut: 10000x10000 px</li>
+                  <li>• Token süresi: 7 gün</li>
+                  <li>• HTTPS zorunlu (production)</li>
+                </ul>
+              </div>
+            </div>
+          </section>
+
+          {/* Download Full Docs */}
+          <section className="rounded-xl bg-gradient-to-r from-blue-600 to-purple-600 p-6 text-center text-white shadow-lg">
+            <h3 className="mb-2 text-xl font-bold">Detaylı Dokümantasyon</h3>
+            <p className="mb-4">
+              Tüm endpoint'ler, hata kodları ve örnekler için tam dokümantasyonu indirin.
+            </p>
+            <a
+              href="https://github.com/yourusername/image-api"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline-flex items-center gap-2 rounded-full bg-white px-6 py-3 font-semibold text-blue-600 transition-transform hover:scale-105"
+            >
+              <svg
+                className="h-5 w-5"
+                fill="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
+              </svg>
+              GitHub'da Görüntüle
+            </a>
+          </section>
+        </div>
+      </div>
+    </div>
+  );
+}