54 lines
1.7 KiB
TypeScript
54 lines
1.7 KiB
TypeScript
"use client";
|
|
|
|
import Link from 'next/link';
|
|
import { ArrowLeft, ArrowRight } from 'lucide-react';
|
|
|
|
interface NavLink {
|
|
slug: string;
|
|
title: string;
|
|
}
|
|
|
|
interface ProjectNavigationProps {
|
|
prev?: NavLink | null;
|
|
next?: NavLink | null;
|
|
// --- FIX #1: Added basePath prop for reusability ---
|
|
basePath: string;
|
|
}
|
|
|
|
export function ProjectNavigation({ prev, next, basePath }: ProjectNavigationProps) {
|
|
if (!prev && !next) return null;
|
|
|
|
return (
|
|
// --- FIX #2: Added 'not-prose' to remove unwanted link styles ---
|
|
<div className="not-prose grid grid-cols-1 md:grid-cols-2 gap-4 mt-12 pt-8 border-t">
|
|
<div>
|
|
{prev && (
|
|
// Use the dynamic basePath
|
|
<Link href={`/${basePath}/${prev.slug}`} className="block p-4 border rounded-lg hover:border-primary transition-colors h-full">
|
|
<div className="text-sm text-muted-foreground flex items-center gap-2">
|
|
<ArrowLeft size={16} />
|
|
Previous
|
|
</div>
|
|
<div className="font-semibold truncate">
|
|
{prev.title}
|
|
</div>
|
|
</Link>
|
|
)}
|
|
</div>
|
|
<div className="md:text-right">
|
|
{next && (
|
|
// Use the dynamic basePath
|
|
<Link href={`/${basePath}/${next.slug}`} className="block p-4 border rounded-lg hover:border-primary transition-colors h-full">
|
|
<div className="text-sm text-muted-foreground flex items-center gap-2 md:justify-end">
|
|
Next
|
|
<ArrowRight size={16} />
|
|
</div>
|
|
<div className="font-semibold truncate">
|
|
{next.title}
|
|
</div>
|
|
</Link>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
} |