63 lines
2.3 KiB
JavaScript
63 lines
2.3 KiB
JavaScript
import React from 'react';
|
|
|
|
const NAV = [
|
|
{ href: '/', label: 'Главная' },
|
|
{ href: '/history/', label: 'История' },
|
|
{ href: '/news/', label: 'Новости' },
|
|
{ href: '/foto/', label: 'Фото' },
|
|
{ href: 'https://forum.pushkinohistory.ru/', label: 'Форум', external: true },
|
|
];
|
|
|
|
export default function Header() {
|
|
return (
|
|
<header className="border-b border-rule bg-paper">
|
|
<div
|
|
className="relative overflow-hidden"
|
|
style={{
|
|
backgroundImage:
|
|
'linear-gradient(rgba(248,244,236,0.85), rgba(248,244,236,0.78)), url(/uploads/IMG_2156.jpg)',
|
|
backgroundSize: 'cover',
|
|
backgroundPosition: 'center 60%',
|
|
backgroundColor: '#f8f4ec',
|
|
}}
|
|
>
|
|
<div className="max-w-6xl mx-auto px-4 sm:px-6 py-8 sm:py-10">
|
|
<div className="flex flex-col sm:flex-row sm:items-end sm:justify-between gap-3">
|
|
<a href="/" className="block no-underline hover:no-underline">
|
|
<h1 className="font-serif text-3xl sm:text-4xl md:text-5xl font-bold tracking-tight text-ink leading-tight drop-shadow-[0_1px_0_rgba(248,244,236,0.6)]">
|
|
История города Пушкино
|
|
</h1>
|
|
<p className="font-serif italic text-sm sm:text-base text-muted mt-1">
|
|
от давних времён до наших дней
|
|
</p>
|
|
</a>
|
|
<a
|
|
href="/feed/"
|
|
className="text-xs uppercase tracking-wider text-muted hover:text-accent self-start sm:self-end"
|
|
title="RSS-фид"
|
|
>
|
|
RSS
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<nav className="border-t border-rule">
|
|
<div className="max-w-6xl mx-auto px-4 sm:px-6 flex flex-wrap gap-x-6 gap-y-2 py-3 text-sm">
|
|
{NAV.map((n) => (
|
|
<a
|
|
key={n.href}
|
|
href={n.href}
|
|
target={n.external ? '_blank' : undefined}
|
|
rel={n.external ? 'noopener noreferrer' : undefined}
|
|
className="text-ink hover:text-accent no-underline font-medium"
|
|
>
|
|
{n.label}
|
|
{n.external ? ' ↗' : ''}
|
|
</a>
|
|
))}
|
|
</div>
|
|
</nav>
|
|
</header>
|
|
);
|
|
}
|