Activity dot

Playground

'use client';
import { ActivityDot, type ActivityDotState } from '@mbsw/ui';

export default function Demo() {
  const settings = {
    "state": "active"
  };
  return (
    <div style={{ transform: 'scale(2)' }}>
      <ActivityDot
        state={settings.state as ActivityDotState}
        label={
          settings.state === 'active'
            ? "활동 중"
            : "대기 중"
        }
      />
    </div>
  );
}

Properties

State

Usage

active와 idle 시각 상태를 표시합니다. 앱의 활동 데이터에 맞게 상태를 설정합니다.

'use client';
import { ActivityDot } from '@mbsw/ui';

export default function Example() {
  return <ActivityDot state="active" label={"활동 중"} />;
}

Playground의 Code 탭에서 현재 설정과 동작이 포함된 예제 전체를 복사할 수 있습니다. 공통 CSS 설치는 설치하기를 확인하세요.

Composition

ActivityDot