Dynamic Island

<link rel="stylesheet" href="dynamic-island.css" />
<script src="dynamic-island.js" defer></script>

<script>
  document.addEventListener("DOMContentLoaded", () => {
    DynamicIsland.show({ title: "Saved", description: "All changes are in", tone: "success" });
  });
</script>

<button type="button" data-island data-island-title="Đã chép link" data-island-tone="success"
        data-island-action="Hoàn tác" data-island-action-title="Đã hoàn tác">
  Chép link
</button>

// Thông báo: neutral, success, error, info hoặc warning
DynamicIsland.show({ title: "Thẻ bị từ chối", description: "Thử thẻ khác nhé", tone: "error" });

// Đang chờ → kết quả
DynamicIsland.promise(pay(), {
  loading: "Đang thanh toán…",
  success: (receipt) => ({ title: "Đã thanh toán", description: receipt.total }),
  error: (error) => ({ title: "Thanh toán thất bại", description: error.message }),
});

// Tiến độ: vòng quanh biểu tượng, hoặc thanh ngang
const upload = DynamicIsland.show({ title: "Đang tải lên", progress: 0, progressStyle: "bar", trailing: "0%" });
upload.update({ progress: 0.6, trailing: "60%" });
upload.update({ title: "Đã tải lên", tone: "success", progress: null, trailing: undefined });

// Nút bấm
DynamicIsland.show({
  title: "Đã xoá tin nhắn",
  actions: [{ label: "Hoàn tác", variant: "primary", onClick: () => restore() }],
});

// Live activity: thu gọn cho tới khi rê chuột, focus hoặc chạm
const timer = DynamicIsland.show({
  title: "Hẹn giờ", trailing: "4:59", description: "Luộc mì", expandable: true, accent: "#ff9f0a",
  actions: [{ label: "Tạm dừng", dismiss: false, onClick: (handle) => handle.update({ description: "Đang tạm dừng" }) }],
});

import { DynamicIsland, island, useIsland } from "./DynamicIsland";

export default function Layout({ children }) {
  return (
    <>
      {children}
      <DynamicIsland position="top" />
    </>
  );
}

function SaveButton() {
  const { show, promise } = useIsland();
  return <button onClick={() => promise(save(), { loading: "Đang lưu…", success: "Đã lưu", error: "Chưa lưu được" })}>Lưu</button>;
}

// Cả bên ngoài component: trong store, API client…
island.show({ title: "Đang phát", icon: <AlbumArt />, expandable: true, trailing: "2:14" });