arifal
40 lines
1.1 KiB
TypeScript
40 lines
1.1 KiB
TypeScript
import type { ReactNode } from "react";
|
|
import Link from "next/link";
|
|
import { formatTripCalendarDateRangeLong } from "@/lib/trip-dates";
|
|
|
|
interface ProfileTripRowProps {
|
|
href: string;
|
|
title: string;
|
|
mountain: string;
|
|
date: Date;
|
|
endDate: Date | null;
|
|
rightSlot?: ReactNode;
|
|
}
|
|
|
|
export function ProfileTripRow({
|
|
href,
|
|
title,
|
|
mountain,
|
|
date,
|
|
endDate,
|
|
rightSlot,
|
|
}: ProfileTripRowProps) {
|
|
return (
|
|
<Link
|
|
href={href}
|
|
className="flex items-center justify-between gap-3 rounded-xl border border-neutral-200 bg-white px-3 py-2.5 transition-colors hover:border-primary-200 hover:bg-primary-50/40 sm:px-4 sm:py-3"
|
|
>
|
|
<div className="min-w-0 flex-1">
|
|
<p className="truncate text-sm font-semibold text-neutral-800">{title}</p>
|
|
<p className="truncate text-xs text-neutral-500">{mountain}</p>
|
|
<p className="mt-0.5 text-[11px] text-neutral-400 sm:text-xs">
|
|
{formatTripCalendarDateRangeLong(date, endDate)}
|
|
</p>
|
|
</div>
|
|
{rightSlot && (
|
|
<div className="shrink-0 text-right text-xs font-medium">{rightSlot}</div>
|
|
)}
|
|
</Link>
|
|
);
|
|
}
|