feat: init

apps/web/core/components/dropdowns/merged-date.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import { observer } from "mobx-react";
+// helpers
+import { formatDateRange, getDate } from "@plane/utils";
+
+type Props = {
+  startDate: Date | string | null | undefined;
+  endDate: Date | string | null | undefined;
+  className?: string;
+};
+
+/**
+ * Formats merged date range display with smart formatting
+ * - Single date: "Jan 24, 2025"
+ * - Same year, same month: "Jan 24 - 28, 2025"
+ * - Same year, different month: "Jan 24 - Feb 6, 2025"
+ * - Different year: "Dec 28, 2024 - Jan 4, 2025"
+ */
+export const MergedDateDisplay: React.FC<Props> = observer((props) => {
+  const { startDate, endDate, className = "" } = props;
+
+  // Parse dates
+  const parsedStartDate = getDate(startDate);
+  const parsedEndDate = getDate(endDate);
+
+  const displayText = formatDateRange(parsedStartDate, parsedEndDate);
+
+  if (!displayText) {
+    return null;
+  }
+
+  return <span className={className}>{displayText}</span>;
+});