351 lines
14 KiB
TypeScript
351 lines
14 KiB
TypeScript
"use client";
|
||
|
||
import React, { useState, useEffect } from "react";
|
||
import { JournalPost, MoodType, PostType } from "./types";
|
||
import { MOODS } from "./mockData";
|
||
import { X, Feather, Save, StickyNote, BookOpen, Code, Camera, Volume2 } from "lucide-react";
|
||
|
||
interface EditPostModalProps {
|
||
post: JournalPost | null;
|
||
isOpen: boolean;
|
||
onClose: () => void;
|
||
onUpdatePost: (updatedPost: JournalPost) => void;
|
||
}
|
||
|
||
export const EditPostModal: React.FC<EditPostModalProps> = ({
|
||
post,
|
||
isOpen,
|
||
onClose,
|
||
onUpdatePost,
|
||
}) => {
|
||
const [type, setType] = useState<PostType>("sticky");
|
||
const [mood, setMood] = useState<MoodType>("spark");
|
||
const [title, setTitle] = useState("");
|
||
const [content, setContent] = useState("");
|
||
const [marginNote, setMarginNote] = useState("");
|
||
const [tagInput, setTagInput] = useState("");
|
||
const [codeSnippet, setCodeSnippet] = useState("");
|
||
const [stampedText, setStampedText] = useState("");
|
||
const [imageUrl, setImageUrl] = useState("");
|
||
const [imageCaption, setImageCaption] = useState("");
|
||
const [likes, setLikes] = useState(0);
|
||
|
||
useEffect(() => {
|
||
if (post) {
|
||
setType(post.type);
|
||
setMood(post.mood);
|
||
setTitle(post.title || "");
|
||
setContent(post.content);
|
||
setMarginNote(post.marginNotes ? post.marginNotes.join(", ") : "");
|
||
setTagInput(post.tags ? post.tags.join(", ") : "");
|
||
setCodeSnippet(post.codeSnippet || "");
|
||
setStampedText(post.stampedText || "");
|
||
setImageUrl(post.imageUrl || "");
|
||
setImageCaption(post.imageCaption || "");
|
||
setLikes(post.likes || 0);
|
||
}
|
||
}, [post]);
|
||
|
||
if (!isOpen || !post) return null;
|
||
|
||
const handleSubmit = async (e: React.FormEvent) => {
|
||
e.preventDefault();
|
||
if (!content.trim()) return;
|
||
|
||
const moodObj = MOODS.find((m) => m.id === mood) || MOODS[0];
|
||
const tags = tagInput
|
||
.split(",")
|
||
.map((t) => t.trim().replace(/^#/, ""))
|
||
.filter((t) => t.length > 0);
|
||
|
||
const updated: JournalPost = {
|
||
...post,
|
||
type,
|
||
mood,
|
||
moodLabel: moodObj.label,
|
||
title: title.trim() ? title : undefined,
|
||
content,
|
||
marginNotes: marginNote.trim()
|
||
? marginNote.split(",").map((n) => n.trim())
|
||
: undefined,
|
||
tags: tags.length > 0 ? tags : ["genel"],
|
||
stampedText: stampedText.trim() ? stampedText.trim() : undefined,
|
||
codeSnippet: type === "code" && codeSnippet.trim() ? codeSnippet : undefined,
|
||
codeLanguage: type === "code" ? "typescript" : undefined,
|
||
imageUrl: type === "polaroid" && imageUrl.trim() ? imageUrl : undefined,
|
||
imageCaption: type === "polaroid" && imageCaption.trim() ? imageCaption : undefined,
|
||
likes,
|
||
};
|
||
|
||
onUpdatePost(updated);
|
||
onClose();
|
||
};
|
||
|
||
return (
|
||
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-xs animate-in fade-in duration-200">
|
||
<div
|
||
className="relative w-full max-w-xl notebook-sheet rounded-2xl p-6 sm:p-8 shadow-2xl border border-[#18181B]/15 max-h-[90vh] overflow-y-auto"
|
||
onClick={(e) => e.stopPropagation()}
|
||
>
|
||
{/* Washi Tape */}
|
||
<div className="washi-tape washi-tape-amber top-[-10px] left-1/2 -translate-x-1/2 w-40" />
|
||
|
||
{/* Header */}
|
||
<div className="flex items-center justify-between pb-4 border-b border-[#18181B]/10 mb-5">
|
||
<div className="flex items-center gap-2.5">
|
||
<div className="w-8 h-8 rounded-full bg-[#D97706] text-white flex items-center justify-center font-bold text-sm">
|
||
✏️
|
||
</div>
|
||
<div>
|
||
<h2 className="font-heading font-extrabold text-lg text-[#18181B]">
|
||
Notu Düzenle (Admin)
|
||
</h2>
|
||
<p className="text-xs font-mono text-[#787D89]">
|
||
ID: {post.id} • {post.date}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<button
|
||
onClick={onClose}
|
||
className="p-1.5 rounded-lg text-[#787D89] hover:text-[#18181B] hover:bg-[#18181B]/5 transition-colors cursor-pointer"
|
||
>
|
||
<X className="w-5 h-5" />
|
||
</button>
|
||
</div>
|
||
|
||
<form onSubmit={handleSubmit} className="space-y-4">
|
||
{/* Format Selector */}
|
||
<div>
|
||
<label className="block text-[11px] font-mono uppercase text-[#787D89] font-bold mb-1.5">
|
||
Not Formatı:
|
||
</label>
|
||
<div className="grid grid-cols-4 gap-2">
|
||
<button
|
||
type="button"
|
||
onClick={() => setType("sticky")}
|
||
className={`flex items-center justify-center gap-1 p-2 rounded-lg text-xs font-heading font-semibold border transition-all ${
|
||
type === "sticky"
|
||
? "bg-[#FEF3C7] border-[#D97706] text-[#B45309] shadow-xs"
|
||
: "bg-[#FAF7F2] border-[#18181B]/10 text-[#52525B]"
|
||
}`}
|
||
>
|
||
<StickyNote className="w-3.5 h-3.5" />
|
||
<span>Post-it</span>
|
||
</button>
|
||
|
||
<button
|
||
type="button"
|
||
onClick={() => setType("notebook")}
|
||
className={`flex items-center justify-center gap-1 p-2 rounded-lg text-xs font-heading font-semibold border transition-all ${
|
||
type === "notebook"
|
||
? "bg-[#FAF7F2] border-[#18181B] text-[#18181B] shadow-xs font-bold"
|
||
: "bg-[#FAF7F2] border-[#18181B]/10 text-[#52525B]"
|
||
}`}
|
||
>
|
||
<BookOpen className="w-3.5 h-3.5" />
|
||
<span>Defter</span>
|
||
</button>
|
||
|
||
<button
|
||
type="button"
|
||
onClick={() => setType("code")}
|
||
className={`flex items-center justify-center gap-1 p-2 rounded-lg text-xs font-heading font-semibold border transition-all ${
|
||
type === "code"
|
||
? "bg-[#1E232D] border-[#1E232D] text-white shadow-xs"
|
||
: "bg-[#FAF7F2] border-[#18181B]/10 text-[#52525B]"
|
||
}`}
|
||
>
|
||
<Code className="w-3.5 h-3.5" />
|
||
<span>Kod</span>
|
||
</button>
|
||
|
||
<button
|
||
type="button"
|
||
onClick={() => setType("polaroid")}
|
||
className={`flex items-center justify-center gap-1 p-2 rounded-lg text-xs font-heading font-semibold border transition-all ${
|
||
type === "polaroid"
|
||
? "bg-[#E0F2FE] border-[#0284C7] text-[#0369A1] shadow-xs"
|
||
: "bg-[#FAF7F2] border-[#18181B]/10 text-[#52525B]"
|
||
}`}
|
||
>
|
||
<Camera className="w-3.5 h-3.5" />
|
||
<span>Polaroid</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Mood Selector */}
|
||
<div>
|
||
<label className="block text-[11px] font-mono uppercase text-[#787D89] font-bold mb-1.5">
|
||
Ruh Hali (Mood):
|
||
</label>
|
||
<div className="flex items-center gap-2 overflow-x-auto pb-1 scrollbar-none">
|
||
{MOODS.filter((m) => m.id !== "all").map((m) => (
|
||
<button
|
||
key={m.id}
|
||
type="button"
|
||
onClick={() => setMood(m.id)}
|
||
className={`px-3 py-1.5 rounded-lg text-xs font-heading font-semibold shrink-0 border transition-all ${
|
||
mood === m.id
|
||
? "bg-[#18181B] text-[#FAF7F2] border-[#18181B]"
|
||
: "bg-[#FAF7F2] text-[#52525B] border-[#18181B]/10 hover:bg-[#EFE7D6]"
|
||
}`}
|
||
>
|
||
{m.label}
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Title */}
|
||
<div>
|
||
<label className="block text-[11px] font-mono uppercase text-[#787D89] font-bold mb-1">
|
||
Başlık:
|
||
</label>
|
||
<input
|
||
type="text"
|
||
value={title}
|
||
onChange={(e) => setTitle(e.target.value)}
|
||
placeholder="Başlık..."
|
||
className="w-full px-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-serif"
|
||
/>
|
||
</div>
|
||
|
||
{/* Content */}
|
||
<div>
|
||
<label className="block text-[11px] font-mono uppercase text-[#787D89] font-bold mb-1">
|
||
İçerik:
|
||
</label>
|
||
<textarea
|
||
required
|
||
rows={4}
|
||
value={content}
|
||
onChange={(e) => setContent(e.target.value)}
|
||
className="w-full px-3.5 py-2.5 text-sm bg-white/80 border border-[#18181B]/15 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#E11D48]/30 font-serif leading-relaxed"
|
||
/>
|
||
</div>
|
||
|
||
{/* Stamped Text */}
|
||
<div>
|
||
<label className="block text-[11px] font-mono uppercase text-[#787D89] font-bold mb-1">
|
||
Damga Metni (Örn: ONAYLANDI, SUÇLU, COMPILED):
|
||
</label>
|
||
<input
|
||
type="text"
|
||
value={stampedText}
|
||
onChange={(e) => setStampedText(e.target.value)}
|
||
placeholder="ONAYLANDI"
|
||
className="w-full px-3 py-1.5 text-xs font-mono bg-white/80 border border-[#18181B]/15 rounded-lg uppercase"
|
||
/>
|
||
</div>
|
||
|
||
{/* Code Snippet */}
|
||
{type === "code" && (
|
||
<div>
|
||
<label className="block text-[11px] font-mono uppercase text-[#787D89] font-bold mb-1">
|
||
Kod Parçası:
|
||
</label>
|
||
<textarea
|
||
rows={3}
|
||
value={codeSnippet}
|
||
onChange={(e) => setCodeSnippet(e.target.value)}
|
||
className="w-full px-3.5 py-2 text-xs font-mono bg-[#1E232D] text-emerald-400 border border-white/10 rounded-lg focus:outline-none"
|
||
/>
|
||
</div>
|
||
)}
|
||
|
||
{/* Polaroid Image URL */}
|
||
{type === "polaroid" && (
|
||
<div className="space-y-2">
|
||
<div>
|
||
<label className="block text-[11px] font-mono uppercase text-[#787D89] font-bold mb-1">
|
||
Resim URL:
|
||
</label>
|
||
<input
|
||
type="text"
|
||
value={imageUrl}
|
||
onChange={(e) => setImageUrl(e.target.value)}
|
||
placeholder="https://images.unsplash.com/..."
|
||
className="w-full px-3 py-1.5 text-xs bg-white/80 border border-[#18181B]/15 rounded-lg font-mono"
|
||
/>
|
||
</div>
|
||
<div>
|
||
<label className="block text-[11px] font-mono uppercase text-[#787D89] font-bold mb-1">
|
||
Resim Yazısı (Caption):
|
||
</label>
|
||
<input
|
||
type="text"
|
||
value={imageCaption}
|
||
onChange={(e) => setImageCaption(e.target.value)}
|
||
placeholder="Zirve esintisi..."
|
||
className="w-full px-3 py-1.5 text-xs bg-white/80 border border-[#18181B]/15 rounded-lg font-handwritten text-lg"
|
||
/>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Margin Notes Input */}
|
||
<div>
|
||
<label className="block text-[11px] font-mono uppercase text-[#787D89] font-bold mb-1">
|
||
Kenar Notları (Virgülle ayırın):
|
||
</label>
|
||
<input
|
||
type="text"
|
||
value={marginNote}
|
||
onChange={(e) => setMarginNote(e.target.value)}
|
||
placeholder="← tam olarak bu!, not al"
|
||
className="w-full px-3 py-1.5 text-sm bg-white/80 border border-[#18181B]/15 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#E11D48]/30 font-handwritten text-lg text-[#E11D48]"
|
||
/>
|
||
</div>
|
||
|
||
{/* Tags */}
|
||
<div>
|
||
<label className="block text-[11px] font-mono uppercase text-[#787D89] font-bold mb-1">
|
||
Etiketler (Virgülle ayırın):
|
||
</label>
|
||
<input
|
||
type="text"
|
||
value={tagInput}
|
||
onChange={(e) => setTagInput(e.target.value)}
|
||
placeholder="felsefe, gece, kahve"
|
||
className="w-full px-3 py-1.5 text-xs bg-white/80 border border-[#18181B]/15 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#E11D48]/30 font-mono"
|
||
/>
|
||
</div>
|
||
|
||
{/* Likes */}
|
||
<div>
|
||
<label className="block text-[11px] font-mono uppercase text-[#787D89] font-bold mb-1">
|
||
Beğeni Sayısı:
|
||
</label>
|
||
<input
|
||
type="number"
|
||
value={likes}
|
||
onChange={(e) => setLikes(parseInt(e.target.value, 10) || 0)}
|
||
className="w-32 px-3 py-1.5 text-xs bg-white/80 border border-[#18181B]/15 rounded-lg font-mono"
|
||
/>
|
||
</div>
|
||
|
||
{/* Actions */}
|
||
<div className="flex items-center justify-end gap-2.5 pt-3 border-t border-[#18181B]/10">
|
||
<button
|
||
type="button"
|
||
onClick={onClose}
|
||
className="px-4 py-2 rounded-lg text-xs font-heading font-semibold text-[#52525B] hover:bg-[#18181B]/5 transition-colors"
|
||
>
|
||
Vazgeç
|
||
</button>
|
||
<button
|
||
type="submit"
|
||
className="flex items-center gap-1.5 px-5 py-2 rounded-lg bg-[#059669] text-white text-xs font-heading font-bold hover:bg-[#047857] shadow-sm transition-all cursor-pointer"
|
||
>
|
||
<Save className="w-3.5 h-3.5" />
|
||
<span>Günü Güncelle</span>
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|