first commit
This commit is contained in:
mstfyldz
@@ -0,0 +1,179 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState } from "react";
|
||||
import { JournalPost } from "./types";
|
||||
import { X, Heart, Share2, CornerDownRight, Check, BookOpen, Volume2 } from "lucide-react";
|
||||
|
||||
interface PostDetailModalProps {
|
||||
post: JournalPost | null;
|
||||
onClose: () => void;
|
||||
onTagClick: (tag: string) => void;
|
||||
}
|
||||
|
||||
export const PostDetailModal: React.FC<PostDetailModalProps> = ({
|
||||
post,
|
||||
onClose,
|
||||
onTagClick,
|
||||
}) => {
|
||||
const [likes, setLikes] = useState(post?.likes || 0);
|
||||
const [hasLiked, setHasLiked] = useState(false);
|
||||
const [copied, setCopied] = useState(false);
|
||||
|
||||
if (!post) return null;
|
||||
|
||||
const handleLike = () => {
|
||||
if (!hasLiked) {
|
||||
setLikes((prev) => prev + 1);
|
||||
setHasLiked(true);
|
||||
} else {
|
||||
setLikes((prev) => prev - 1);
|
||||
setHasLiked(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleShare = () => {
|
||||
navigator.clipboard.writeText(window.location.href);
|
||||
setCopied(true);
|
||||
setTimeout(() => setCopied(false), 2000);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 backdrop-blur-xs animate-in fade-in duration-200">
|
||||
<div
|
||||
className="relative w-full max-w-2xl notebook-sheet rounded-2xl p-6 sm:p-9 shadow-2xl border border-[#18181B]/15 max-h-[90vh] overflow-y-auto"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
{/* Top binder clip */}
|
||||
<div className="binder-clip absolute top-[-8px] left-10 w-12 h-5 rounded-xs" />
|
||||
|
||||
{/* Close Button */}
|
||||
<button
|
||||
onClick={onClose}
|
||||
title="Kapat"
|
||||
aria-label="Kapat"
|
||||
className="absolute top-5 right-5 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>
|
||||
|
||||
{/* Metadata Header */}
|
||||
<div className="flex items-center gap-2 text-xs font-mono text-[#787D89] mb-3">
|
||||
<span className="font-bold text-[#18181B]">{post.date} • {post.timestamp}</span>
|
||||
<span>•</span>
|
||||
<span className="px-2 py-0.5 rounded-full bg-[#18181B]/5 text-[#52525B]">
|
||||
{post.moodLabel}
|
||||
</span>
|
||||
{post.stampedText && (
|
||||
<span className="rubber-stamp text-[10px] text-[#E11D48] border-[#E11D48] ml-auto">
|
||||
{post.stampedText}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Post Title */}
|
||||
{post.title && (
|
||||
<h1 className="font-heading font-black text-2xl sm:text-3xl text-[#18181B] leading-tight mb-4">
|
||||
{post.title}
|
||||
</h1>
|
||||
)}
|
||||
|
||||
{/* Polaroid Image if any */}
|
||||
{post.imageUrl && (
|
||||
<div className="my-4 p-3 bg-white border border-[#18181B]/10 rounded shadow-sm">
|
||||
<img
|
||||
src={post.imageUrl}
|
||||
alt={post.imageCaption || "Polaroid"}
|
||||
className="w-full max-h-80 object-cover rounded-xs"
|
||||
/>
|
||||
{post.imageCaption && (
|
||||
<div className="font-handwritten text-[#18181B] text-xl font-bold mt-2 px-1">
|
||||
{post.imageCaption}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Code Snippet if any */}
|
||||
{post.codeSnippet && (
|
||||
<div className="my-4">
|
||||
<div className="px-3 py-1.5 bg-[#1E232D] text-white/70 text-xs font-mono rounded-t-lg border border-b-0 border-white/10 flex items-center justify-between">
|
||||
<span>{post.title || "snippet.rs"}</span>
|
||||
<span className="uppercase text-[10px]">{post.codeLanguage || "code"}</span>
|
||||
</div>
|
||||
<pre className="p-4 rounded-b-lg bg-[#141820] text-emerald-400 font-mono text-xs overflow-x-auto leading-relaxed border border-white/10">
|
||||
<code>{post.codeSnippet}</code>
|
||||
</pre>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Body Content */}
|
||||
<div className="font-serif text-[#18181B] text-base sm:text-lg leading-relaxed whitespace-pre-line my-4 space-y-4">
|
||||
{post.content}
|
||||
</div>
|
||||
|
||||
{/* Margin Notes */}
|
||||
{post.marginNotes && post.marginNotes.length > 0 && (
|
||||
<div className="my-5 p-4 rounded-xl bg-[#FAF7F2] border border-[#18181B]/10 space-y-1.5">
|
||||
<div className="text-[11px] font-mono uppercase text-[#787D89] font-bold">
|
||||
Yazarın El Yazısı Notları:
|
||||
</div>
|
||||
{post.marginNotes.map((note, idx) => (
|
||||
<div key={idx} className="font-handwritten text-[#E11D48] text-xl leading-tight flex items-center gap-2">
|
||||
<CornerDownRight className="w-4 h-4 shrink-0" />
|
||||
<span>{note}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Tags */}
|
||||
<div className="flex items-center gap-2 flex-wrap pt-4 border-t border-[#18181B]/10 mt-6">
|
||||
{post.tags.map((tag) => (
|
||||
<button
|
||||
key={tag}
|
||||
onClick={() => {
|
||||
onTagClick(tag);
|
||||
onClose();
|
||||
}}
|
||||
className="text-xs font-mono px-2.5 py-1 rounded bg-[#F3ECE2] text-[#52525B] hover:bg-[#EFE7D6] hover:text-[#18181B] transition-colors"
|
||||
>
|
||||
#{tag}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex items-center justify-between pt-4 mt-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={handleLike}
|
||||
className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg border text-xs font-mono transition-all ${
|
||||
hasLiked
|
||||
? "bg-[#FFE4E6] border-[#E11D48] text-[#E11D48] font-bold"
|
||||
: "bg-white border-[#18181B]/15 text-[#52525B] hover:text-[#18181B]"
|
||||
}`}
|
||||
>
|
||||
<Heart className={`w-4 h-4 ${hasLiked ? "fill-current" : ""}`} />
|
||||
<span>{likes} Beğeni</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={handleShare}
|
||||
className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-white border border-[#18181B]/15 text-xs font-mono text-[#52525B] hover:text-[#18181B] transition-all"
|
||||
>
|
||||
{copied ? <Check className="w-4 h-4 text-[#059669]" /> : <Share2 className="w-4 h-4" />}
|
||||
<span>{copied ? "Kopyalandı!" : "Paylaş"}</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="px-4 py-1.5 rounded-lg bg-[#18181B] text-[#FAF7F2] text-xs font-heading font-semibold hover:bg-black transition-colors"
|
||||
>
|
||||
Kapat
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user