59 lines
2.0 KiB
TypeScript
59 lines
2.0 KiB
TypeScript
"use client"
|
|
|
|
import Link from "next/link"
|
|
import Image from "next/image"
|
|
import { useEffect, useState } from "react"
|
|
|
|
interface Post {
|
|
slug: string
|
|
title: string
|
|
date: string
|
|
excerpt?: string
|
|
}
|
|
|
|
export default function Navbar() {
|
|
const [posts, setPosts] = useState<Post[]>([])
|
|
|
|
useEffect(() => {
|
|
fetch("/api/posts")
|
|
.then((res) => res.json())
|
|
.then((data) => setPosts(data))
|
|
.catch((err) => console.error("Error fetching posts:", err))
|
|
}, [])
|
|
|
|
return (
|
|
<nav className="fixed top-0 left-0 right-0 z-50 bg-black/90 backdrop-blur-sm border-b border-red-600/20 font-mono">
|
|
<div className="container max-w-screen px-8">
|
|
<div className="flex items-center justify-between h-16">
|
|
{/* Left side - Logo and title */}
|
|
<Link href="/" className="flex items-center space-x-3 hover:opacity-80 transition-opacity">
|
|
<div className="w-8 h-8 rounded-sm flex items-center justify-center">
|
|
<Image className="rounded-sm" src="/cover.jpg" height={100} width={100} alt="DAMN. album cover"/>
|
|
</div>
|
|
<span className="text-red-600 font-bold text-xl tracking-wider">DAMN.</span>
|
|
</Link>
|
|
|
|
{/* Right side - Posts navigation */}
|
|
<div className="hidden md:flex items-center space-x-8">
|
|
{posts.map((post) => (
|
|
<Link
|
|
key={post.slug}
|
|
href={`/posts/${post.slug}`}
|
|
className="text-gray-300 hover:text-red-400 transition-colors text-sm uppercase tracking-wide"
|
|
>
|
|
{post.title}
|
|
</Link>
|
|
))}
|
|
</div>
|
|
|
|
{/* Mobile menu button */}
|
|
{/*<button className="md:hidden text-white">*/}
|
|
{/* <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">*/}
|
|
{/* <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />*/}
|
|
{/* </svg>*/}
|
|
{/*</button>*/}
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
)
|
|
} |