arifal
73 lines
2.3 KiB
TypeScript
73 lines
2.3 KiB
TypeScript
interface TripProgramBlockProps {
|
|
meetingPoint: string | null;
|
|
itinerary: string | null;
|
|
whatsIncluded: string | null;
|
|
whatsExcluded: string | null;
|
|
}
|
|
|
|
export function TripProgramBlock({
|
|
meetingPoint,
|
|
itinerary,
|
|
whatsIncluded,
|
|
whatsExcluded,
|
|
}: TripProgramBlockProps) {
|
|
const hasAny =
|
|
meetingPoint || itinerary || whatsIncluded || whatsExcluded;
|
|
if (!hasAny) return null;
|
|
|
|
return (
|
|
<div className="space-y-4 rounded-xl border border-neutral-200 bg-neutral-50/50 p-4 sm:p-5">
|
|
<h2 className="text-xs font-bold text-neutral-800 sm:text-sm">
|
|
Detail perjalanan
|
|
</h2>
|
|
|
|
{meetingPoint && (
|
|
<div>
|
|
<h3 className="mb-1 text-[11px] font-bold uppercase tracking-wide text-primary-700 sm:text-xs">
|
|
Meeting point
|
|
</h3>
|
|
<p className="whitespace-pre-wrap text-xs leading-relaxed text-neutral-700 sm:text-sm">
|
|
{meetingPoint}
|
|
</p>
|
|
</div>
|
|
)}
|
|
|
|
{itinerary && (
|
|
<div>
|
|
<h3 className="mb-1 text-[11px] font-bold uppercase tracking-wide text-primary-700 sm:text-xs">
|
|
Itinerary
|
|
</h3>
|
|
<p className="whitespace-pre-wrap text-xs leading-relaxed text-neutral-700 sm:text-sm">
|
|
{itinerary}
|
|
</p>
|
|
</div>
|
|
)}
|
|
|
|
{(whatsIncluded || whatsExcluded) && (
|
|
<div className="grid gap-4 sm:grid-cols-2">
|
|
{whatsIncluded && (
|
|
<div className="rounded-lg border border-secondary-200 bg-white p-3">
|
|
<h3 className="mb-2 text-[11px] font-bold uppercase tracking-wide text-secondary-800 sm:text-xs">
|
|
Termasuk
|
|
</h3>
|
|
<p className="whitespace-pre-wrap text-xs leading-relaxed text-neutral-700 sm:text-sm">
|
|
{whatsIncluded}
|
|
</p>
|
|
</div>
|
|
)}
|
|
{whatsExcluded && (
|
|
<div className="rounded-lg border border-neutral-200 bg-white p-3">
|
|
<h3 className="mb-2 text-[11px] font-bold uppercase tracking-wide text-neutral-600 sm:text-xs">
|
|
Tidak termasuk
|
|
</h3>
|
|
<p className="whitespace-pre-wrap text-xs leading-relaxed text-neutral-700 sm:text-sm">
|
|
{whatsExcluded}
|
|
</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|