Dynamic Island.

iOS Dynamic Island를 모방한 확장 가능한 인터랙티브 컴포넌트입니다. 클릭이나 호버를 통해 콘텐츠를 확장하고 축소할 수 있습니다.

💎

표시할 콘텐츠 유형

사전 정의된 크기

애니메이션 스타일

축소 시 너비 (px)

축소 시 높이 (px)

확장 시 너비 (px)

확장 시 높이 (px)

축소 상태 배경색

확장 상태 배경색

애니메이션 시간 (초)

사용 예제

import DynamicIsland from "@/components/common/framer-motion/DynamicIsland";

function MyComponent() {
  const [isExpanded, setIsExpanded] = useState(false);

  return (
    <DynamicIsland
      isExpanded={isExpanded}
      onToggle={setIsExpanded}
      collapsedContent={<span>💎</span>}
      expandedContent={
        <div className="flex items-center space-x-3">
          <span>💎</span>
          <span>Dynamic Island is Active!</span>
        </div>
      }
    />
  );
}