@loafmarkets/ui 0.1.63 → 0.1.64

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.mjs CHANGED
@@ -2684,6 +2684,11 @@ var ensureAnimationsInjected = () => {
2684
2684
  @keyframes propertyNewsSpin {
2685
2685
  to { transform: rotate(360deg); }
2686
2686
  }
2687
+
2688
+ @keyframes propertyNewsFadeIn {
2689
+ from { opacity: 0; max-height: 0; }
2690
+ to { opacity: 1; max-height: 300px; }
2691
+ }
2687
2692
  `;
2688
2693
  document.head.appendChild(style);
2689
2694
  };
@@ -2716,6 +2721,31 @@ var formatTimeAgo = (timestamp) => {
2716
2721
  if (diff < 3600) return `${Math.floor(diff / 60)}m ago`;
2717
2722
  return `${Math.floor(diff / 3600)}h ago`;
2718
2723
  };
2724
+ function getSentimentInfo(score) {
2725
+ if (score == null) return null;
2726
+ if (score > 0.15) return { arrow: "\u25B2", label: "Bullish", color: "#0ecb81" };
2727
+ if (score < -0.15) return { arrow: "\u25BC", label: "Bearish", color: "#f6465d" };
2728
+ return { arrow: "\u2014", label: "Neutral", color: "#848e9c" };
2729
+ }
2730
+ function ChevronIcon({ isOpen }) {
2731
+ return /* @__PURE__ */ jsx(
2732
+ "svg",
2733
+ {
2734
+ xmlns: "http://www.w3.org/2000/svg",
2735
+ width: "14",
2736
+ height: "14",
2737
+ viewBox: "0 0 24 24",
2738
+ fill: "currentColor",
2739
+ style: {
2740
+ color: "rgba(255,255,255,0.4)",
2741
+ transition: "transform 0.2s",
2742
+ transform: isOpen ? "rotate(90deg)" : "rotate(0deg)",
2743
+ flexShrink: 0
2744
+ },
2745
+ children: /* @__PURE__ */ jsx("path", { d: "M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z" })
2746
+ }
2747
+ );
2748
+ }
2719
2749
  var PropertyNewsUpdates = React5.forwardRef(
2720
2750
  ({
2721
2751
  className,
@@ -2738,6 +2768,7 @@ var PropertyNewsUpdates = React5.forwardRef(
2738
2768
  const [homePage, setHomePage] = React5.useState(0);
2739
2769
  const purchaseItems = purchasesProp ?? [];
2740
2770
  const [page, setPage] = React5.useState(0);
2771
+ const [expandedId, setExpandedId] = React5.useState(null);
2741
2772
  React5.useEffect(() => {
2742
2773
  ensureAnimationsInjected();
2743
2774
  }, []);
@@ -2759,6 +2790,9 @@ var PropertyNewsUpdates = React5.forwardRef(
2759
2790
  [homeFilteredItems.length]
2760
2791
  );
2761
2792
  const homePaginatedItems = homeFilteredItems.slice(homePage * ITEMS_PER_PAGE, (homePage + 1) * ITEMS_PER_PAGE);
2793
+ const toggleExpand = React5.useCallback((key) => {
2794
+ setExpandedId((prev) => prev === key ? null : key);
2795
+ }, []);
2762
2796
  return /* @__PURE__ */ jsxs(
2763
2797
  "div",
2764
2798
  {
@@ -2876,229 +2910,324 @@ var PropertyNewsUpdates = React5.forwardRef(
2876
2910
  },
2877
2911
  tab
2878
2912
  )) }),
2879
- /* @__PURE__ */ jsx(
2880
- "div",
2881
- {
2882
- className: "mt-4 flex flex-1 flex-col gap-3 overflow-visible",
2883
- style: !isPurchaseVariant && !isHomeVariant ? { minHeight: `${ITEMS_PER_PAGE * 88}px` } : void 0,
2884
- children: isPurchaseVariant ? purchaseItems.length > 0 ? purchaseItems.slice(0, 7).map((purchase, index) => {
2885
- const maxAmount = 6e4;
2886
- const barPercent = Math.min(85, Math.max(15, purchase.amount / maxAmount * 100));
2887
- const isAlternate = index % 2 === 1;
2888
- return /* @__PURE__ */ jsxs(
2889
- "div",
2890
- {
2891
- style: {
2892
- display: "flex",
2893
- justifyContent: "space-between",
2894
- alignItems: "center",
2895
- padding: "0.625rem 0.75rem",
2896
- borderBottom: "1px solid rgba(255,255,255,0.05)",
2897
- position: "relative",
2898
- overflow: "hidden",
2899
- backgroundColor: isAlternate ? "rgba(255,255,255,0.03)" : "transparent"
2900
- },
2901
- children: [
2902
- /* @__PURE__ */ jsx(
2903
- "div",
2904
- {
2905
- style: {
2906
- position: "absolute",
2907
- top: 0,
2908
- right: 0,
2909
- bottom: 0,
2910
- width: `${barPercent}%`,
2911
- background: "linear-gradient(90deg, transparent 0%, rgba(14,203,129,0.15) 100%)",
2912
- pointerEvents: "none"
2913
- }
2914
- }
2915
- ),
2916
- /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", minWidth: 0, position: "relative" }, children: [
2917
- /* @__PURE__ */ jsx("span", { style: { fontWeight: 500, fontSize: "0.875rem", color: "#fff", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }, children: purchase.name }),
2918
- /* @__PURE__ */ jsx("span", { style: { fontSize: "0.7rem", color: "var(--color-text-secondary, #848e9c)", marginTop: "0.125rem" }, children: formatTimeAgo(purchase.timestamp) })
2919
- ] }),
2920
- /* @__PURE__ */ jsxs("span", { style: { fontWeight: 600, fontSize: "0.875rem", color: "#fff", whiteSpace: "nowrap", marginLeft: "1rem", position: "relative" }, children: [
2921
- "$",
2922
- purchase.amount >= 1e6 ? `${(purchase.amount / 1e6).toFixed(2)}M` : Math.round(purchase.amount).toLocaleString()
2923
- ] })
2924
- ]
2925
- },
2926
- purchase.id
2927
- );
2928
- }) : /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", padding: "3rem 0", gap: "0.75rem" }, children: [
2929
- /* @__PURE__ */ jsx(
2930
- "div",
2931
- {
2932
- style: {
2933
- width: "28px",
2934
- height: "28px",
2935
- border: "3px solid rgba(255,255,255,0.1)",
2936
- borderTopColor: "var(--color-accent, #f0b90b)",
2937
- borderRadius: "50%",
2938
- animation: "propertyNewsSpin 1s linear infinite"
2913
+ /* @__PURE__ */ jsx("div", { className: "mt-4 flex flex-1 flex-col gap-3 overflow-visible", children: isPurchaseVariant ? purchaseItems.length > 0 ? purchaseItems.slice(0, 7).map((purchase, index) => {
2914
+ const maxAmount = 6e4;
2915
+ const barPercent = Math.min(85, Math.max(15, purchase.amount / maxAmount * 100));
2916
+ const isAlternate = index % 2 === 1;
2917
+ return /* @__PURE__ */ jsxs(
2918
+ "div",
2919
+ {
2920
+ style: {
2921
+ display: "flex",
2922
+ justifyContent: "space-between",
2923
+ alignItems: "center",
2924
+ padding: "0.625rem 0.75rem",
2925
+ borderBottom: "1px solid rgba(255,255,255,0.05)",
2926
+ position: "relative",
2927
+ overflow: "hidden",
2928
+ backgroundColor: isAlternate ? "rgba(255,255,255,0.03)" : "transparent"
2929
+ },
2930
+ children: [
2931
+ /* @__PURE__ */ jsx(
2932
+ "div",
2933
+ {
2934
+ style: {
2935
+ position: "absolute",
2936
+ top: 0,
2937
+ right: 0,
2938
+ bottom: 0,
2939
+ width: `${barPercent}%`,
2940
+ background: "linear-gradient(90deg, transparent 0%, rgba(14,203,129,0.15) 100%)",
2941
+ pointerEvents: "none"
2942
+ }
2939
2943
  }
2940
- }
2941
- ),
2942
- /* @__PURE__ */ jsx("span", { style: { fontSize: "0.8rem", color: "rgba(255,255,255,0.4)" }, children: "Awaiting offering..." })
2943
- ] }) : isHomeVariant ? hasItems ? homePaginatedItems.map((item, index) => {
2944
- const key = item.displayId ?? item.id ?? `${item.title}-${index}`;
2945
- const tagType = item.type;
2946
- const isProperty = tagType === "property";
2947
- return /* @__PURE__ */ jsxs(
2948
- "a",
2949
- {
2950
- href: item.url ?? "#",
2951
- target: "_blank",
2952
- rel: "noopener noreferrer",
2953
- style: {
2954
- display: "flex",
2955
- justifyContent: "space-between",
2956
- alignItems: "center",
2957
- padding: "0.75rem 0",
2958
- borderBottom: index < homePaginatedItems.length - 1 ? "1px solid rgba(255,255,255,0.05)" : "none",
2959
- cursor: "pointer",
2960
- textDecoration: "none",
2961
- color: "inherit"
2962
- },
2963
- children: [
2964
- /* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
2965
- /* @__PURE__ */ jsx("h3", { style: { fontSize: "0.85rem", fontWeight: 400, marginBottom: "0.25rem", color: "#f8f9fa", lineHeight: 1.4 }, children: item.title }),
2966
- /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "0.5rem", alignItems: "center", flexWrap: "wrap" }, children: [
2967
- /* @__PURE__ */ jsx("span", { style: { color: "#848e9c", fontSize: "0.7rem" }, children: typeof item.date === "string" ? item.date : formatDate(item.date) }),
2968
- item.source && /* @__PURE__ */ jsx(
2969
- "span",
2970
- {
2971
- style: {
2972
- padding: "0.1rem 0.4rem",
2973
- borderRadius: "3px",
2974
- fontSize: "0.62rem",
2975
- fontWeight: 500,
2976
- backgroundColor: "rgba(255,255,255,0.07)",
2977
- color: "#848e9c",
2978
- whiteSpace: "nowrap"
2979
- },
2980
- children: item.source
2981
- }
2982
- ),
2983
- /* @__PURE__ */ jsx(
2984
- "span",
2985
- {
2986
- style: {
2987
- padding: "0.15rem 0.4rem",
2988
- borderRadius: "2px",
2989
- fontSize: "0.65rem",
2990
- fontWeight: 500,
2991
- backgroundColor: isProperty ? "rgba(14,203,129,0.1)" : "rgba(240,185,11,0.1)",
2992
- color: isProperty ? "#0ecb81" : "#f0b90b"
2993
- },
2994
- children: isProperty ? "Property Update" : "Market News"
2995
- }
2996
- )
2997
- ] })
2998
- ] }),
2999
- /* @__PURE__ */ jsx("div", { style: { display: "flex", alignItems: "center", color: "#848e9c", marginLeft: "0.5rem" }, children: /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z" }) }) })
3000
- ]
3001
- },
3002
- key
3003
- );
3004
- }) : emptyState ?? /* @__PURE__ */ jsx("div", { className: "flex flex-col items-center justify-center py-10 text-center text-sm text-white/60", children: "No property news yet." }) : hasItems ? paginatedItems.map((item, index) => {
3005
- const absoluteIndex = page * ITEMS_PER_PAGE + index;
3006
- const key = item.displayId ?? item.id ?? `${item.title}-${absoluteIndex}`;
3007
- const styles2 = categoryStyles[item.type] ?? categoryStyles.market;
3008
- const dateLabel = item.isNew ?? (highlightFirst && absoluteIndex === 0) ? "Just now" : typeof item.date === "string" && item.date.trim().length > 0 ? item.date : formatDate(item.date);
3009
- const isHighlighted = item.isNew ?? (highlightFirst && absoluteIndex === 0);
3010
- return /* @__PURE__ */ jsxs(
3011
- "div",
3012
- {
3013
- style: {
3014
- padding: "0.75rem",
3015
- borderRadius: "6px",
3016
- backgroundColor: isHighlighted ? "rgba(14, 203, 129, 0.1)" : "transparent",
3017
- border: "1px solid transparent",
3018
- transition: "background-color 0.2s",
3019
- animation: item.isNew ? "propertyNewsSlideIn 0.5s ease-out" : void 0
3020
- },
3021
- children: [
3022
- /* @__PURE__ */ jsx("p", { style: { fontSize: "0.9375rem", fontWeight: 500, marginBottom: "0.35rem", color: "#fff" }, children: item.url ? /* @__PURE__ */ jsx(
3023
- "a",
3024
- {
3025
- href: item.url,
3026
- target: "_blank",
3027
- rel: "noopener noreferrer",
3028
- style: { color: "inherit", textDecoration: "none" },
3029
- onMouseEnter: (e) => {
3030
- e.currentTarget.style.textDecoration = "underline";
3031
- },
3032
- onMouseLeave: (e) => {
3033
- e.currentTarget.style.textDecoration = "none";
3034
- },
3035
- children: item.title
3036
- }
3037
- ) : item.title }),
3038
- /* @__PURE__ */ jsxs(
3039
- "div",
3040
- {
3041
- style: {
3042
- display: "flex",
3043
- justifyContent: "space-between",
3044
- alignItems: "center",
3045
- fontSize: "0.75rem",
3046
- color: "#b5b8c5",
3047
- gap: "0.5rem"
3048
- },
3049
- children: [
3050
- /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem", minWidth: 0 }, children: [
3051
- /* @__PURE__ */ jsx("span", { style: { color: isHighlighted ? "#0ecb81" : "inherit", whiteSpace: "nowrap" }, children: dateLabel }),
3052
- item.source && /* @__PURE__ */ jsx(
3053
- "span",
3054
- {
3055
- style: {
3056
- padding: "0.15rem 0.45rem",
3057
- borderRadius: "3px",
3058
- fontSize: "0.65rem",
3059
- fontWeight: 500,
3060
- backgroundColor: "rgba(255,255,255,0.07)",
3061
- color: "#848e9c",
3062
- whiteSpace: "nowrap",
3063
- overflow: "hidden",
3064
- textOverflow: "ellipsis",
3065
- maxWidth: "120px"
3066
- },
3067
- children: item.source
3068
- }
3069
- )
3070
- ] }),
2944
+ ),
2945
+ /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", minWidth: 0, position: "relative" }, children: [
2946
+ /* @__PURE__ */ jsx("span", { style: { fontWeight: 500, fontSize: "0.875rem", color: "#fff", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }, children: purchase.name }),
2947
+ /* @__PURE__ */ jsx("span", { style: { fontSize: "0.7rem", color: "var(--color-text-secondary, #848e9c)", marginTop: "0.125rem" }, children: formatTimeAgo(purchase.timestamp) })
2948
+ ] }),
2949
+ /* @__PURE__ */ jsxs("span", { style: { fontWeight: 600, fontSize: "0.875rem", color: "#fff", whiteSpace: "nowrap", marginLeft: "1rem", position: "relative" }, children: [
2950
+ "$",
2951
+ purchase.amount >= 1e6 ? `${(purchase.amount / 1e6).toFixed(2)}M` : Math.round(purchase.amount).toLocaleString()
2952
+ ] })
2953
+ ]
2954
+ },
2955
+ purchase.id
2956
+ );
2957
+ }) : /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", padding: "3rem 0", gap: "0.75rem" }, children: [
2958
+ /* @__PURE__ */ jsx(
2959
+ "div",
2960
+ {
2961
+ style: {
2962
+ width: "28px",
2963
+ height: "28px",
2964
+ border: "3px solid rgba(255,255,255,0.1)",
2965
+ borderTopColor: "var(--color-accent, #f0b90b)",
2966
+ borderRadius: "50%",
2967
+ animation: "propertyNewsSpin 1s linear infinite"
2968
+ }
2969
+ }
2970
+ ),
2971
+ /* @__PURE__ */ jsx("span", { style: { fontSize: "0.8rem", color: "rgba(255,255,255,0.4)" }, children: "Awaiting offering..." })
2972
+ ] }) : isHomeVariant ? hasItems ? homePaginatedItems.map((item, index) => {
2973
+ const key = item.displayId ?? item.id ?? `${item.title}-${index}`;
2974
+ const tagType = item.type;
2975
+ const isProperty = tagType === "property";
2976
+ const sentimentInfo = getSentimentInfo(item.sentimentScore);
2977
+ const isExpanded = expandedId === key;
2978
+ return /* @__PURE__ */ jsxs(
2979
+ "div",
2980
+ {
2981
+ style: {
2982
+ padding: "0.75rem 0",
2983
+ borderBottom: index < homePaginatedItems.length - 1 ? "1px solid rgba(255,255,255,0.05)" : "none"
2984
+ },
2985
+ children: [
2986
+ /* @__PURE__ */ jsxs(
2987
+ "button",
2988
+ {
2989
+ type: "button",
2990
+ onClick: () => toggleExpand(key),
2991
+ style: {
2992
+ width: "100%",
2993
+ textAlign: "left",
2994
+ background: "transparent",
2995
+ border: "none",
2996
+ cursor: "pointer",
2997
+ padding: 0,
2998
+ display: "flex",
2999
+ justifyContent: "space-between",
3000
+ alignItems: "flex-start",
3001
+ gap: "0.5rem",
3002
+ color: "inherit"
3003
+ },
3004
+ children: [
3005
+ /* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
3006
+ /* @__PURE__ */ jsx("h3", { style: { fontSize: "0.85rem", fontWeight: 400, marginBottom: "0.25rem", color: "#f8f9fa", lineHeight: 1.4 }, children: item.title }),
3007
+ /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "0.5rem", alignItems: "center", flexWrap: "wrap" }, children: [
3008
+ /* @__PURE__ */ jsx("span", { style: { color: "#848e9c", fontSize: "0.7rem" }, children: typeof item.date === "string" ? item.date : formatDate(item.date) }),
3009
+ item.source && /* @__PURE__ */ jsx(
3010
+ "span",
3011
+ {
3012
+ style: {
3013
+ padding: "0.1rem 0.4rem",
3014
+ borderRadius: "3px",
3015
+ fontSize: "0.62rem",
3016
+ fontWeight: 500,
3017
+ backgroundColor: "rgba(255,255,255,0.07)",
3018
+ color: "#848e9c",
3019
+ whiteSpace: "nowrap"
3020
+ },
3021
+ children: item.source
3022
+ }
3023
+ ),
3071
3024
  /* @__PURE__ */ jsx(
3072
3025
  "span",
3073
3026
  {
3074
3027
  style: {
3075
- padding: "0.25rem 0.6rem",
3076
- borderRadius: "4px",
3077
- border: `1px solid ${styles2.borderColor}`,
3078
- backgroundColor: styles2.backgroundColor,
3079
- color: styles2.color,
3080
- fontSize: "0.68rem",
3028
+ padding: "0.15rem 0.4rem",
3029
+ borderRadius: "2px",
3030
+ fontSize: "0.65rem",
3031
+ fontWeight: 500,
3032
+ backgroundColor: isProperty ? "rgba(14,203,129,0.1)" : "rgba(240,185,11,0.1)",
3033
+ color: isProperty ? "#0ecb81" : "#f0b90b"
3034
+ },
3035
+ children: isProperty ? "Property Update" : "Market News"
3036
+ }
3037
+ ),
3038
+ sentimentInfo && /* @__PURE__ */ jsxs(
3039
+ "span",
3040
+ {
3041
+ style: {
3042
+ fontSize: "0.65rem",
3081
3043
  fontWeight: 600,
3082
- textTransform: "uppercase",
3083
- whiteSpace: "nowrap",
3084
- flexShrink: 0
3044
+ color: sentimentInfo.color
3085
3045
  },
3086
- children: item.type === "property" ? styles2.label : "Market News"
3046
+ children: [
3047
+ sentimentInfo.arrow,
3048
+ " ",
3049
+ sentimentInfo.label
3050
+ ]
3087
3051
  }
3088
3052
  )
3089
- ]
3053
+ ] })
3054
+ ] }),
3055
+ /* @__PURE__ */ jsx("div", { style: { display: "flex", alignItems: "center", color: "#848e9c", marginLeft: "0.5rem", paddingTop: "2px" }, children: /* @__PURE__ */ jsx(ChevronIcon, { isOpen: isExpanded }) })
3056
+ ]
3057
+ }
3058
+ ),
3059
+ isExpanded && item.summary && /* @__PURE__ */ jsx(
3060
+ "div",
3061
+ {
3062
+ style: {
3063
+ marginTop: "0.625rem",
3064
+ padding: "0.75rem",
3065
+ background: "rgba(255,255,255,0.04)",
3066
+ borderRadius: "6px",
3067
+ borderLeft: `3px solid ${sentimentInfo?.color ?? "rgba(255,255,255,0.15)"}`,
3068
+ animation: "propertyNewsSlideIn 0.2s ease-out"
3069
+ },
3070
+ children: /* @__PURE__ */ jsx("p", { style: { fontSize: "0.8rem", color: "rgba(255,255,255,0.72)", lineHeight: 1.65, margin: 0 }, children: item.summary })
3071
+ }
3072
+ ),
3073
+ isExpanded && !item.summary && /* @__PURE__ */ jsx(
3074
+ "div",
3075
+ {
3076
+ style: {
3077
+ marginTop: "0.625rem",
3078
+ padding: "0.6rem 0.75rem",
3079
+ background: "rgba(255,255,255,0.03)",
3080
+ borderRadius: "6px",
3081
+ animation: "propertyNewsSlideIn 0.2s ease-out"
3082
+ },
3083
+ children: /* @__PURE__ */ jsx("p", { style: { fontSize: "0.78rem", color: "rgba(255,255,255,0.35)", fontStyle: "italic", margin: 0 }, children: "Summary not available for this article." })
3084
+ }
3085
+ )
3086
+ ]
3087
+ },
3088
+ key
3089
+ );
3090
+ }) : emptyState ?? /* @__PURE__ */ jsx("div", { className: "flex flex-col items-center justify-center py-10 text-center text-sm text-white/60", children: "No property news yet." }) : hasItems ? paginatedItems.map((item, index) => {
3091
+ const absoluteIndex = page * ITEMS_PER_PAGE + index;
3092
+ const key = item.displayId ?? item.id ?? `${item.title}-${absoluteIndex}`;
3093
+ const styles2 = categoryStyles[item.type] ?? categoryStyles.market;
3094
+ const dateLabel = item.isNew ?? (highlightFirst && absoluteIndex === 0) ? "Just now" : typeof item.date === "string" && item.date.trim().length > 0 ? item.date : formatDate(item.date);
3095
+ const isHighlighted = item.isNew ?? (highlightFirst && absoluteIndex === 0);
3096
+ const sentimentInfo = getSentimentInfo(item.sentimentScore);
3097
+ const isExpanded = expandedId === key;
3098
+ return /* @__PURE__ */ jsxs(
3099
+ "div",
3100
+ {
3101
+ style: {
3102
+ borderRadius: "6px",
3103
+ backgroundColor: isHighlighted ? "rgba(14, 203, 129, 0.1)" : "transparent",
3104
+ border: "1px solid transparent",
3105
+ transition: "background-color 0.2s",
3106
+ animation: item.isNew ? "propertyNewsSlideIn 0.5s ease-out" : void 0
3107
+ },
3108
+ children: [
3109
+ /* @__PURE__ */ jsxs(
3110
+ "button",
3111
+ {
3112
+ type: "button",
3113
+ onClick: () => toggleExpand(key),
3114
+ style: {
3115
+ width: "100%",
3116
+ textAlign: "left",
3117
+ background: "transparent",
3118
+ border: "none",
3119
+ cursor: "pointer",
3120
+ padding: "0.75rem",
3121
+ display: "block",
3122
+ color: "inherit"
3123
+ },
3124
+ children: [
3125
+ /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: "0.5rem", marginBottom: "0.35rem" }, children: [
3126
+ /* @__PURE__ */ jsx("p", { style: { fontSize: "0.9375rem", fontWeight: 500, color: "#fff", margin: 0, flex: 1, lineHeight: 1.4 }, children: item.title }),
3127
+ /* @__PURE__ */ jsx(ChevronIcon, { isOpen: isExpanded })
3128
+ ] }),
3129
+ /* @__PURE__ */ jsxs(
3130
+ "div",
3131
+ {
3132
+ style: {
3133
+ display: "flex",
3134
+ justifyContent: "space-between",
3135
+ alignItems: "center",
3136
+ fontSize: "0.75rem",
3137
+ color: "#b5b8c5",
3138
+ gap: "0.5rem"
3139
+ },
3140
+ children: [
3141
+ /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem", minWidth: 0, flexWrap: "wrap" }, children: [
3142
+ /* @__PURE__ */ jsx("span", { style: { color: isHighlighted ? "#0ecb81" : "inherit", whiteSpace: "nowrap" }, children: dateLabel }),
3143
+ item.source && /* @__PURE__ */ jsx(
3144
+ "span",
3145
+ {
3146
+ style: {
3147
+ padding: "0.15rem 0.45rem",
3148
+ borderRadius: "3px",
3149
+ fontSize: "0.65rem",
3150
+ fontWeight: 500,
3151
+ backgroundColor: "rgba(255,255,255,0.07)",
3152
+ color: "#848e9c",
3153
+ whiteSpace: "nowrap",
3154
+ overflow: "hidden",
3155
+ textOverflow: "ellipsis",
3156
+ maxWidth: "120px"
3157
+ },
3158
+ children: item.source
3159
+ }
3160
+ ),
3161
+ sentimentInfo && /* @__PURE__ */ jsxs(
3162
+ "span",
3163
+ {
3164
+ style: {
3165
+ fontSize: "0.65rem",
3166
+ fontWeight: 700,
3167
+ color: sentimentInfo.color,
3168
+ whiteSpace: "nowrap"
3169
+ },
3170
+ children: [
3171
+ sentimentInfo.arrow,
3172
+ " ",
3173
+ sentimentInfo.label
3174
+ ]
3175
+ }
3176
+ )
3177
+ ] }),
3178
+ /* @__PURE__ */ jsx(
3179
+ "span",
3180
+ {
3181
+ style: {
3182
+ padding: "0.25rem 0.6rem",
3183
+ borderRadius: "4px",
3184
+ border: `1px solid ${styles2.borderColor}`,
3185
+ backgroundColor: styles2.backgroundColor,
3186
+ color: styles2.color,
3187
+ fontSize: "0.68rem",
3188
+ fontWeight: 600,
3189
+ textTransform: "uppercase",
3190
+ whiteSpace: "nowrap",
3191
+ flexShrink: 0
3192
+ },
3193
+ children: item.type === "property" ? styles2.label : "Market News"
3194
+ }
3195
+ )
3196
+ ]
3197
+ }
3198
+ )
3199
+ ]
3200
+ }
3201
+ ),
3202
+ isExpanded && /* @__PURE__ */ jsx(
3203
+ "div",
3204
+ {
3205
+ style: {
3206
+ padding: "0 0.75rem 0.75rem",
3207
+ animation: "propertyNewsSlideIn 0.2s ease-out"
3208
+ },
3209
+ children: item.summary ? /* @__PURE__ */ jsx(
3210
+ "div",
3211
+ {
3212
+ style: {
3213
+ padding: "0.75rem",
3214
+ background: "rgba(255,255,255,0.04)",
3215
+ borderRadius: "6px",
3216
+ borderLeft: `3px solid ${sentimentInfo?.color ?? "rgba(255,255,255,0.15)"}`
3217
+ },
3218
+ children: /* @__PURE__ */ jsx("p", { style: { fontSize: "0.85rem", color: "rgba(255,255,255,0.78)", lineHeight: 1.65, margin: 0 }, children: item.summary })
3090
3219
  }
3091
- )
3092
- ]
3093
- },
3094
- key
3095
- );
3096
- }) : emptyState ?? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center rounded-2xl border border-dashed border-white/20 px-6 py-10 text-center text-sm text-white/60", children: [
3097
- /* @__PURE__ */ jsx(Newspaper, { className: "mb-3 h-8 w-8 text-white/40" }),
3098
- "No property news yet. Updates will land here as soon as we receive new intelligence."
3099
- ] })
3100
- }
3101
- ),
3220
+ ) : /* @__PURE__ */ jsx("p", { style: { fontSize: "0.78rem", color: "rgba(255,255,255,0.3)", fontStyle: "italic", margin: 0 }, children: "Summary not available for this article." })
3221
+ }
3222
+ )
3223
+ ]
3224
+ },
3225
+ key
3226
+ );
3227
+ }) : emptyState ?? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center rounded-2xl border border-dashed border-white/20 px-6 py-10 text-center text-sm text-white/60", children: [
3228
+ /* @__PURE__ */ jsx(Newspaper, { className: "mb-3 h-8 w-8 text-white/40" }),
3229
+ "No property news yet. Updates will land here as soon as we receive new intelligence."
3230
+ ] }) }),
3102
3231
  isHomeVariant && homeTotalPages > 1 ? /* @__PURE__ */ jsxs("div", { className: "mt-3 flex items-center justify-between text-xs text-white/60", children: [
3103
3232
  /* @__PURE__ */ jsx(
3104
3233
  "button",