75 lines
2.7 KiB
TypeScript
75 lines
2.7 KiB
TypeScript
import React from 'react';
|
||
import { Reveal } from '../Reveal';
|
||
import { SectionHeading } from '../SectionHeading';
|
||
import { useSectionHeading, useSite } from '../../api';
|
||
import { AddItemButton, EditableItem, SingletonPill } from '../../admin/Editable';
|
||
import { InlineEdit } from '../admin/InlineEdit';
|
||
import { useFieldSaver } from '../../admin/AdminContext';
|
||
import { useLang, formatNumber } from '../../i18n/lang';
|
||
|
||
export function WhyUs() {
|
||
const { why_us } = useSite();
|
||
const { lang } = useLang();
|
||
const heading = useSectionHeading('why_us');
|
||
const save = useFieldSaver();
|
||
|
||
const saveItem = (id: number, changes: Record<string, unknown>) =>
|
||
save('why-us', id, changes, (d) => {
|
||
const it = d.why_us.find((x) => x.id === id);
|
||
if (it) Object.assign(it, changes);
|
||
});
|
||
|
||
return (
|
||
<section className="bg-ink py-24 lg:py-32" aria-labelledby="why-title">
|
||
<div className="mx-auto grid max-w-site gap-14 px-6 lg:grid-cols-12 lg:px-10">
|
||
<div className="lg:col-span-5">
|
||
<SectionHeading
|
||
title={heading.title}
|
||
lead={heading.lead}
|
||
headingKey="why_us" />
|
||
|
||
{heading.image && (
|
||
<Reveal delay={0.12}>
|
||
<img
|
||
src={heading.image}
|
||
alt={heading.title}
|
||
className="mt-10 h-80 w-full object-cover" />
|
||
|
||
</Reveal>
|
||
)}
|
||
</div>
|
||
|
||
<div className="lg:col-span-7">
|
||
<div className="grid gap-x-10 gap-y-px sm:grid-cols-2">
|
||
{why_us.map((item, i) =>
|
||
<Reveal key={item.id} delay={0.05 * i}>
|
||
<EditableItem resource="why_us" item={item}>
|
||
<div className="flex h-full flex-col border-t border-ivory/10 py-8">
|
||
<span className="text-xs font-light text-copper">{lang === 'fa' ? `۰${formatNumber(i + 1, lang)}` : formatNumber(i + 1, lang).padStart(2, '0')}</span>
|
||
<h3 className="mt-4 text-lg font-bold text-ivory">
|
||
<InlineEdit
|
||
value={item.title}
|
||
onSave={(v) => saveItem(item.id, { title: v })}
|
||
/>
|
||
</h3>
|
||
<p className="mt-3 text-sm font-light leading-8 text-ivory/55">
|
||
<InlineEdit
|
||
multiline
|
||
value={item.desc}
|
||
onSave={(v) => saveItem(item.id, { desc: v })}
|
||
/>
|
||
</p>
|
||
</div>
|
||
</EditableItem>
|
||
</Reveal>
|
||
)}
|
||
</div>
|
||
<div className="mt-8">
|
||
<AddItemButton resource="why_us" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>);
|
||
|
||
}
|