kennethscoffee/starr-philproperties
1
0
Fork 0
mirror of https://github.com/rgrgogu/new_starr.git synced 2026-09-27 00:12:54 +08:00
Code Issues Packages Projects Releases Wiki Activity

added more things

Browse Source
This commit is contained in:
rgrgogu
2026-08-03 18:08:40 +08:00
parent 3c7da8944f
commit 2e649fc96e
3 changed files with 108 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/modules/admin/pages/notifications/AddNotificationBroadcast.jsx
+39 -26
View File
@@ -26,7 +26,7 @@ import { DateTimePicker } from "@/components/ui/date-time-picker";
import { TARGET_TYPE_OPTIONS, TARGET_TYPE_MAP } from "@/data/notificationBroadcast.data";
import { useUnsavedChangesGuard } from "@/hooks/useUnsavedChangesGuard";
import { TIER_COLOR_OPTIONS, getTierColor, shadeColor, getContrastText } from "@/utils/tierColors";
import { TIER_COLOR_OPTIONS, getTierColor, getContrastText } from "@/utils/tierColors";
import { normalizeExternalUrl } from "@/components/generic/notificationDisplay";
import { resolveAssetSrc } from "@/utils/media.util";
@@ -451,36 +451,26 @@ export default function AddNotificationBroadcast() {
{showInSticky && (
<div className="space-y-2 pt-1">
<Label>Sticky banner color</Label>
<div className="flex flex-wrap gap-2">
<div className="flex flex-wrap gap-1.5">
{TIER_COLOR_OPTIONS.map((opt) => {
const selected = (color || "indigo") === opt.key;
const bg = selected ? shadeColor(opt.swatch, -20) : opt.swatch;
return (
<button
key={opt.key}
type="button"
title={opt.label}
onClick={() => setValue("color", opt.key, { shouldDirty: true })}
className={`flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-medium transition-all ${selected ? "scale-105 shadow-md" : "opacity-80 hover:opacity-100"}`}
style={{ backgroundColor: bg, color: getContrastText(bg, opt.key) }}
>
{selected && <Check className="size-3" />}
{opt.label}
</button>
className={[
"w-5 h-5 rounded-full border-2 transition-all",
selected
? "border-foreground scale-110 shadow-sm"
: "border-transparent hover:border-muted-foreground/50",
].join(" ")}
style={{ backgroundColor: opt.swatch }}
/>
);
})}
</div>
<div
className="w-full flex items-center justify-center gap-3 rounded-md px-3 py-2 text-sm font-semibold"
style={{ backgroundColor: getTierColor(color || "indigo").swatch, color: getContrastText(getTierColor(color || "indigo").swatch, color || "indigo") }}
>
<span className="truncate">{watch("title") || "Sticky banner preview"}</span>
{linkMode === "link" && (
<Button type="button" variant="outline" size="sm" className="shrink-0 text-foreground">
{watch("link_label") || "Open Link"}
</Button>
)}
</div>
</div>
)}
</SectionCard>
@@ -547,12 +537,35 @@ export default function AddNotificationBroadcast() {
{showInSticky && (
<SectionCard title="Preview" description="What this alert looks like when opened from the sticky banner.">
<AlertLayoutPreview
title={watch("title")}
message={watch("message")}
imageAsset={imageAsset}
linkLabel={linkMode === "link" ? (watch("link_label") || "Open Link") : null}
/>
<div className="space-y-3">
<div className="space-y-1.5">
<p className="text-xs text-muted-foreground">Sticky banner (collapsed):</p>
<div
className="w-full flex items-center justify-center gap-3 rounded-md px-3 py-2 text-sm font-semibold"
style={{
backgroundColor: getTierColor(color || "indigo").swatch,
color: getContrastText(getTierColor(color || "indigo").swatch, color || "indigo"),
}}
>
<span className="truncate">{watch("title") || "Sticky banner preview"}</span>
{linkMode === "link" && (
<Button type="button" variant="outline" size="sm" className="shrink-0 text-foreground">
{watch("link_label") || "Open Link"}
</Button>
)}
</div>
</div>
<div className="space-y-1.5">
<p className="text-xs text-muted-foreground">When clicked (full content):</p>
<AlertLayoutPreview
title={watch("title")}
message={watch("message")}
imageAsset={imageAsset}
linkLabel={linkMode === "link" ? (watch("link_label") || "Open Link") : null}
/>
</div>
</div>
</SectionCard>
)}
</>