Files
ghall.space/src/components/BlogHeader.astro
T
2025-08-31 23:00:38 -04:00

44 lines
685 B
Plaintext

---
import { format, add } from 'date-fns';
import CalendarIcon from '../assets/svg/calendar.svg';
interface Props {
title: string;
date: Date;
slug?: string;
}
const { title, date, slug } = Astro.props;
---
<div class="blog-header">
{slug ? <a href={`/blog/${slug}`}>{title}</a> : <h1>{title}</h1>}
<div>
<CalendarIcon class="calendar-icon" width={24} height={24} />
<strong>{format(add(new Date(date), { hours: 6 }), 'MMM do, y')}</strong>
</div>
</div>
<style>
a {
font-size: 1.3rem;
}
strong {
font-weight: bolder;
}
.blog-header {
margin: 1rem 0;
}
.blog-header > h2 {
margin: 0;
}
.calendar-icon {
transform: translateY(0.3rem);
}
</style>