File size: 1,750 Bytes
9205030 f4209d5 9205030 f4209d5 9205030 f4209d5 9205030 f4209d5 2b62b0c f4209d5 9205030 f4209d5 9205030 f4209d5 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 | import { Suspense, lazy } from "react";
import { MaterialIcon } from "@/components/ui/MaterialIcon";
import type { Step } from "react-joyride";
const TourGuideImpl = lazy(() => import("./TourGuideImpl").then((m) => ({ default: m.TourGuideImpl })));
const PageTourImpl = lazy(() => import("./TourGuideImpl").then((m) => ({ default: m.PageTourImpl })));
export type { Step };
const TRIGGER_GLOBAL = "pram-tour-trigger";
export function TourGuide() {
return (
<Suspense fallback={null}>
<TourGuideImpl />
</Suspense>
);
}
export function triggerGlobalTour() {
window.dispatchEvent(new CustomEvent(TRIGGER_GLOBAL));
}
// ── Page-specific tour ──
interface PageTourProps {
storageKey: string;
steps: Step[];
autoDelay?: number;
}
export function PageTour({ storageKey, steps, autoDelay }: PageTourProps) {
return (
<Suspense fallback={null}>
<PageTourImpl storageKey={storageKey} steps={steps} autoDelay={autoDelay} />
</Suspense>
);
}
export function triggerPageTour(storageKey: string) {
window.dispatchEvent(new CustomEvent(storageKey));
}
// ── Floating help button ──
interface TourHelpButtonProps {
storageKey: string;
label?: string;
}
export function TourHelpButton({ storageKey, label = "Panduan Halaman" }: TourHelpButtonProps) {
return (
<button
onClick={() => triggerPageTour(storageKey)}
title={label}
className="fixed top-4 right-4 z-40 w-10 h-10 flex items-center justify-center bg-[var(--clay-black)] text-[var(--pure-white)] shadow-lg hover:bg-[var(--warm-charcoal)] transition-all clay-hover cursor-pointer hover:scale-105 active:scale-95 rounded-full"
>
<MaterialIcon name="help" className="text-lg" />
</button>
);
}
|