locale upgrade
This commit is contained in:
@@ -5,6 +5,7 @@ import { ExternalLink, Calendar, ArrowLeft, Github as GithubIcon, Share2 } from
|
||||
import Link from "next/link";
|
||||
import { useEffect } from "react";
|
||||
import ReactMarkdown from "react-markdown";
|
||||
import { useTranslations } from "next-intl";
|
||||
|
||||
export type ProjectDetailData = {
|
||||
id: number;
|
||||
@@ -28,6 +29,10 @@ export default function ProjectDetailClient({
|
||||
project: ProjectDetailData;
|
||||
locale: string;
|
||||
}) {
|
||||
const tCommon = useTranslations("common");
|
||||
const tDetail = useTranslations("projects.detail");
|
||||
const tShared = useTranslations("projects.shared");
|
||||
|
||||
// Track page view (non-blocking)
|
||||
useEffect(() => {
|
||||
try {
|
||||
@@ -64,7 +69,7 @@ export default function ProjectDetailClient({
|
||||
className="inline-flex items-center space-x-2 text-stone-500 hover:text-stone-900 transition-colors group"
|
||||
>
|
||||
<ArrowLeft size={20} className="group-hover:-translate-x-1 transition-transform" />
|
||||
<span className="font-medium">Back to Projects</span>
|
||||
<span className="font-medium">{tCommon("backToProjects")}</span>
|
||||
</Link>
|
||||
</motion.div>
|
||||
|
||||
@@ -82,7 +87,7 @@ export default function ProjectDetailClient({
|
||||
<div className="flex gap-2 shrink-0 pt-2">
|
||||
{project.featured && (
|
||||
<span className="px-4 py-1.5 bg-stone-900 text-stone-50 text-xs font-bold rounded-full shadow-sm">
|
||||
Featured
|
||||
{tShared("featured")}
|
||||
</span>
|
||||
)}
|
||||
<span className="px-4 py-1.5 bg-white border border-stone-200 text-stone-600 text-xs font-medium rounded-full shadow-sm">
|
||||
@@ -99,7 +104,7 @@ export default function ProjectDetailClient({
|
||||
<div className="flex items-center space-x-2">
|
||||
<Calendar size={18} />
|
||||
<span className="font-mono">
|
||||
{new Date(project.date).toLocaleDateString(undefined, {
|
||||
{new Date(project.date).toLocaleDateString(locale || undefined, {
|
||||
year: "numeric",
|
||||
month: "long",
|
||||
day: "numeric",
|
||||
@@ -183,7 +188,7 @@ export default function ProjectDetailClient({
|
||||
<div className="bg-white/50 backdrop-blur-xl border border-white/60 p-6 rounded-2xl shadow-sm sticky top-32">
|
||||
<h3 className="font-bold text-stone-900 mb-4 flex items-center gap-2">
|
||||
<Share2 size={18} />
|
||||
Project Links
|
||||
{tDetail("links")}
|
||||
</h3>
|
||||
<div className="space-y-3">
|
||||
{project.live && project.live.trim() && project.live !== "#" ? (
|
||||
@@ -193,12 +198,12 @@ export default function ProjectDetailClient({
|
||||
rel="noopener noreferrer"
|
||||
className="flex items-center justify-between w-full px-4 py-3 bg-stone-900 text-stone-50 rounded-xl font-medium hover:bg-stone-800 hover:scale-[1.02] transition-all shadow-md group"
|
||||
>
|
||||
<span>Live Demo</span>
|
||||
<span>{tDetail("liveDemo")}</span>
|
||||
<ExternalLink size={18} className="group-hover:translate-x-1 transition-transform" />
|
||||
</a>
|
||||
) : (
|
||||
<div className="px-4 py-3 bg-stone-100 text-stone-400 rounded-xl font-medium text-sm text-center border border-stone-200 cursor-not-allowed">
|
||||
Live demo not available
|
||||
{tDetail("liveNotAvailable")}
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -209,14 +214,14 @@ export default function ProjectDetailClient({
|
||||
rel="noopener noreferrer"
|
||||
className="flex items-center justify-between w-full px-4 py-3 bg-white border border-stone-200 text-stone-700 rounded-xl font-medium hover:bg-stone-50 hover:text-stone-900 hover:border-stone-300 transition-all shadow-sm group"
|
||||
>
|
||||
<span>View Source</span>
|
||||
<span>{tDetail("viewSource")}</span>
|
||||
<GithubIcon size={18} className="group-hover:rotate-12 transition-transform" />
|
||||
</a>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
<div className="mt-8 pt-6 border-t border-stone-100">
|
||||
<h4 className="text-xs font-bold text-stone-400 uppercase tracking-wider mb-3">Tech Stack</h4>
|
||||
<h4 className="text-xs font-bold text-stone-400 uppercase tracking-wider mb-3">{tDetail("techStack")}</h4>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{project.tags.map((tag) => (
|
||||
<span
|
||||
|
||||
Reference in New Issue
Block a user