feat: Çözümler bölümü + mobil menü; admin parser düzeltmeleri

- Çözümler: solutions tablosu, /cozumler liste + detay sayfası, anasayfa
  bölümü, tam admin CRUD (/admin/cozumler), header & footer linkleri,
  projelerde solution_slug ilişkisi, services-grid genelleştirildi
- Mobil menü (hamburger drawer) eklendi — header artık < lg'de gezilebilir
- Site ayarları parser: textarea CRLF (\r\n) normalizasyonu — neden biz,
  süreç adımları, değerler ve SSS blokları artık doğru parçalanıyor
- homepage_faq + garanti (title/description/items) saveSiteSettings'e
  bağlandı (daha önce hiç kaydedilmiyordu)
This commit is contained in:
egecankomur
2026-06-02 18:21:58 +03:00
parent f49df9cbeb
commit 2e001680bf
21 changed files with 1191 additions and 27 deletions
@@ -0,0 +1,16 @@
import { notFound } from "next/navigation";
import { getRow } from "@/lib/data";
import { TABLES } from "@/lib/appwrite-rest";
import type { SolutionRow } from "@/lib/types";
import { SolutionForm } from "../../form";
export default async function EditSolutionPage({
params,
}: {
params: Promise<{ id: string }>;
}) {
const { id } = await params;
const solution = await getRow<SolutionRow>(TABLES.solutions, id);
if (!solution) notFound();
return <SolutionForm solution={solution} />;
}
+148
View File
@@ -0,0 +1,148 @@
import { Save } from "lucide-react";
import {
Checkbox,
Field,
FormActions,
FormShell,
GhostLink,
PageHeader,
PrimaryButton,
Textarea,
} from "@/components/admin/form";
import { MediaPicker } from "@/components/admin/media-picker";
import { RichEditor } from "@/components/admin/rich-editor";
import { saveSolution } from "@/lib/admin-actions";
import type { FaqItem, SolutionRow } from "@/lib/types";
const ICON_OPTIONS = [
"Globe",
"ShoppingCart",
"Smartphone",
"Code2",
"Users",
"TrendingUp",
"Share2",
"Megaphone",
"Layers",
];
function faqToText(items?: string[] | null): string {
if (!items) return "";
const parsed: FaqItem[] = [];
for (const raw of items) {
try {
const obj = JSON.parse(raw) as Partial<FaqItem>;
if (obj.q && obj.a) parsed.push({ q: obj.q, a: obj.a });
} catch {
/* ignore */
}
}
return parsed.map((it) => `${it.q}\n${it.a}`).join("\n---\n");
}
export function SolutionForm({ solution }: { solution?: SolutionRow }) {
return (
<div>
<PageHeader
title={solution ? "Çözümü düzenle" : "Yeni çözüm"}
backHref="/admin/cozumler"
/>
<form action={saveSolution}>
{solution && <input type="hidden" name="id" value={solution.$id} />}
<FormShell>
<div className="grid gap-5 md:grid-cols-2">
<Field label="Başlık" name="title" required defaultValue={solution?.title} />
<Field label="Slug" name="slug" defaultValue={solution?.slug} />
<Field
label="Sıra"
name="order"
type="number"
defaultValue={solution?.order ?? 0}
/>
<label className="block">
<span className="text-sm font-medium text-[var(--navy)]">İkon</span>
<select
name="icon"
defaultValue={solution?.icon ?? "Layers"}
className="mt-1.5 w-full rounded-xl border border-[var(--border)] bg-white px-4 py-2.5 text-sm outline-none focus:border-[var(--sky)] focus:ring-2 focus:ring-[var(--sky)]/20"
>
{ICON_OPTIONS.map((i) => (
<option key={i} value={i}>
{i}
</option>
))}
</select>
</label>
<MediaPicker
label="Hero görsel"
name="hero_image"
defaultValue={solution?.hero_image}
help="Detay sayfasının üst kısmında gösterilir (opsiyonel)."
/>
</div>
<div className="mt-5 space-y-5">
<Textarea
label="Kısa açıklama (kart için)"
name="description"
required
defaultValue={solution?.description}
rows={3}
help="Listede ve anasayfa kartında gösterilir."
/>
<div>
<span className="text-sm font-medium text-[var(--navy)]">
Detay içerik
</span>
<div className="mt-1.5">
<RichEditor
name="content"
defaultValue={solution?.content}
placeholder="Çözümün detaylarını anlatın… `/` ile blok ekleyin"
/>
</div>
<p className="mt-1 text-xs text-[var(--muted)]">
Çözüm detay sayfasında ana içerik olarak gösterilir.
</p>
</div>
<Textarea
label="Özellikler"
name="features"
defaultValue={solution?.features?.join(", ")}
rows={3}
placeholder="Uçtan uca kurulum, Eğitim ve devir, 1 yıl destek, …"
help="Virgülle ayırın. Detay sayfasında checklist olarak gösterilir."
/>
<Textarea
label="SSS"
name="faq"
defaultValue={faqToText(solution?.faq)}
rows={8}
placeholder={
"Soru 1?\nCevap 1 burada.\n---\nSoru 2?\nCevap 2 burada."
}
help="Her soru/cevap blokunu '---' ile ayırın. İlk satır soru, kalanı cevap."
/>
</div>
<div className="mt-5">
<Checkbox
label="Öne çıkar (Anasayfada göster)"
name="featured"
defaultChecked={solution?.featured ?? false}
/>
</div>
<FormActions>
<GhostLink href="/admin/cozumler">İptal</GhostLink>
<PrimaryButton>
<Save className="size-4" /> Kaydet
</PrimaryButton>
</FormActions>
</FormShell>
</form>
</div>
);
}
@@ -0,0 +1,5 @@
import { SolutionForm } from "../form";
export default function NewSolutionPage() {
return <SolutionForm />;
}
+80
View File
@@ -0,0 +1,80 @@
import Link from "next/link";
import { Plus, Edit } from "lucide-react";
import { PageHeader } from "@/components/admin/form";
import { DeleteButton } from "@/components/admin/delete-button";
import { listSolutions } from "@/lib/data";
import { deleteSolution } from "@/lib/admin-actions";
export default async function SolutionsAdminPage() {
const solutions = await listSolutions();
return (
<div>
<PageHeader
title="Çözümler"
description="Anasayfa ve /cozumler sayfasında gösterilen çözüm kartları."
action={
<Link
href="/admin/cozumler/new"
className="inline-flex items-center gap-2 rounded-full bg-[var(--navy)] px-4 py-2 text-sm font-medium text-white transition hover:bg-[var(--navy-700)]"
>
<Plus className="size-4" /> Yeni çözüm
</Link>
}
/>
<div className="mt-6 overflow-hidden rounded-2xl border border-[var(--border)] bg-white">
<table className="w-full text-sm">
<thead className="bg-[var(--navy-50)] text-xs uppercase tracking-wider text-[var(--muted)]">
<tr>
<th className="px-4 py-3 text-left">Sıra</th>
<th className="px-4 py-3 text-left">Başlık</th>
<th className="px-4 py-3 text-left">Slug</th>
<th className="px-4 py-3 text-left">İkon</th>
<th className="px-4 py-3 text-left">Öne çıkan</th>
<th className="px-4 py-3 text-right">İşlem</th>
</tr>
</thead>
<tbody>
{solutions.length === 0 && (
<tr>
<td colSpan={6} className="px-4 py-12 text-center text-[var(--muted)]">
Çözüm eklenmemiş.
</td>
</tr>
)}
{solutions.map((s) => (
<tr key={s.$id} className="border-t border-[var(--border)]">
<td className="px-4 py-3 text-[var(--muted)]">{s.order ?? 0}</td>
<td className="px-4 py-3 font-medium text-[var(--navy)]">{s.title}</td>
<td className="px-4 py-3 text-[var(--muted)]">{s.slug}</td>
<td className="px-4 py-3 text-[var(--muted)]">{s.icon ?? "—"}</td>
<td className="px-4 py-3">
{s.featured ? (
<span className="rounded-full bg-[var(--sky-50)] px-2 py-0.5 text-xs text-[var(--sky-600)]">
Öne çıkan
</span>
) : (
<span className="text-xs text-[var(--muted)]"></span>
)}
</td>
<td className="px-4 py-3">
<div className="flex items-center justify-end gap-2">
<Link
href={`/admin/cozumler/${s.$id}/edit`}
className="inline-flex items-center gap-1 rounded-md border border-[var(--border)] bg-white px-2.5 py-1.5 text-xs font-medium text-[var(--navy)] hover:bg-[var(--navy-50)]"
>
<Edit className="size-3.5" /> Düzenle
</Link>
<form action={deleteSolution}>
<input type="hidden" name="id" value={s.$id} />
<DeleteButton />
</form>
</div>
</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
);
}
+25 -2
View File
@@ -12,11 +12,14 @@ import {
import { MediaPicker } from "@/components/admin/media-picker";
import { RichEditor } from "@/components/admin/rich-editor";
import { saveProject } from "@/lib/admin-actions";
import { listServices } from "@/lib/data";
import { listServices, listSolutions } from "@/lib/data";
import type { ProjectRow } from "@/lib/types";
export async function ProjectForm({ project }: { project?: ProjectRow }) {
const services = await listServices();
const [services, solutions] = await Promise.all([
listServices(),
listSolutions(),
]);
return (
<div>
@@ -51,6 +54,26 @@ export async function ProjectForm({ project }: { project?: ProjectRow }) {
Bu projenin ait olduğu hizmet detay sayfasında "ilgili projeler" olarak görünür.
</span>
</label>
<label className="block">
<span className="text-sm font-medium text-[var(--navy)]">
İlgili çözüm
</span>
<select
name="solution_slug"
defaultValue={project?.solution_slug ?? ""}
className="mt-1.5 w-full rounded-xl border border-[var(--border)] bg-white px-4 py-2.5 text-sm outline-none focus:border-[var(--sky)] focus:ring-2 focus:ring-[var(--sky)]/20"
>
<option value=""> Yok </option>
{solutions.map((s) => (
<option key={s.slug} value={s.slug}>
{s.title}
</option>
))}
</select>
<span className="mt-1 block text-xs text-[var(--muted)]">
Bu projenin ait olduğu çözüm çözüm detay sayfasında "ilgili projeler" olarak görünür.
</span>
</label>
<Field label="Müşteri" name="client_name" defaultValue={project?.client_name} />
<Field label="Sektör" name="industry" defaultValue={project?.industry} />
<Field
+23
View File
@@ -231,6 +231,29 @@ export default async function SiteSettingsPage() {
</div>
</Section>
<Section
title="Çözümler bölümü başlığı"
description="Anasayfadaki çözüm kartlarının üstündeki yazı."
>
<div className="grid gap-5 md:grid-cols-3">
<Field
label="Eyebrow"
name="solutions_eyebrow"
defaultValue={s?.solutions_eyebrow}
/>
<Field
label="Başlık"
name="solutions_title"
defaultValue={s?.solutions_title}
/>
<Field
label="Açıklama"
name="solutions_description"
defaultValue={s?.solutions_description}
/>
</div>
</Section>
<Section
title="Projeler bölümü başlığı"
description="Anasayfadaki proje kartlarının üstündeki yazı."