@loafmarkets/ui 0.1.53 → 0.1.55

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.
Files changed (7) hide show
  1. package/dist/index.d.mts +2 -0
  2. package/dist/index.d.ts +2 -0
  3. package/dist/index.js +129 -9
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +129 -9
  6. package/dist/index.mjs.map +1 -1
  7. package/package.json +1 -1
package/dist/index.d.mts CHANGED
@@ -202,6 +202,8 @@ type PropertyNewsItem = {
202
202
  type?: PropertyNewsType;
203
203
  displayId?: string;
204
204
  isNew?: boolean;
205
+ source?: string;
206
+ url?: string;
205
207
  };
206
208
  type PurchaseFeedItem = {
207
209
  id: string;
package/dist/index.d.ts CHANGED
@@ -202,6 +202,8 @@ type PropertyNewsItem = {
202
202
  type?: PropertyNewsType;
203
203
  displayId?: string;
204
204
  isNew?: boolean;
205
+ source?: string;
206
+ url?: string;
205
207
  };
206
208
  type PurchaseFeedItem = {
207
209
  id: string;
package/dist/index.js CHANGED
@@ -2747,17 +2747,30 @@ var PropertyNewsUpdates = React5__namespace.forwardRef(
2747
2747
  const isHomeVariant = variant === "home";
2748
2748
  const resolvedHeading = heading ?? (isPurchaseVariant ? "Live Purchases" : "Property News & Headlines");
2749
2749
  const [homeTab, setHomeTab] = React5__namespace.useState("all");
2750
+ const [homePage, setHomePage] = React5__namespace.useState(0);
2750
2751
  const purchaseItems = purchasesProp ?? [];
2751
2752
  const [page, setPage] = React5__namespace.useState(0);
2752
2753
  React5__namespace.useEffect(() => {
2753
2754
  ensureAnimationsInjected();
2754
2755
  }, []);
2756
+ React5__namespace.useEffect(() => {
2757
+ setHomePage(0);
2758
+ }, [homeTab]);
2755
2759
  const hasItems = Array.isArray(items) && items.length > 0;
2756
2760
  const totalPages = React5__namespace.useMemo(() => hasItems ? Math.max(1, Math.ceil(items.length / ITEMS_PER_PAGE)) : 1, [hasItems, items.length]);
2757
2761
  React5__namespace.useEffect(() => {
2758
2762
  setPage((prev) => Math.min(prev, totalPages - 1));
2759
2763
  }, [totalPages]);
2760
2764
  const paginatedItems = hasItems ? items.slice(page * ITEMS_PER_PAGE, page * ITEMS_PER_PAGE + ITEMS_PER_PAGE) : [];
2765
+ const homeFilteredItems = React5__namespace.useMemo(
2766
+ () => hasItems ? items.filter((it) => homeTab === "all" || it.type === homeTab) : [],
2767
+ [hasItems, items, homeTab]
2768
+ );
2769
+ const homeTotalPages = React5__namespace.useMemo(
2770
+ () => Math.max(1, Math.ceil(homeFilteredItems.length / ITEMS_PER_PAGE)),
2771
+ [homeFilteredItems.length]
2772
+ );
2773
+ const homePaginatedItems = homeFilteredItems.slice(homePage * ITEMS_PER_PAGE, (homePage + 1) * ITEMS_PER_PAGE);
2761
2774
  return /* @__PURE__ */ jsxRuntime.jsxs(
2762
2775
  "div",
2763
2776
  {
@@ -2938,26 +2951,46 @@ var PropertyNewsUpdates = React5__namespace.forwardRef(
2938
2951
  }
2939
2952
  ),
2940
2953
  /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "0.8rem", color: "rgba(255,255,255,0.4)" }, children: "Awaiting offering..." })
2941
- ] }) : isHomeVariant ? hasItems ? items.filter((it) => homeTab === "all" || it.type === homeTab).map((item, index) => {
2954
+ ] }) : isHomeVariant ? hasItems ? homePaginatedItems.map((item, index) => {
2942
2955
  const key = item.displayId ?? item.id ?? `${item.title}-${index}`;
2943
2956
  const tagType = item.type;
2944
2957
  const isProperty = tagType === "property";
2945
2958
  return /* @__PURE__ */ jsxRuntime.jsxs(
2946
- "div",
2959
+ "a",
2947
2960
  {
2961
+ href: item.url ?? "#",
2962
+ target: "_blank",
2963
+ rel: "noopener noreferrer",
2948
2964
  style: {
2949
2965
  display: "flex",
2950
2966
  justifyContent: "space-between",
2951
2967
  alignItems: "center",
2952
2968
  padding: "0.75rem 0",
2953
- borderBottom: index < items.length - 1 ? "1px solid rgba(255,255,255,0.05)" : "none",
2954
- cursor: "pointer"
2969
+ borderBottom: index < homePaginatedItems.length - 1 ? "1px solid rgba(255,255,255,0.05)" : "none",
2970
+ cursor: "pointer",
2971
+ textDecoration: "none",
2972
+ color: "inherit"
2955
2973
  },
2956
2974
  children: [
2957
2975
  /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { flex: 1 }, children: [
2958
2976
  /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { fontSize: "0.85rem", fontWeight: 400, marginBottom: "0.25rem", color: "#f8f9fa", lineHeight: 1.4 }, children: item.title }),
2959
- /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: "0.75rem", alignItems: "center" }, children: [
2977
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: "0.5rem", alignItems: "center", flexWrap: "wrap" }, children: [
2960
2978
  /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "#848e9c", fontSize: "0.7rem" }, children: typeof item.date === "string" ? item.date : formatDate(item.date) }),
2979
+ item.source && /* @__PURE__ */ jsxRuntime.jsx(
2980
+ "span",
2981
+ {
2982
+ style: {
2983
+ padding: "0.1rem 0.4rem",
2984
+ borderRadius: "3px",
2985
+ fontSize: "0.62rem",
2986
+ fontWeight: 500,
2987
+ backgroundColor: "rgba(255,255,255,0.07)",
2988
+ color: "#848e9c",
2989
+ whiteSpace: "nowrap"
2990
+ },
2991
+ children: item.source
2992
+ }
2993
+ ),
2961
2994
  /* @__PURE__ */ jsxRuntime.jsx(
2962
2995
  "span",
2963
2996
  {
@@ -2997,7 +3030,22 @@ var PropertyNewsUpdates = React5__namespace.forwardRef(
2997
3030
  animation: item.isNew ? "propertyNewsSlideIn 0.5s ease-out" : void 0
2998
3031
  },
2999
3032
  children: [
3000
- /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "0.9375rem", fontWeight: 500, marginBottom: "0.35rem" }, children: item.title }),
3033
+ /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "0.9375rem", fontWeight: 500, marginBottom: "0.35rem" }, children: item.url ? /* @__PURE__ */ jsxRuntime.jsx(
3034
+ "a",
3035
+ {
3036
+ href: item.url,
3037
+ target: "_blank",
3038
+ rel: "noopener noreferrer",
3039
+ style: { color: "inherit", textDecoration: "none" },
3040
+ onMouseEnter: (e) => {
3041
+ e.currentTarget.style.textDecoration = "underline";
3042
+ },
3043
+ onMouseLeave: (e) => {
3044
+ e.currentTarget.style.textDecoration = "none";
3045
+ },
3046
+ children: item.title
3047
+ }
3048
+ ) : item.title }),
3001
3049
  /* @__PURE__ */ jsxRuntime.jsxs(
3002
3050
  "div",
3003
3051
  {
@@ -3006,10 +3054,31 @@ var PropertyNewsUpdates = React5__namespace.forwardRef(
3006
3054
  justifyContent: "space-between",
3007
3055
  alignItems: "center",
3008
3056
  fontSize: "0.75rem",
3009
- color: "#b5b8c5"
3057
+ color: "#b5b8c5",
3058
+ gap: "0.5rem"
3010
3059
  },
3011
3060
  children: [
3012
- /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: isHighlighted ? "#0ecb81" : "inherit" }, children: dateLabel }),
3061
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem", minWidth: 0 }, children: [
3062
+ /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: isHighlighted ? "#0ecb81" : "inherit", whiteSpace: "nowrap" }, children: dateLabel }),
3063
+ item.source && /* @__PURE__ */ jsxRuntime.jsx(
3064
+ "span",
3065
+ {
3066
+ style: {
3067
+ padding: "0.15rem 0.45rem",
3068
+ borderRadius: "3px",
3069
+ fontSize: "0.65rem",
3070
+ fontWeight: 500,
3071
+ backgroundColor: "rgba(255,255,255,0.07)",
3072
+ color: "#848e9c",
3073
+ whiteSpace: "nowrap",
3074
+ overflow: "hidden",
3075
+ textOverflow: "ellipsis",
3076
+ maxWidth: "120px"
3077
+ },
3078
+ children: item.source
3079
+ }
3080
+ )
3081
+ ] }),
3013
3082
  /* @__PURE__ */ jsxRuntime.jsx(
3014
3083
  "span",
3015
3084
  {
@@ -3021,7 +3090,9 @@ var PropertyNewsUpdates = React5__namespace.forwardRef(
3021
3090
  color: styles2.color,
3022
3091
  fontSize: "0.68rem",
3023
3092
  fontWeight: 600,
3024
- textTransform: "uppercase"
3093
+ textTransform: "uppercase",
3094
+ whiteSpace: "nowrap",
3095
+ flexShrink: 0
3025
3096
  },
3026
3097
  children: item.type === "property" ? styles2.label : "Market News"
3027
3098
  }
@@ -3039,6 +3110,55 @@ var PropertyNewsUpdates = React5__namespace.forwardRef(
3039
3110
  ] })
3040
3111
  }
3041
3112
  ),
3113
+ isHomeVariant && homeTotalPages > 1 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-3 flex items-center justify-between text-xs text-white/60", children: [
3114
+ /* @__PURE__ */ jsxRuntime.jsx(
3115
+ "button",
3116
+ {
3117
+ type: "button",
3118
+ onClick: () => setHomePage((prev) => Math.max(0, prev - 1)),
3119
+ disabled: homePage === 0,
3120
+ style: {
3121
+ background: "transparent",
3122
+ border: "1px solid rgba(255,255,255,0.15)",
3123
+ borderRadius: "999px",
3124
+ padding: "0.2rem 0.75rem",
3125
+ fontSize: "0.7rem",
3126
+ textTransform: "uppercase",
3127
+ letterSpacing: "0.15em",
3128
+ cursor: homePage === 0 ? "not-allowed" : "pointer",
3129
+ opacity: homePage === 0 ? 0.4 : 1,
3130
+ color: "rgba(255,255,255,0.6)"
3131
+ },
3132
+ children: "Prev"
3133
+ }
3134
+ ),
3135
+ /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontSize: "0.7rem", color: "rgba(255,255,255,0.5)" }, children: [
3136
+ homePage + 1,
3137
+ " / ",
3138
+ homeTotalPages
3139
+ ] }),
3140
+ /* @__PURE__ */ jsxRuntime.jsx(
3141
+ "button",
3142
+ {
3143
+ type: "button",
3144
+ onClick: () => setHomePage((prev) => Math.min(homeTotalPages - 1, prev + 1)),
3145
+ disabled: homePage >= homeTotalPages - 1,
3146
+ style: {
3147
+ background: "transparent",
3148
+ border: "1px solid rgba(255,255,255,0.15)",
3149
+ borderRadius: "999px",
3150
+ padding: "0.2rem 0.75rem",
3151
+ fontSize: "0.7rem",
3152
+ textTransform: "uppercase",
3153
+ letterSpacing: "0.15em",
3154
+ cursor: homePage >= homeTotalPages - 1 ? "not-allowed" : "pointer",
3155
+ opacity: homePage >= homeTotalPages - 1 ? 0.4 : 1,
3156
+ color: "rgba(255,255,255,0.6)"
3157
+ },
3158
+ children: "Next"
3159
+ }
3160
+ )
3161
+ ] }) : null,
3042
3162
  !isPurchaseVariant && !isHomeVariant && hasItems && totalPages > 1 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-4 flex items-center justify-between text-xs text-white/60", children: [
3043
3163
  /* @__PURE__ */ jsxRuntime.jsx(
3044
3164
  "button",