"use client"; import React, { useState, useEffect, useRef, useCallback } from "react"; import { motion, AnimatePresence, useScroll, useMotionValueEvent } from "framer-motion"; // ───────────────────────────────────────────────────────────────────────────── // Types // ───────────────────────────────────────────────────────────────────────────── export type IslandPosition = | "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right"; export interface IslandSection { id: string; label: string; } export interface IslandFont { name: string; value: string; } export interface IslandTheme { name: string; /** * Accent colour. Sets `--island-color` on ``. * Bridge to your tokens: `--primary: var(--island-color);` */ color: string; /** Lighter shade — sets `--island-color-2`. */ color2?: string; } export interface DynamicIslandProps { /** * Where the island is placed on the viewport. * @default "bottom-center" */ position?: IslandPosition; /** * Page sections to track. Each `id` must match a DOM element's id attribute. * @default [{ id: "home", label: "Home" }] */ sections?: IslandSection[]; /** Label shown before any section is active. @default "Home" */ defaultSectionLabel?: string; /** * Icon beside the scroll ring. Any React node — Lucide icon, SVG, emoji. * When provided, the animated progress ring is replaced by this icon. */ sectionIcon?: React.ReactNode; /** * Font picker options. Selecting a font sets `document.body.style.fontFamily` * globally, overriding even external Google-Fonts `` tags. */ fonts?: IslandFont[]; /** Show/hide the font picker button. @default true */ showFontPicker?: boolean; /** Active font index on mount. @default 0 */ defaultFontIndex?: number; /** * Theme colour presets. Selecting one writes `--island-color` and * `--island-color-2` on `` so your CSS tokens update instantly. */ themes?: IslandTheme[]; /** Show/hide the theme picker button. @default true */ showThemePicker?: boolean; /** Active theme index on mount. @default 0 */ defaultThemeIndex?: number; /** * localStorage key prefix for persisting font/theme across refreshes. * Use unique keys per page to avoid collisions. * @default "island" */ storageKey?: string; /** Disable localStorage persistence entirely. @default false */ disablePersistence?: boolean; /** * Extra CSS classes on the outermost wrapper div. * Use to fine-tune positioning or styling. */ className?: string; /** * CSS selectors for modal-like elements. The island hides itself * whenever any matching element is visible. * @default ["[data-checkout-modal=\"true\"]", ".modal", "[role=\"dialog\"]"] */ modalSelectors?: string[]; /** Glass background colour in light mode. @default "rgba(255,255,255,0.8)" */ lightBg?: string; /** Glass background colour in dark mode. @default "#111111" */ darkBg?: string; /** Fired each time the active section changes. */ onSectionChange?: (section: IslandSection | null) => void; /** Fired each time the user picks a font. */ onFontChange?: (font: IslandFont) => void; /** Fired each time the user picks a theme. */ onThemeChange?: (theme: IslandTheme) => void; } // ───────────────────────────────────────────────────────────────────────────── // Defaults // ───────────────────────────────────────────────────────────────────────────── const DEFAULT_FONTS: IslandFont[] = [ { name: "Inter", value: "Inter, sans-serif" }, { name: "Geist", value: "'Geist', sans-serif" }, { name: "Outfit", value: "Outfit, sans-serif" }, { name: "Plus Jakarta", value: "'Plus Jakarta Sans', sans-serif" }, { name: "Poppins", value: "Poppins, sans-serif" }, { name: "Roboto", value: "Roboto, sans-serif" }, { name: "Mono", value: "'Geist Mono', monospace" }, ]; const DEFAULT_THEMES: IslandTheme[] = [ { name: "Blue", color: "#173eff", color2: "#3758f9" }, { name: "Midnight", color: "#0f172a", color2: "#1e293b" }, { name: "Emerald", color: "#10b981", color2: "#34d399" }, { name: "Violet", color: "#8b5cf6", color2: "#a78bfa" }, { name: "Crimson", color: "#e11d48", color2: "#fb7185" }, { name: "Sunset", color: "#f97316", color2: "#fb923c" }, ]; const DEFAULT_SECTIONS: IslandSection[] = [ { id: "home", label: "Home" }, ]; // ───────────────────────────────────────────────────────────────────────────── // Position → Tailwind classes helper // ───────────────────────────────────────────────────────────────────────────── function getPositionClasses(position: IslandPosition): string { switch (position) { case "top-left": return "top-4 md:top-6 left-4 md:left-6"; case "top-center": return "top-4 md:top-6 left-1/2 -translate-x-1/2"; case "top-right": return "top-4 md:top-6 right-4 md:right-6"; case "bottom-left": return "bottom-4 md:bottom-6 left-4 md:left-6"; case "bottom-right": return "bottom-4 md:bottom-6 right-4 md:right-6"; case "bottom-center": default: return "bottom-4 md:bottom-6 left-1/2 -translate-x-1/2"; } } /** * Dropdowns on top positions open downward; on bottom positions open upward. */ function getDropdownDirection(position: IslandPosition): "up" | "down" { return position.startsWith("top") ? "down" : "up"; } // ───────────────────────────────────────────────────────────────────────────── // Component // ───────────────────────────────────────────────────────────────────────────── export function DynamicIsland({ position = "bottom-center", sections = DEFAULT_SECTIONS, defaultSectionLabel = "Home", sectionIcon, fonts = DEFAULT_FONTS, showFontPicker = true, defaultFontIndex = 0, themes = DEFAULT_THEMES, showThemePicker = true, defaultThemeIndex = 0, storageKey = "island", disablePersistence = false, className = "", modalSelectors = ['[data-checkout-modal="true"]', ".modal", '[role="dialog"]'], lightBg = "rgba(255,255,255,0.8)", darkBg = "#111111", onSectionChange, onFontChange, onThemeChange, }: DynamicIslandProps) { const [activeTab, setActiveTab] = useState<"font" | "theme" | null>(null); const [currentFont, setCurrentFont] = useState(fonts[defaultFontIndex] ?? fonts[0]); const [currentTheme, setCurrentTheme] = useState(themes[defaultThemeIndex] ?? themes[0]); const [scrollProgress, setScrollProgress] = useState(0); const [currentSection, setCurrentSection] = useState(defaultSectionLabel); const [isModalOpen, setIsModalOpen] = useState(false); const islandRef = useRef(null); const { scrollYProgress } = useScroll(); const dropDir = getDropdownDirection(position); const positionCls = getPositionClasses(position); // Dropdown opens up (bottom-*) or down (top-*) const dropdownBase = dropDir === "up" ? "absolute bottom-full mb-3" : "absolute top-full mt-3"; // ── Section tracking ────────────────────────────────────────────────────── const detectSection = useCallback(() => { if (typeof window === "undefined") return; let active = defaultSectionLabel; let activeObj: IslandSection | null = null; for (const sec of sections) { const el = document.getElementById(sec.id); if (!el) continue; const rect = el.getBoundingClientRect(); if (rect.top <= window.innerHeight / 2 && rect.bottom >= window.innerHeight / 3) { active = sec.label; activeObj = sec; } } if ( sections.length > 0 && window.innerHeight + Math.round(window.scrollY) >= document.documentElement.scrollHeight - 50 ) { active = sections[sections.length - 1].label; activeObj = sections[sections.length - 1]; } setCurrentSection(active); onSectionChange?.(activeObj); }, [sections, defaultSectionLabel, onSectionChange]); useMotionValueEvent(scrollYProgress, "change", (latest) => { setScrollProgress(latest * 100); detectSection(); }); // ── Persistence: read ───────────────────────────────────────────────────── useEffect(() => { if (disablePersistence || typeof window === "undefined") return; try { const sf = localStorage.getItem(`${storageKey}-font`); if (sf) { const p: IslandFont = JSON.parse(sf); const m = fonts.find(f => f.name === p.name); if (m) setCurrentFont(m); } const st = localStorage.getItem(`${storageKey}-theme`); if (st) { const p: IslandTheme = JSON.parse(st); const m = themes.find(t => t.name === p.name); if (m) setCurrentTheme(m); } } catch {} // eslint-disable-next-line react-hooks/exhaustive-deps }, []); // ── Font effect ─────────────────────────────────────────────────────────── useEffect(() => { if (typeof document === "undefined") return; document.body.style.fontFamily = currentFont.value; if (!disablePersistence) localStorage.setItem(`${storageKey}-font`, JSON.stringify(currentFont)); onFontChange?.(currentFont); }, [currentFont, storageKey, disablePersistence, onFontChange]); // ── Theme effect ────────────────────────────────────────────────────────── useEffect(() => { if (typeof document === "undefined") return; document.documentElement.style.setProperty("--island-color", currentTheme.color); document.documentElement.style.setProperty("--island-color-2", currentTheme.color2 ?? currentTheme.color); if (!disablePersistence) localStorage.setItem(`${storageKey}-theme`, JSON.stringify(currentTheme)); onThemeChange?.(currentTheme); }, [currentTheme, storageKey, disablePersistence, onThemeChange]); // ── Modal detection ─────────────────────────────────────────────────────── useEffect(() => { if (typeof window === "undefined") return; const check = () => { const has = modalSelectors.some(sel => { const el = document.querySelector(sel); if (!el) return false; const s = window.getComputedStyle(el); return s.display !== "none" && s.visibility !== "hidden" && parseFloat(s.opacity) > 0; }); setIsModalOpen(has); }; const observer = new MutationObserver(check); observer.observe(document.body, { childList: true, subtree: true, attributes: true }); check(); const interval = setInterval(check, 1000); return () => { observer.disconnect(); clearInterval(interval); }; }, [modalSelectors]); // ── Click-outside ───────────────────────────────────────────────────────── useEffect(() => { const handler = (e: MouseEvent) => { if (islandRef.current && !islandRef.current.contains(e.target as Node)) setActiveTab(null); }; document.addEventListener("mousedown", handler); return () => document.removeEventListener("mousedown", handler); }, []); if (isModalOpen) return null; const accentColor = currentTheme.color; return (
{/* ── Font Picker ── */} {showFontPicker && fonts.length > 0 && (
{activeTab === "font" && ( {fonts.map((font) => ( ))} )}
)} {showFontPicker && fonts.length > 0 && (
)} {/* ── Scroll Progress + Section ── */} {showThemePicker && themes.length > 0 && (
)} {/* ── Theme Picker ── */} {showThemePicker && themes.length > 0 && (
{activeTab === "theme" && ( {themes.map((theme) => ( ))} )}
)}
); } // ───────────────────────────────────────────────────────────────────────────── // Demo — rendered by the Lightswind UI docs preview // ───────────────────────────────────────────────────────────────────────────── export default function DynamicIslandDemo() { return (

Dynamic Island — use the position prop to place it anywhere

{/* Static preview strip (not fixed, rendered inline) */}
); }