first commit
This commit is contained in:
mstfyldz
@@ -0,0 +1,599 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState, useEffect, useMemo } from "react";
|
||||
import { JournalPost, MoodType } from "@/components/types";
|
||||
import { MOODS } from "@/components/mockData";
|
||||
import { EditPostModal } from "@/components/EditPostModal";
|
||||
import { NewPostModal } from "@/components/NewPostModal";
|
||||
import { PostDetailModal } from "@/components/PostDetailModal";
|
||||
import {
|
||||
Lock,
|
||||
User,
|
||||
KeyRound,
|
||||
LogOut,
|
||||
Plus,
|
||||
Edit3,
|
||||
Trash2,
|
||||
Eye,
|
||||
Search,
|
||||
RefreshCw,
|
||||
ShieldCheck,
|
||||
BarChart2,
|
||||
FileText,
|
||||
Heart,
|
||||
Tag,
|
||||
CheckCircle,
|
||||
AlertCircle
|
||||
} from "lucide-react";
|
||||
|
||||
export default function AdminPage() {
|
||||
// Auth state
|
||||
const [isAuthenticated, setIsAuthenticated] = useState<boolean>(false);
|
||||
const [checkingAuth, setCheckingAuth] = useState<boolean>(true);
|
||||
const [username, setUsername] = useState<string>("");
|
||||
const [password, setPassword] = useState<string>("");
|
||||
const [loginError, setLoginError] = useState<string>("");
|
||||
const [isLoggingIn, setIsLoggingIn] = useState<boolean>(false);
|
||||
|
||||
// Data state
|
||||
const [posts, setPosts] = useState<JournalPost[]>([]);
|
||||
const [loadingPosts, setLoadingPosts] = useState<boolean>(false);
|
||||
const [searchQuery, setSearchQuery] = useState<string>("");
|
||||
const [selectedMoodFilter, setSelectedMoodFilter] = useState<string>("all");
|
||||
|
||||
// Modal states
|
||||
const [editingPost, setEditingPost] = useState<JournalPost | null>(null);
|
||||
const [isNewPostOpen, setIsNewPostOpen] = useState<boolean>(false);
|
||||
const [detailPost, setDetailPost] = useState<JournalPost | null>(null);
|
||||
const [deletingId, setDeletingId] = useState<string | null>(null);
|
||||
|
||||
// Check auth status on mount
|
||||
useEffect(() => {
|
||||
async function checkAuth() {
|
||||
try {
|
||||
const res = await fetch("/api/admin/check");
|
||||
if (res.ok) {
|
||||
const data = await res.json();
|
||||
setIsAuthenticated(data.authenticated);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Auth check failed:", err);
|
||||
} finally {
|
||||
setCheckingAuth(false);
|
||||
}
|
||||
}
|
||||
checkAuth();
|
||||
}, []);
|
||||
|
||||
// Fetch posts if authenticated
|
||||
const fetchPosts = async () => {
|
||||
setLoadingPosts(true);
|
||||
try {
|
||||
const res = await fetch("/api/posts");
|
||||
if (res.ok) {
|
||||
const data = await res.json();
|
||||
setPosts(data);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Error fetching posts:", err);
|
||||
} finally {
|
||||
setLoadingPosts(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (isAuthenticated) {
|
||||
fetchPosts();
|
||||
}
|
||||
}, [isAuthenticated]);
|
||||
|
||||
// Handle Login
|
||||
const handleLogin = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setLoginError("");
|
||||
setIsLoggingIn(true);
|
||||
|
||||
try {
|
||||
const res = await fetch("/api/admin/login", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ username, password }),
|
||||
});
|
||||
|
||||
const data = await res.json();
|
||||
|
||||
if (res.ok) {
|
||||
setIsAuthenticated(true);
|
||||
setUsername("");
|
||||
setPassword("");
|
||||
} else {
|
||||
setLoginError(data.error || "Giriş başarısız oldu");
|
||||
}
|
||||
} catch (err) {
|
||||
setLoginError("Sunucuya bağlanılamadı");
|
||||
} finally {
|
||||
setIsLoggingIn(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Handle Logout
|
||||
const handleLogout = async () => {
|
||||
try {
|
||||
await fetch("/api/admin/logout", { method: "POST" });
|
||||
setIsAuthenticated(false);
|
||||
} catch (err) {
|
||||
console.error("Logout failed:", err);
|
||||
}
|
||||
};
|
||||
|
||||
// Handle Add Post
|
||||
const handleAddPost = async (newPost: JournalPost) => {
|
||||
try {
|
||||
const res = await fetch("/api/posts", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(newPost),
|
||||
});
|
||||
|
||||
if (res.ok) {
|
||||
fetchPosts();
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Error adding post:", err);
|
||||
}
|
||||
};
|
||||
|
||||
// Handle Update Post
|
||||
const handleUpdatePost = async (updatedPost: JournalPost) => {
|
||||
try {
|
||||
const res = await fetch(`/api/posts/${updatedPost.id}`, {
|
||||
method: "PUT",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(updatedPost),
|
||||
});
|
||||
|
||||
if (res.ok) {
|
||||
setPosts((prev) =>
|
||||
prev.map((p) => (p.id === updatedPost.id ? updatedPost : p))
|
||||
);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Error updating post:", err);
|
||||
}
|
||||
};
|
||||
|
||||
// Handle Delete Post
|
||||
const handleDeletePost = async (id: string) => {
|
||||
try {
|
||||
const res = await fetch(`/api/posts/${id}`, {
|
||||
method: "DELETE",
|
||||
});
|
||||
|
||||
if (res.ok) {
|
||||
setPosts((prev) => prev.filter((p) => p.id !== id));
|
||||
setDeletingId(null);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Error deleting post:", err);
|
||||
}
|
||||
};
|
||||
|
||||
// Filtered posts for admin table
|
||||
const filteredPosts = useMemo(() => {
|
||||
return posts.filter((post) => {
|
||||
if (selectedMoodFilter !== "all" && post.mood !== selectedMoodFilter) {
|
||||
return false;
|
||||
}
|
||||
if (searchQuery.trim()) {
|
||||
const q = searchQuery.toLowerCase();
|
||||
const matchesContent = post.content.toLowerCase().includes(q);
|
||||
const matchesTitle = post.title?.toLowerCase().includes(q);
|
||||
const matchesTags = post.tags.some((t) => t.toLowerCase().includes(q));
|
||||
return matchesContent || matchesTitle || matchesTags;
|
||||
}
|
||||
return true;
|
||||
});
|
||||
}, [posts, selectedMoodFilter, searchQuery]);
|
||||
|
||||
// Total likes counter
|
||||
const totalLikes = useMemo(() => {
|
||||
return posts.reduce((sum, p) => sum + (p.likes || 0), 0);
|
||||
}, [posts]);
|
||||
|
||||
if (checkingAuth) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center desk-background">
|
||||
<div className="flex items-center gap-3 text-xs font-mono text-[#52525B]">
|
||||
<span className="w-2.5 h-2.5 rounded-full bg-[#E11D48] animate-ping" />
|
||||
<span>Admin Yetkisi Kontrol Ediliyor...</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// --- LOGIN VIEW ---
|
||||
if (!isAuthenticated) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center p-4 desk-background">
|
||||
<div className="relative w-full max-w-md notebook-sheet rounded-2xl p-7 sm:p-9 shadow-2xl border border-[#18181B]/15">
|
||||
{/* Top Washi Tape */}
|
||||
<div className="washi-tape washi-tape-rose top-[-12px] left-1/2 -translate-x-1/2 w-44" />
|
||||
|
||||
{/* Header */}
|
||||
<div className="text-center mb-6 pt-2">
|
||||
<div className="w-14 h-14 rounded-full wax-seal mx-auto flex flex-col items-center justify-center text-white mb-3">
|
||||
<span className="font-heading font-black text-xl leading-none">M</span>
|
||||
<span className="text-[7px] font-mono tracking-tighter uppercase">ADM</span>
|
||||
</div>
|
||||
<h1 className="font-heading font-extrabold text-2xl text-[#18181B]">
|
||||
Yönetici Girişi
|
||||
</h1>
|
||||
<p className="text-xs font-handwritten text-[#787D89] text-lg leading-none mt-1">
|
||||
mstfyldz journal • Defter Yönetim Paneli
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Error Banner */}
|
||||
{loginError && (
|
||||
<div className="mb-5 p-3.5 rounded-xl bg-[#FFE4E6] border border-[#E11D48]/30 flex items-center gap-2.5 text-xs text-[#9F1239] font-mono">
|
||||
<AlertCircle className="w-4 h-4 shrink-0" />
|
||||
<span>{loginError}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Login Form */}
|
||||
<form onSubmit={handleLogin} className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-[11px] font-mono uppercase tracking-wider text-[#787D89] font-bold mb-1">
|
||||
Kullanıcı Adı (.env):
|
||||
</label>
|
||||
<div className="relative">
|
||||
<User className="w-4 h-4 absolute left-3 top-1/2 -translate-y-1/2 text-[#787D89]" />
|
||||
<input
|
||||
type="text"
|
||||
required
|
||||
value={username}
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
placeholder="admin"
|
||||
className="w-full pl-9 pr-3 py-2 text-sm bg-white/80 border border-[#18181B]/15 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#E11D48]/30 font-mono"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-[11px] font-mono uppercase tracking-wider text-[#787D89] font-bold mb-1">
|
||||
Şifre (.env):
|
||||
</label>
|
||||
<div className="relative">
|
||||
<KeyRound className="w-4 h-4 absolute left-3 top-1/2 -translate-y-1/2 text-[#787D89]" />
|
||||
<input
|
||||
type="password"
|
||||
required
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
placeholder="••••••••"
|
||||
className="w-full pl-9 pr-3 py-2 text-sm bg-white/80 border border-[#18181B]/15 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#E11D48]/30 font-mono"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isLoggingIn}
|
||||
className="w-full py-2.5 rounded-lg bg-[#E11D48] hover:bg-[#9F1239] text-white font-heading font-bold text-sm shadow-sm hover:shadow transition-all flex items-center justify-center gap-2 cursor-pointer mt-2"
|
||||
>
|
||||
<ShieldCheck className="w-4 h-4" />
|
||||
<span>{isLoggingIn ? "Giriş Yapılıyor..." : "Deftere Giriş Yap"}</span>
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div className="mt-6 pt-4 border-t border-[#18181B]/10 text-center">
|
||||
<p className="text-[11px] font-mono text-[#787D89]">
|
||||
Giriş bilgileri <code className="bg-[#18181B]/5 px-1 py-0.5 rounded">.env</code> içindeki <code className="text-[#E11D48]">ADMIN_USERNAME</code> ve <code className="text-[#E11D48]">ADMIN_PASSWORD</code> değişkenlerinden okunur.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// --- AUTHENTICATED DASHBOARD VIEW ---
|
||||
return (
|
||||
<div className="min-h-screen flex flex-col w-full desk-background">
|
||||
{/* Top Admin Telemetry Header */}
|
||||
<header className="w-full border-b border-[#18181B]/10 bg-[#FAF7F2]/90 backdrop-blur-md sticky top-0 z-30">
|
||||
<div className="max-w-6xl mx-auto px-4 sm:px-6 py-3 flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-8 h-8 rounded-full bg-[#E11D48] text-white flex items-center justify-center font-heading font-black text-sm shadow-xs">
|
||||
M
|
||||
</div>
|
||||
<div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="font-heading font-extrabold text-lg text-[#18181B]">
|
||||
mstfyldz admin
|
||||
</span>
|
||||
<span className="text-[10px] font-mono px-2 py-0.5 rounded bg-[#059669]/10 text-[#059669] border border-[#059669]/20 font-bold flex items-center gap-1">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-[#059669] animate-pulse" />
|
||||
YETKİLENDİRİLDİ
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3">
|
||||
<a
|
||||
href="/"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="text-xs font-mono text-[#52525B] hover:text-[#18181B] flex items-center gap-1"
|
||||
>
|
||||
<Eye className="w-3.5 h-3.5" />
|
||||
<span className="hidden sm:inline">Siteye Git</span>
|
||||
</a>
|
||||
|
||||
<button
|
||||
onClick={handleLogout}
|
||||
className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-[#FAF7F2] border border-[#18181B]/15 text-xs font-mono text-[#9F1239] hover:bg-[#FFE4E6] transition-colors cursor-pointer"
|
||||
>
|
||||
<LogOut className="w-3.5 h-3.5" />
|
||||
<span>Çıkış Yap</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Main Admin Dashboard Content */}
|
||||
<main className="flex-1 max-w-6xl w-full mx-auto px-4 sm:px-6 py-8">
|
||||
{/* Metric Cards Overview */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-8">
|
||||
<div className="notebook-sheet p-4 sm:p-5 rounded-xl border border-[#18181B]/10 flex items-center justify-between">
|
||||
<div>
|
||||
<div className="text-xs font-mono text-[#787D89] uppercase tracking-wider font-bold">
|
||||
TOPLAM KARALAMA
|
||||
</div>
|
||||
<div className="text-3xl font-heading font-black text-[#18181B] mt-1">
|
||||
{posts.length}
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-10 h-10 rounded-full bg-[#F3ECE2] text-[#18181B] flex items-center justify-center">
|
||||
<FileText className="w-5 h-5" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="notebook-sheet p-4 sm:p-5 rounded-xl border border-[#18181B]/10 flex items-center justify-between">
|
||||
<div>
|
||||
<div className="text-xs font-mono text-[#787D89] uppercase tracking-wider font-bold">
|
||||
TOPLAM BEĞENİ
|
||||
</div>
|
||||
<div className="text-3xl font-heading font-black text-[#E11D48] mt-1">
|
||||
{totalLikes}
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-10 h-10 rounded-full bg-[#FFE4E6] text-[#E11D48] flex items-center justify-center">
|
||||
<Heart className="w-5 h-5 fill-current" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="notebook-sheet p-4 sm:p-5 rounded-xl border border-[#18181B]/10 flex items-center justify-between">
|
||||
<div>
|
||||
<div className="text-xs font-mono text-[#787D89] uppercase tracking-wider font-bold">
|
||||
VERİTABANI DURUMU
|
||||
</div>
|
||||
<div className="text-sm font-mono font-bold text-[#059669] mt-1 flex items-center gap-1.5">
|
||||
<CheckCircle className="w-4 h-4" />
|
||||
<span>PostgreSQL (65.109...)</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-10 h-10 rounded-full bg-[#D1FAE5] text-[#059669] flex items-center justify-center">
|
||||
<BarChart2 className="w-5 h-5" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Controls & Search Bar */}
|
||||
<div className="notebook-sheet rounded-2xl p-5 sm:p-6 mb-6">
|
||||
<div className="flex flex-col md:flex-row items-center justify-between gap-4">
|
||||
<div>
|
||||
<h2 className="font-heading font-extrabold text-xl text-[#18181B]">
|
||||
Not & Karalama Yönetimi
|
||||
</h2>
|
||||
<p className="text-xs font-serif text-[#52525B] mt-0.5">
|
||||
PostgreSQL veritabanındaki tüm notları görüntüleyin, güncelleyin veya yeni içerik girin.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2.5 w-full md:w-auto">
|
||||
<button
|
||||
onClick={fetchPosts}
|
||||
title="Yenile"
|
||||
className="p-2 rounded-lg bg-[#FAF7F2] border border-[#18181B]/15 text-[#18181B] hover:bg-[#EFE7D6] transition-colors cursor-pointer"
|
||||
>
|
||||
<RefreshCw className={`w-4 h-4 ${loadingPosts ? "animate-spin" : ""}`} />
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => setIsNewPostOpen(true)}
|
||||
className="flex-1 md:flex-initial flex items-center justify-center gap-1.5 px-4 py-2 rounded-lg bg-[#E11D48] text-white text-xs font-heading font-bold hover:bg-[#9F1239] shadow-xs transition-colors cursor-pointer"
|
||||
>
|
||||
<Plus className="w-4 h-4" />
|
||||
<span>+ Yeni Not Ekle</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Search & Mood Filter Inputs */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-3 gap-3 mt-4 pt-4 border-t border-[#18181B]/10">
|
||||
<div className="relative sm:col-span-2">
|
||||
<Search className="w-3.5 h-3.5 absolute left-3 top-1/2 -translate-y-1/2 text-[#787D89]" />
|
||||
<input
|
||||
type="text"
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
placeholder="Başlık, içerik veya etiketlerde ara..."
|
||||
className="w-full pl-8 pr-3 py-1.5 text-xs bg-white border border-[#18181B]/15 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#E11D48]/30 font-serif"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<select
|
||||
value={selectedMoodFilter}
|
||||
onChange={(e) => setSelectedMoodFilter(e.target.value)}
|
||||
className="w-full px-3 py-1.5 text-xs bg-white border border-[#18181B]/15 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#E11D48]/30 font-mono text-[#18181B]"
|
||||
>
|
||||
{MOODS.map((m) => (
|
||||
<option key={m.id} value={m.id}>
|
||||
{m.label} ({m.stampText})
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Data Table */}
|
||||
<div className="notebook-sheet rounded-2xl overflow-hidden shadow-sm border border-[#18181B]/10">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-left border-collapse">
|
||||
<thead>
|
||||
<tr className="bg-[#F3ECE2] border-b border-[#18181B]/10 text-[11px] font-mono uppercase text-[#787D89]">
|
||||
<th className="py-3 px-4 font-bold">Format / Tür</th>
|
||||
<th className="py-3 px-4 font-bold">Tarih</th>
|
||||
<th className="py-3 px-4 font-bold">Mood</th>
|
||||
<th className="py-3 px-4 font-bold">Başlık / İçerik</th>
|
||||
<th className="py-3 px-4 font-bold">Beğeni</th>
|
||||
<th className="py-3 px-4 font-bold">Etiketler</th>
|
||||
<th className="py-3 px-4 font-bold text-right">İşlemler</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-[#18181B]/8 text-xs font-serif text-[#18181B]">
|
||||
{filteredPosts.length > 0 ? (
|
||||
filteredPosts.map((post) => (
|
||||
<tr key={post.id} className="hover:bg-[#FAF7F2]/60 transition-colors">
|
||||
{/* Format Badge */}
|
||||
<td className="py-3 px-4 font-mono text-[11px] whitespace-nowrap">
|
||||
<span className="px-2 py-0.5 rounded uppercase font-bold bg-[#18181B]/5 border border-[#18181B]/10">
|
||||
{post.type}
|
||||
</span>
|
||||
</td>
|
||||
|
||||
{/* Date */}
|
||||
<td className="py-3 px-4 font-mono text-[11px] text-[#52525B] whitespace-nowrap">
|
||||
{post.date}
|
||||
</td>
|
||||
|
||||
{/* Mood */}
|
||||
<td className="py-3 px-4 whitespace-nowrap">
|
||||
<span className="inline-flex items-center gap-1 font-mono text-[11px] text-[#52525B]">
|
||||
<span className="w-2 h-2 rounded-full bg-[#E11D48]" />
|
||||
<span>{post.moodLabel}</span>
|
||||
</span>
|
||||
</td>
|
||||
|
||||
{/* Title / Content Preview */}
|
||||
<td className="py-3 px-4 max-w-xs">
|
||||
<div className="font-heading font-bold text-[#18181B] truncate">
|
||||
{post.title || "(Başlıksız Not)"}
|
||||
</div>
|
||||
<div className="text-[11px] text-[#787D89] truncate">
|
||||
{post.content}
|
||||
</div>
|
||||
</td>
|
||||
|
||||
{/* Likes */}
|
||||
<td className="py-3 px-4 font-mono font-bold text-[#E11D48] whitespace-nowrap">
|
||||
♥ {post.likes}
|
||||
</td>
|
||||
|
||||
{/* Tags */}
|
||||
<td className="py-3 px-4">
|
||||
<div className="flex items-center gap-1 flex-wrap">
|
||||
{post.tags.map((t) => (
|
||||
<span key={t} className="text-[10px] font-mono px-1.5 py-0.5 rounded bg-[#F3ECE2] text-[#52525B]">
|
||||
#{t}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</td>
|
||||
|
||||
{/* Actions */}
|
||||
<td className="py-3 px-4 text-right whitespace-nowrap">
|
||||
<div className="flex items-center justify-end gap-1.5">
|
||||
<button
|
||||
onClick={() => setDetailPost(post)}
|
||||
title="Önizle"
|
||||
className="p-1.5 rounded bg-[#FAF7F2] border border-[#18181B]/10 text-[#52525B] hover:text-[#18181B] hover:bg-[#EFE7D6] transition-colors"
|
||||
>
|
||||
<Eye className="w-3.5 h-3.5" />
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => setEditingPost(post)}
|
||||
title="Düzenle"
|
||||
className="p-1.5 rounded bg-[#FEF3C7] border border-[#D97706]/30 text-[#D97706] hover:bg-[#FDE68A] transition-colors"
|
||||
>
|
||||
<Edit3 className="w-3.5 h-3.5" />
|
||||
</button>
|
||||
|
||||
{deletingId === post.id ? (
|
||||
<div className="inline-flex items-center gap-1">
|
||||
<button
|
||||
onClick={() => handleDeletePost(post.id)}
|
||||
className="px-2 py-0.5 rounded bg-[#E11D48] text-white text-[10px] font-mono font-bold hover:bg-[#9F1239]"
|
||||
>
|
||||
Eminim Sil
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setDeletingId(null)}
|
||||
className="text-[10px] font-mono text-[#787D89] hover:underline"
|
||||
>
|
||||
İptal
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<button
|
||||
onClick={() => setDeletingId(post.id)}
|
||||
title="Sil"
|
||||
className="p-1.5 rounded bg-[#FFE4E6] border border-[#E11D48]/30 text-[#E11D48] hover:bg-[#FECDD3] transition-colors"
|
||||
>
|
||||
<Trash2 className="w-3.5 h-3.5" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))
|
||||
) : (
|
||||
<tr>
|
||||
<td colSpan={7} className="py-8 text-center text-xs font-mono text-[#787D89]">
|
||||
Filtrelerle eşleşen not bulunamadı.
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{/* Modals */}
|
||||
<EditPostModal
|
||||
post={editingPost}
|
||||
isOpen={!!editingPost}
|
||||
onClose={() => setEditingPost(null)}
|
||||
onUpdatePost={handleUpdatePost}
|
||||
/>
|
||||
|
||||
<NewPostModal
|
||||
isOpen={isNewPostOpen}
|
||||
onClose={() => setIsNewPostOpen(false)}
|
||||
onAddPost={handleAddPost}
|
||||
/>
|
||||
|
||||
<PostDetailModal
|
||||
post={detailPost}
|
||||
onClose={() => setDetailPost(null)}
|
||||
onTagClick={() => {}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
import { NextResponse } from "next/server";
|
||||
import { isAdminAuthenticated, ADMIN_USERNAME } from "@/lib/auth";
|
||||
|
||||
export async function GET() {
|
||||
const authenticated = await isAdminAuthenticated();
|
||||
return NextResponse.json({
|
||||
authenticated,
|
||||
username: authenticated ? ADMIN_USERNAME : null,
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,40 @@
|
||||
import { NextResponse } from "next/server";
|
||||
import { validateCredentials, createSessionToken, COOKIE_NAME } from "@/lib/auth";
|
||||
|
||||
export async function POST(request: Request) {
|
||||
try {
|
||||
const { username, password } = await request.json();
|
||||
|
||||
if (!validateCredentials(username, password)) {
|
||||
return NextResponse.json(
|
||||
{ error: "Kullanıcı adı veya şifre hatalı!" },
|
||||
{ status: 401 }
|
||||
);
|
||||
}
|
||||
|
||||
const token = createSessionToken(username);
|
||||
const response = NextResponse.json({
|
||||
success: true,
|
||||
message: "Giriş başarılı",
|
||||
username,
|
||||
});
|
||||
|
||||
response.cookies.set({
|
||||
name: COOKIE_NAME,
|
||||
value: token,
|
||||
httpOnly: true,
|
||||
secure: process.env.NODE_ENV === "production",
|
||||
sameSite: "lax",
|
||||
path: "/",
|
||||
maxAge: 7 * 24 * 60 * 60, // 7 days
|
||||
});
|
||||
|
||||
return response;
|
||||
} catch (error) {
|
||||
console.error("Login error:", error);
|
||||
return NextResponse.json(
|
||||
{ error: "Giriş işlemi sırasında sunucu hatası oluştu" },
|
||||
{ status: 500 }
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
import { NextResponse } from "next/server";
|
||||
import { COOKIE_NAME } from "@/lib/auth";
|
||||
|
||||
export async function POST() {
|
||||
const response = NextResponse.json({
|
||||
success: true,
|
||||
message: "Çıkış yapıldı",
|
||||
});
|
||||
|
||||
response.cookies.set({
|
||||
name: COOKIE_NAME,
|
||||
value: "",
|
||||
httpOnly: true,
|
||||
expires: new Date(0),
|
||||
path: "/",
|
||||
});
|
||||
|
||||
return response;
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
import { NextResponse } from "next/server";
|
||||
import { prisma } from "@/lib/prisma";
|
||||
|
||||
export async function POST(
|
||||
request: Request,
|
||||
{ params }: { params: Promise<{ id: string }> }
|
||||
) {
|
||||
try {
|
||||
const { id } = await params;
|
||||
const body = await request.json();
|
||||
const { increment } = body;
|
||||
|
||||
const updatedPost = await prisma.post.update({
|
||||
where: { id },
|
||||
data: {
|
||||
likes: {
|
||||
increment: increment !== undefined ? (increment ? 1 : -1) : 1,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
return NextResponse.json(updatedPost);
|
||||
} catch (error) {
|
||||
console.error("Error updating likes:", error);
|
||||
return NextResponse.json(
|
||||
{ error: "Failed to update likes" },
|
||||
{ status: 500 }
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,104 @@
|
||||
import { NextResponse } from "next/server";
|
||||
import { prisma } from "@/lib/prisma";
|
||||
import { isAdminAuthenticated } from "@/lib/auth";
|
||||
|
||||
export async function PUT(
|
||||
request: Request,
|
||||
{ params }: { params: Promise<{ id: string }> }
|
||||
) {
|
||||
try {
|
||||
const isAuth = await isAdminAuthenticated();
|
||||
if (!isAuth) {
|
||||
return NextResponse.json(
|
||||
{ error: "Bu işlem için yetkiniz yok (Admin girişi gerekli)" },
|
||||
{ status: 401 }
|
||||
);
|
||||
}
|
||||
|
||||
const { id } = await params;
|
||||
const body = await request.json();
|
||||
|
||||
const {
|
||||
type,
|
||||
date,
|
||||
timestamp,
|
||||
mood,
|
||||
moodLabel,
|
||||
title,
|
||||
content,
|
||||
marginNotes,
|
||||
tags,
|
||||
likes,
|
||||
highlightWords,
|
||||
authorNote,
|
||||
imageUrl,
|
||||
imageCaption,
|
||||
codeSnippet,
|
||||
codeLanguage,
|
||||
audioDuration,
|
||||
audioTitle,
|
||||
stampedText,
|
||||
} = body;
|
||||
|
||||
const updatedPost = await prisma.post.update({
|
||||
where: { id },
|
||||
data: {
|
||||
type,
|
||||
date,
|
||||
timestamp,
|
||||
mood,
|
||||
moodLabel,
|
||||
title,
|
||||
content,
|
||||
marginNotes: marginNotes || [],
|
||||
tags: tags || [],
|
||||
likes: likes !== undefined ? likes : undefined,
|
||||
highlightWords: highlightWords || [],
|
||||
authorNote,
|
||||
imageUrl,
|
||||
imageCaption,
|
||||
codeSnippet,
|
||||
codeLanguage,
|
||||
audioDuration,
|
||||
audioTitle,
|
||||
stampedText,
|
||||
},
|
||||
});
|
||||
|
||||
return NextResponse.json(updatedPost);
|
||||
} catch (error) {
|
||||
console.error("Error updating post:", error);
|
||||
return NextResponse.json(
|
||||
{ error: "Not güncellenirken sunucu hatası oluştu" },
|
||||
{ status: 500 }
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export async function DELETE(
|
||||
request: Request,
|
||||
{ params }: { params: Promise<{ id: string }> }
|
||||
) {
|
||||
try {
|
||||
const isAuth = await isAdminAuthenticated();
|
||||
if (!isAuth) {
|
||||
return NextResponse.json(
|
||||
{ error: "Bu işlem için yetkiniz yok (Admin girişi gerekli)" },
|
||||
{ status: 401 }
|
||||
);
|
||||
}
|
||||
|
||||
const { id } = await params;
|
||||
await prisma.post.delete({
|
||||
where: { id },
|
||||
});
|
||||
|
||||
return NextResponse.json({ success: true, message: "Not silindi" });
|
||||
} catch (error) {
|
||||
console.error("Error deleting post:", error);
|
||||
return NextResponse.json(
|
||||
{ error: "Not silinirken sunucu hatası oluştu" },
|
||||
{ status: 500 }
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,80 @@
|
||||
import { NextResponse } from "next/server";
|
||||
import { prisma } from "@/lib/prisma";
|
||||
|
||||
export async function GET() {
|
||||
try {
|
||||
const posts = await prisma.post.findMany({
|
||||
orderBy: {
|
||||
createdAt: "desc",
|
||||
},
|
||||
});
|
||||
return NextResponse.json(posts);
|
||||
} catch (error) {
|
||||
console.error("Error fetching posts:", error);
|
||||
return NextResponse.json(
|
||||
{ error: "Failed to fetch posts from database" },
|
||||
{ status: 500 }
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export async function POST(request: Request) {
|
||||
try {
|
||||
const body = await request.json();
|
||||
const {
|
||||
id,
|
||||
type,
|
||||
date,
|
||||
timestamp,
|
||||
mood,
|
||||
moodLabel,
|
||||
title,
|
||||
content,
|
||||
marginNotes,
|
||||
tags,
|
||||
likes,
|
||||
highlightWords,
|
||||
authorNote,
|
||||
imageUrl,
|
||||
imageCaption,
|
||||
codeSnippet,
|
||||
codeLanguage,
|
||||
audioDuration,
|
||||
audioTitle,
|
||||
stampedText,
|
||||
} = body;
|
||||
|
||||
const newPost = await prisma.post.create({
|
||||
data: {
|
||||
id: id || `post-${Date.now()}`,
|
||||
type,
|
||||
date,
|
||||
timestamp,
|
||||
mood,
|
||||
moodLabel,
|
||||
title,
|
||||
content,
|
||||
marginNotes: marginNotes || [],
|
||||
tags: tags || [],
|
||||
likes: likes || 0,
|
||||
highlightWords: highlightWords || [],
|
||||
authorNote,
|
||||
imageUrl,
|
||||
imageCaption,
|
||||
codeSnippet,
|
||||
codeLanguage,
|
||||
audioDuration,
|
||||
audioTitle,
|
||||
stampedText,
|
||||
},
|
||||
});
|
||||
|
||||
return NextResponse.json(newPost, { status: 201 });
|
||||
} catch (error) {
|
||||
console.error("Error creating post:", error);
|
||||
return NextResponse.json(
|
||||
{ error: "Failed to create post in database" },
|
||||
{ status: 500 }
|
||||
);
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
+191
@@ -0,0 +1,191 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
:root {
|
||||
/* Core Palette Tokens */
|
||||
--bg-desk: #F0ECE1;
|
||||
--bg-desk-pattern: #E5DFC8;
|
||||
--bg-paper: #FAF7F2;
|
||||
--bg-paper-warm: #F6F1E7;
|
||||
--bg-paper-aged: #EFE7D6;
|
||||
--bg-card-dark: #1E232D;
|
||||
|
||||
--ink-primary: #18181B;
|
||||
--ink-secondary: #4A4E57;
|
||||
--ink-muted: #787D89;
|
||||
--ink-faint: #A6ABB5;
|
||||
|
||||
--accent-wax: #E11D48;
|
||||
--accent-wax-dark: #9F1239;
|
||||
--accent-amber: #D97706;
|
||||
--accent-amber-light: #FEF3C7;
|
||||
--accent-sage: #059669;
|
||||
--accent-sage-light: #D1FAE5;
|
||||
--accent-cyan: #0284C7;
|
||||
--accent-cyan-light: #E0F2FE;
|
||||
--accent-lavender: #7C3AED;
|
||||
--accent-lavender-light: #EDE9FE;
|
||||
|
||||
/* Paper & Tactile Shadow Tokens */
|
||||
--shadow-paper: 0 4px 20px -2px rgba(28, 25, 23, 0.08), 0 1px 4px 0 rgba(28, 25, 23, 0.04);
|
||||
--shadow-paper-lifted: 0 14px 32px -4px rgba(28, 25, 23, 0.14), 0 4px 8px 0 rgba(28, 25, 23, 0.06);
|
||||
--shadow-wax: 0 6px 16px rgba(225, 29, 72, 0.35), inset 0 2px 4px rgba(255, 255, 255, 0.4), inset 0 -3px 6px rgba(0, 0, 0, 0.3);
|
||||
--shadow-clip: 0 4px 8px rgba(0, 0, 0, 0.18), inset 0 1px 1px rgba(255, 255, 255, 0.6);
|
||||
|
||||
/* Fonts */
|
||||
--font-heading: var(--font-heading, "Bricolage Grotesque", sans-serif);
|
||||
--font-serif: var(--font-serif, "Lora", serif);
|
||||
--font-handwriting: var(--font-handwriting, "Caveat", cursive);
|
||||
--font-mono: var(--font-mono, "JetBrains Mono", monospace);
|
||||
}
|
||||
|
||||
/* Desk Surface */
|
||||
.desk-background {
|
||||
background-color: var(--bg-desk);
|
||||
background-image:
|
||||
radial-gradient(var(--bg-desk-pattern) 1.2px, transparent 1.2px),
|
||||
linear-gradient(to bottom, rgba(240, 236, 225, 0.4), rgba(225, 218, 200, 0.7));
|
||||
background-size: 24px 24px, 100% 100%;
|
||||
}
|
||||
|
||||
/* Notebook Page Canvas */
|
||||
.notebook-sheet {
|
||||
background-color: var(--bg-paper);
|
||||
background-image: radial-gradient(rgba(24, 24, 27, 0.06) 1px, transparent 1px);
|
||||
background-size: 20px 20px;
|
||||
box-shadow: var(--shadow-paper);
|
||||
border: 1px solid rgba(24, 24, 27, 0.08);
|
||||
}
|
||||
|
||||
.notebook-ruled {
|
||||
background-color: var(--bg-paper);
|
||||
background-image: linear-gradient(to bottom, transparent 31px, rgba(24, 24, 27, 0.06) 32px);
|
||||
background-size: 100% 32px;
|
||||
}
|
||||
|
||||
/* Washi Tape Strip */
|
||||
.washi-tape {
|
||||
position: absolute;
|
||||
height: 24px;
|
||||
background: rgba(244, 235, 215, 0.85);
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
|
||||
border-left: 2px dashed rgba(200, 185, 160, 0.6);
|
||||
border-right: 2px dashed rgba(200, 185, 160, 0.6);
|
||||
backdrop-filter: blur(2px);
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.washi-tape-amber {
|
||||
background: rgba(254, 240, 199, 0.88);
|
||||
border-left: 2px dashed rgba(217, 119, 6, 0.4);
|
||||
border-right: 2px dashed rgba(217, 119, 6, 0.4);
|
||||
}
|
||||
|
||||
.washi-tape-rose {
|
||||
background: rgba(255, 228, 230, 0.88);
|
||||
border-left: 2px dashed rgba(225, 29, 72, 0.4);
|
||||
border-right: 2px dashed rgba(225, 29, 72, 0.4);
|
||||
}
|
||||
|
||||
/* Red Wax Seal */
|
||||
.wax-seal {
|
||||
background: radial-gradient(circle at 35% 30%, #F43F5E, #E11D48 60%, #9F1239 100%);
|
||||
box-shadow: var(--shadow-wax);
|
||||
border: 2px solid rgba(255, 255, 255, 0.2);
|
||||
transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
}
|
||||
|
||||
.wax-seal:hover {
|
||||
transform: scale(1.05) rotate(4deg);
|
||||
}
|
||||
|
||||
.wax-seal:active {
|
||||
transform: scale(0.96) rotate(-2deg);
|
||||
}
|
||||
|
||||
/* Rubber Stamp */
|
||||
.rubber-stamp {
|
||||
font-family: var(--font-mono);
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
border: 2px solid currentColor;
|
||||
padding: 4px 10px;
|
||||
border-radius: 4px;
|
||||
mask-image: radial-gradient(circle, black 70%, transparent 100%);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
opacity: 0.88;
|
||||
}
|
||||
|
||||
/* Highlighter Marker */
|
||||
.highlighter-amber {
|
||||
background: linear-gradient(104deg, rgba(254, 240, 138, 0) 0.9%, rgba(254, 240, 138, 0.85) 2.4%, rgba(254, 240, 138, 0.8) 95%, rgba(254, 240, 138, 0) 98%);
|
||||
padding: 0 4px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.highlighter-sage {
|
||||
background: linear-gradient(104deg, rgba(167, 243, 208, 0) 0.9%, rgba(167, 243, 208, 0.85) 2.4%, rgba(167, 243, 208, 0.8) 95%, rgba(167, 243, 208, 0) 98%);
|
||||
padding: 0 4px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.highlighter-rose {
|
||||
background: linear-gradient(104deg, rgba(254, 205, 211, 0) 0.9%, rgba(254, 205, 211, 0.85) 2.4%, rgba(254, 205, 211, 0.8) 95%, rgba(254, 205, 211, 0) 98%);
|
||||
padding: 0 4px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
/* Handwritten Typography */
|
||||
.font-handwritten {
|
||||
font-family: var(--font-handwriting);
|
||||
}
|
||||
|
||||
.font-heading {
|
||||
font-family: var(--font-heading);
|
||||
}
|
||||
|
||||
.font-serif {
|
||||
font-family: var(--font-serif);
|
||||
}
|
||||
|
||||
.font-mono {
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
/* Brass Binder Clip */
|
||||
.binder-clip {
|
||||
background: linear-gradient(135deg, #78716C, #44403C 50%, #292524);
|
||||
box-shadow: var(--shadow-clip);
|
||||
}
|
||||
|
||||
/* Custom Journal Scrollbar */
|
||||
::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: #EFE7D6;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #C4B9A3;
|
||||
border-radius: 5px;
|
||||
border: 2px solid #EFE7D6;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #A89B82;
|
||||
}
|
||||
|
||||
/* Smooth Reduced Motion */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*, ::before, ::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
scroll-behavior: auto !important;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,61 @@
|
||||
import type { Metadata } from "next";
|
||||
import { Bricolage_Grotesque, Lora, Caveat, JetBrains_Mono } from "next/font/google";
|
||||
import "./globals.css";
|
||||
|
||||
const bricolage = Bricolage_Grotesque({
|
||||
variable: "--font-heading",
|
||||
subsets: ["latin"],
|
||||
display: "swap",
|
||||
});
|
||||
|
||||
const lora = Lora({
|
||||
variable: "--font-serif",
|
||||
subsets: ["latin"],
|
||||
display: "swap",
|
||||
});
|
||||
|
||||
const caveat = Caveat({
|
||||
variable: "--font-handwriting",
|
||||
subsets: ["latin"],
|
||||
display: "swap",
|
||||
});
|
||||
|
||||
const jetbrains = JetBrains_Mono({
|
||||
variable: "--font-mono",
|
||||
subsets: ["latin"],
|
||||
display: "swap",
|
||||
});
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "mstfyldz — Kişisel Günlük & Mood Logbook",
|
||||
description: "Mustafa Yıldız'ın filtrelenmemiş düşünceleri, anlık karalamaları, ruh hali dalgalanmaları ve dijital not defteri.",
|
||||
authors: [{ name: "Mustafa Yıldız", url: "https://mstfyldz.com" }],
|
||||
keywords: ["mstfyldz", "günlük", "blog", "journal", "karalama defteri", "notlar", "mood"],
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<html
|
||||
lang="tr"
|
||||
className={`${bricolage.variable} ${lora.variable} ${caveat.variable} ${jetbrains.variable} h-full antialiased`}
|
||||
>
|
||||
<body className="min-h-full flex flex-col selection:bg-[#E11D48]/20 selection:text-[#18181B]">
|
||||
{/*
|
||||
THESIS: A personal digital journal rejecting sanitized corporate minimalism in favor of a warm, tactile field notebook with ink marginalia, rubber stamps, and mood-adaptive atmosphere.
|
||||
OWN-WORLD: Palette of warm tactile cream (#FAF7F2), rich sumi ink (#18181B), cardboard tabs (#E4DCD3), crimson wax seal (#E11D48), and amber highlighter (#D97706); paper grain texture, washi tape pins, and brass clip details.
|
||||
STORY: Visitors enter a living sketchbook where thoughts are mapped across time and emotion, seamlessly filtering moods and exploring micro-notes and deep reflections.
|
||||
FIRST VIEWPORT: A full-bleed tactile notebook canvas with an interactive 'Mood Tracker & Weather Log' wave, red wax seal mood stamp, and an asymmetric field of pinned notes, polaroid memories, and handwritten doodles.
|
||||
FORM: Annotated Field Notebook & Ink Marginalia; seed key 6a22c7e2.
|
||||
FINISH: unreviewed and undocumented is unfinished; this build ends with the finish review, the verdict, and DESIGN.md
|
||||
*/}
|
||||
<div className="desk-background min-h-screen flex flex-col relative overflow-x-hidden">
|
||||
{children}
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
+259
@@ -0,0 +1,259 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState, useMemo, useEffect } from "react";
|
||||
import { Header } from "@/components/Header";
|
||||
import { MoodTracker } from "@/components/MoodTracker";
|
||||
import { JournalCard } from "@/components/JournalCard";
|
||||
import { NewPostModal } from "@/components/NewPostModal";
|
||||
import { PostDetailModal } from "@/components/PostDetailModal";
|
||||
import { INITIAL_POSTS, MOODS } from "@/components/mockData";
|
||||
import { JournalPost, MoodType } from "@/components/types";
|
||||
import { Dices, Feather, Sparkles, Filter, Bookmark, Coffee, RefreshCw } from "lucide-react";
|
||||
|
||||
export default function Home() {
|
||||
const [posts, setPosts] = useState<JournalPost[]>(INITIAL_POSTS);
|
||||
const [activeMood, setActiveMood] = useState<MoodType>("all");
|
||||
const [searchQuery, setSearchQuery] = useState<string>("");
|
||||
const [selectedTag, setSelectedTag] = useState<string | null>(null);
|
||||
|
||||
const [isNewPostOpen, setIsNewPostOpen] = useState(false);
|
||||
const [detailPost, setDetailPost] = useState<JournalPost | null>(null);
|
||||
|
||||
// Fetch posts from PostgreSQL API on mount
|
||||
useEffect(() => {
|
||||
async function loadPosts() {
|
||||
try {
|
||||
const res = await fetch("/api/posts");
|
||||
if (res.ok) {
|
||||
const data = await res.json();
|
||||
if (Array.isArray(data) && data.length > 0) {
|
||||
setPosts(data);
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Failed to load posts from API:", err);
|
||||
}
|
||||
}
|
||||
loadPosts();
|
||||
}, []);
|
||||
|
||||
// Extract all unique tags
|
||||
const allTags = useMemo(() => {
|
||||
const set = new Set<string>();
|
||||
posts.forEach((p) => p.tags.forEach((t) => set.add(t)));
|
||||
return Array.from(set);
|
||||
}, [posts]);
|
||||
|
||||
// Filtered posts
|
||||
const filteredPosts = useMemo(() => {
|
||||
return posts.filter((post) => {
|
||||
// Mood filter
|
||||
if (activeMood !== "all" && post.mood !== activeMood) {
|
||||
return false;
|
||||
}
|
||||
// Tag filter
|
||||
if (selectedTag && !post.tags.includes(selectedTag)) {
|
||||
return false;
|
||||
}
|
||||
// Search query
|
||||
if (searchQuery.trim()) {
|
||||
const q = searchQuery.toLowerCase();
|
||||
const matchesContent = post.content.toLowerCase().includes(q);
|
||||
const matchesTitle = post.title?.toLowerCase().includes(q);
|
||||
const matchesTags = post.tags.some((t) => t.toLowerCase().includes(q));
|
||||
const matchesMargin = post.marginNotes?.some((m) => m.toLowerCase().includes(q));
|
||||
return matchesContent || matchesTitle || matchesTags || matchesMargin;
|
||||
}
|
||||
return true;
|
||||
});
|
||||
}, [posts, activeMood, selectedTag, searchQuery]);
|
||||
|
||||
const handleAddPost = async (newPost: JournalPost) => {
|
||||
setPosts([newPost, ...posts]);
|
||||
try {
|
||||
await fetch("/api/posts", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(newPost),
|
||||
});
|
||||
} catch (err) {
|
||||
console.error("Failed to save post to database:", err);
|
||||
}
|
||||
};
|
||||
|
||||
const handleRandomPost = () => {
|
||||
if (posts.length === 0) return;
|
||||
const randomIndex = Math.floor(Math.random() * posts.length);
|
||||
setDetailPost(posts[randomIndex]);
|
||||
};
|
||||
|
||||
const handleTagClick = (tag: string) => {
|
||||
setSelectedTag(selectedTag === tag ? null : tag);
|
||||
};
|
||||
|
||||
const clearFilters = () => {
|
||||
setActiveMood("all");
|
||||
setSelectedTag(null);
|
||||
setSearchQuery("");
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex-1 flex flex-col w-full">
|
||||
{/* Top Header */}
|
||||
<Header
|
||||
searchQuery={searchQuery}
|
||||
onSearchChange={setSearchQuery}
|
||||
onNewPostClick={() => setIsNewPostOpen(true)}
|
||||
onRandomPostClick={handleRandomPost}
|
||||
postCount={posts.length}
|
||||
/>
|
||||
|
||||
{/* Main Journal Canvas */}
|
||||
<main className="flex-1 max-w-6xl w-full mx-auto px-4 sm:px-6 py-8 relative">
|
||||
{/* Floating Side Index Tabs (Notebook Edge Decoration) */}
|
||||
<div className="hidden xl:flex flex-col gap-2.5 fixed left-4 top-36 z-20">
|
||||
<div className="text-[10px] font-mono uppercase tracking-widest text-[#787D89] font-bold px-1 mb-1">
|
||||
DİZİN SEKMELERİ
|
||||
</div>
|
||||
{allTags.slice(0, 6).map((tag, idx) => {
|
||||
const isSelected = selectedTag === tag;
|
||||
const tabColors = [
|
||||
"bg-[#FEF3C7] text-[#92400E] border-[#D97706]/40",
|
||||
"bg-[#FFE4E6] text-[#9F1239] border-[#E11D48]/40",
|
||||
"bg-[#D1FAE5] text-[#065F46] border-[#059669]/40",
|
||||
"bg-[#E0F2FE] text-[#075985] border-[#0284C7]/40",
|
||||
"bg-[#EDE9FE] text-[#5B21B6] border-[#7C3AED]/40",
|
||||
"bg-[#F3ECE2] text-[#18181B] border-[#18181B]/20",
|
||||
];
|
||||
const colorClass = tabColors[idx % tabColors.length];
|
||||
|
||||
return (
|
||||
<button
|
||||
key={tag}
|
||||
onClick={() => handleTagClick(tag)}
|
||||
className={`text-xs font-mono px-3 py-1.5 rounded-r-md border-y border-r shadow-xs text-left transition-all duration-200 cursor-pointer ${colorClass} ${
|
||||
isSelected ? "translate-x-2 font-bold ring-2 ring-black/20" : "hover:translate-x-1"
|
||||
}`}
|
||||
>
|
||||
#{tag}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* The Signature Hero: Mood Tracker & Weather Log */}
|
||||
<MoodTracker
|
||||
activeMood={activeMood}
|
||||
onSelectMood={(mood) => {
|
||||
setActiveMood(mood);
|
||||
}}
|
||||
filteredCount={filteredPosts.length}
|
||||
/>
|
||||
|
||||
{/* Active Filter Tags Indicator Bar */}
|
||||
{(selectedTag || activeMood !== "all" || searchQuery) && (
|
||||
<div className="flex items-center justify-between gap-3 p-3.5 mb-6 rounded-xl bg-[#FAF7F2] border border-[#18181B]/12">
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<span className="text-xs font-mono text-[#787D89] font-semibold">Aktif Filtreler:</span>
|
||||
|
||||
{activeMood !== "all" && (
|
||||
<span className="inline-flex items-center gap-1 px-2.5 py-1 rounded-full bg-[#18181B] text-[#FAF7F2] text-xs font-mono">
|
||||
Mood: {MOODS.find((m) => m.id === activeMood)?.label}
|
||||
<button onClick={() => setActiveMood("all")} className="hover:text-red-300 ml-1">×</button>
|
||||
</span>
|
||||
)}
|
||||
|
||||
{selectedTag && (
|
||||
<span className="inline-flex items-center gap-1 px-2.5 py-1 rounded-full bg-[#E11D48] text-white text-xs font-mono">
|
||||
#{selectedTag}
|
||||
<button onClick={() => setSelectedTag(null)} className="hover:text-red-200 ml-1">×</button>
|
||||
</span>
|
||||
)}
|
||||
|
||||
{searchQuery && (
|
||||
<span className="inline-flex items-center gap-1 px-2.5 py-1 rounded-full bg-[#D97706] text-white text-xs font-mono">
|
||||
“{searchQuery}”
|
||||
<button onClick={() => setSearchQuery("")} className="hover:text-amber-200 ml-1">×</button>
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={clearFilters}
|
||||
className="flex items-center gap-1 text-xs font-mono text-[#787D89] hover:text-[#18181B] transition-colors shrink-0"
|
||||
>
|
||||
<RefreshCw className="w-3 h-3" />
|
||||
<span>Filtreleri Temizle</span>
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* The Mixed-Media Journal Feed */}
|
||||
{filteredPosts.length > 0 ? (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-7 items-start">
|
||||
{filteredPosts.map((post) => (
|
||||
<JournalCard
|
||||
key={post.id}
|
||||
post={post}
|
||||
onOpenDetail={(p) => setDetailPost(p)}
|
||||
onTagClick={handleTagClick}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
/* Empty State */
|
||||
<div className="w-full py-16 px-6 notebook-sheet rounded-2xl text-center flex flex-col items-center justify-center">
|
||||
<div className="w-14 h-14 rounded-full bg-[#FEF3C7] text-[#D97706] flex items-center justify-center mb-4">
|
||||
<Coffee className="w-7 h-7" />
|
||||
</div>
|
||||
<h3 className="font-heading font-black text-xl text-[#18181B] mb-1">
|
||||
Bu Filtrede Karalama Bulunamadı
|
||||
</h3>
|
||||
<p className="font-serif text-sm text-[#52525B] max-w-md mb-6">
|
||||
Görünüşe göre bu ruh halinde henüz bir şey yazılmamış. Belki de bir fincan çay alıp aklına gelen ilk şeyi karalama vaktidir?
|
||||
</p>
|
||||
<div className="flex items-center gap-3">
|
||||
<button
|
||||
onClick={clearFilters}
|
||||
className="px-4 py-2 rounded-lg bg-[#FAF7F2] border border-[#18181B]/15 text-xs font-heading font-semibold text-[#18181B] hover:bg-[#EFE7D6] transition-colors"
|
||||
>
|
||||
Filtreleri Temizle
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setIsNewPostOpen(true)}
|
||||
className="px-4 py-2 rounded-lg bg-[#E11D48] text-white text-xs font-heading font-bold hover:bg-[#9F1239] shadow-xs transition-colors"
|
||||
>
|
||||
+ İlk Notu Sen Karala
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Footer Scrapbook Note */}
|
||||
<footer className="mt-16 pt-8 pb-12 border-t border-[#18181B]/10 text-center">
|
||||
<div className="inline-block relative">
|
||||
<div className="font-handwritten text-2xl text-[#18181B] font-bold">
|
||||
"En iyi fikirler, en saçma karalamaların arasından çıkar."
|
||||
</div>
|
||||
<div className="text-xs font-mono text-[#787D89] mt-1">
|
||||
© 2026 Mustafa Yıldız • mstfyldz journal • Craft with passion
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</main>
|
||||
|
||||
{/* Modals */}
|
||||
<NewPostModal
|
||||
isOpen={isNewPostOpen}
|
||||
onClose={() => setIsNewPostOpen(false)}
|
||||
onAddPost={handleAddPost}
|
||||
/>
|
||||
|
||||
<PostDetailModal
|
||||
post={detailPost}
|
||||
onClose={() => setDetailPost(null)}
|
||||
onTagClick={handleTagClick}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user