fatemeh sane
049291c109
Added animated auto-opening link modal, custom image node with isolated caption deletion, fixed single-select category data binding, improved featured image layout, and updated README.
55 lines
2.4 KiB
TypeScript
55 lines
2.4 KiB
TypeScript
import { CalendarIcon, ClockIcon } from 'lucide-react'
|
|
import type { Article } from '../data/site'
|
|
import { JALALI_TIME_FORMATTER, formatJalali } from '../utils/date'
|
|
import { toPersianDigits } from '../utils/digits'
|
|
|
|
type ArticleMetaProps = {
|
|
article: Article
|
|
className?: string
|
|
}
|
|
|
|
/**
|
|
* سربرگ نویسنده/تاریخ مقاله — زیر تیتر اصلی نمایش داده می‌شود:
|
|
* آواتار حرف اول نویسنده، نام نویسنده، تاریخ جلالی و زمان مطالعه.
|
|
*/
|
|
export function ArticleMeta({ article, className = '' }: ArticleMetaProps) {
|
|
const rawDate = (article.date ?? '').trim()
|
|
const author = (article.author ?? '').trim() || 'گروه ساختمانی آرامش'
|
|
const initial = author.charAt(0)
|
|
|
|
// تاریخ ذخیره‌شده (میلادی) به شمسی تبدیل می‌شود؛ در نبود تاریخ، امروز با ساعت نمایش داده می‌شود
|
|
const todayLabel = `${formatJalali(new Date())} — ساعت ${JALALI_TIME_FORMATTER.format(new Date())}`
|
|
const dateLabel = formatJalali(rawDate, todayLabel)
|
|
|
|
return (
|
|
<div className={`flex flex-wrap items-center gap-x-6 gap-y-4 ${className}`}>
|
|
{/* آواتار و نام نویسنده */}
|
|
<span className="flex items-center gap-3">
|
|
<span className="flex h-12 w-12 shrink-0 items-center justify-center rounded-full border border-copper/40 bg-copper/15 text-lg font-bold text-copper shadow-[0_0_20px_rgba(213,135,76,0.25),inset_0_1px_1px_rgba(255,255,255,0.2)]">
|
|
{initial}
|
|
</span>
|
|
<span className="flex flex-col">
|
|
<span className="text-sm font-bold text-ivory">{author}</span>
|
|
<span className="text-[11px] font-light text-ivory/45">نویسنده</span>
|
|
</span>
|
|
</span>
|
|
|
|
<span className="hidden h-9 w-px bg-ivory/10 sm:block" aria-hidden="true" />
|
|
|
|
{/* تاریخ جلالی */}
|
|
<span className="flex items-center gap-2 text-xs font-light text-ivory/60">
|
|
<CalendarIcon className="h-3.5 w-3.5 text-copper" aria-hidden="true" />
|
|
{dateLabel}
|
|
</span>
|
|
|
|
{/* زمان مطالعه — با ارقام فارسی */}
|
|
{article.read && (
|
|
<span className="flex items-center gap-2 text-xs font-light text-ivory/60">
|
|
<ClockIcon className="h-3.5 w-3.5 text-copper" aria-hidden="true" />
|
|
{toPersianDigits(article.read)}
|
|
</span>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|