EcrituresNumeriques / stylo / 14198984573

import clsx from 'clsx'

import React from 'react'

import { Loader } from 'lucide-react'

import styles from './CollaborativeEditorWebSocketStatus.module.scss'

export default function CollaborativeEditorWebSocketStatus({ status, state }) {

  if (status === 'connected') {

    return <></>

  }

  if (state !== 'started' || status === 'connecting') {

    return (

      <div className={clsx(styles.status, styles.connecting)}>

        <span className={clsx(styles.dot, styles.warning)}></span>

        <Loader className={styles.loadingIndicator} />

      </div>

  }

  return (

    <div className={clsx(styles.status, styles.disconnected)}>

      {status === 'disconnected' && (

        <>

          <span className={clsx(styles.dot, styles.info)}></span>

        </>

    </div>

}