59 lines
1.8 KiB
TypeScript
59 lines
1.8 KiB
TypeScript
import React from 'react'
|
|
import { Reveal } from './Reveal'
|
|
import { useSectionHeading } from '../api'
|
|
import { useFieldSaver } from '../admin/AdminContext'
|
|
import { InlineEdit } from './admin/InlineEdit'
|
|
|
|
type SectionHeadingProps = {
|
|
/** در صورت ارسال، تیتر و توضیح از دیتابیس خوانده و بهصورت درجا ویرایشپذیر میشوند */
|
|
headingKey?: string
|
|
title?: string
|
|
lead?: string
|
|
align?: 'right' | 'center'
|
|
tone?: 'copper' | 'ivory'
|
|
}
|
|
|
|
export function SectionHeading({
|
|
headingKey,
|
|
title,
|
|
lead,
|
|
align = 'right',
|
|
tone = 'ivory',
|
|
}: SectionHeadingProps) {
|
|
const heading = useSectionHeading(headingKey ?? '')
|
|
const save = useFieldSaver()
|
|
const isDb = !!headingKey
|
|
const currentTitle = isDb ? heading.title : (title ?? '')
|
|
const currentLead = isDb ? heading.lead : (lead ?? '')
|
|
const isCenter = align === 'center'
|
|
|
|
const saveField = (field: 'title' | 'lead', value: string) =>
|
|
save('section-headings', heading.id, { [field]: value }, (d) => {
|
|
const h = d.section_headings.find((s) => s.id === heading.id)
|
|
if (h) (h as Record<string, unknown>)[field] = value
|
|
})
|
|
|
|
return (
|
|
<Reveal className={isCenter ? 'mx-auto max-w-2xl text-center' : 'max-w-2xl ltr:text-left rtl:text-right'}>
|
|
<InlineEdit
|
|
as="h2"
|
|
value={currentTitle}
|
|
onSave={(v) => saveField('title', v)}
|
|
className={`text-section font-bold ${tone === 'copper' ? 'text-copper' : 'text-ivory'}`}
|
|
/>
|
|
|
|
{currentLead && (
|
|
<InlineEdit
|
|
as="p"
|
|
multiline
|
|
value={currentLead}
|
|
onSave={(v) => saveField('lead', v)}
|
|
className="mt-5 text-base font-light leading-9 text-ivory/60"
|
|
/>
|
|
)}
|
|
|
|
<div className={`mt-6 h-px w-24 bg-copper/70 ${isCenter ? 'mx-auto' : ''}`} />
|
|
</Reveal>
|
|
)
|
|
}
|