Dynamic island

1"use client";2 3import {} from "react";4import type { HTMLAttributes, ReactNode } from "react";5import { ViewTransitionSafe } from "./ViewTransitionSafe";6 7export type DynamicIslandProps = Omit<8  HTMLAttributes<HTMLDivElement>,9  "children"10> & {11  /** Current content. Swap it inside startTransition or runViewTransition. */12  children: ReactNode;13};14 15/**16 * A compact pill that springs open into richer states and settles back. The17 * shell morphs with a soft overshoot while the content reveals from the top18 * of the growing frame. Updates run through React's <ViewTransition>, so the19 * state change must be wrapped in a transition to animate.20 */21export function DynamicIsland({22  children,23  className = "",24  ...props25}: DynamicIslandProps) {26  return (27    <ViewTransitionSafe update="vt-move vt-slow vt-spring vt-clip vt-inverse">28      <div {...props} className={`dynamic-island ${className}`}>