Line data    Source code

       1              : import * as React from 'react';
       2              : import * as styles from './spinners.module.css';
       3              : 
       4              : import { classNames } from '../../utils/classnames.js';
       5              : 
       6              : interface RectangleWaveSpinnerProps {
       7              :     className?: string;
       8              :     color?: string;
       9              :     active: boolean;
      10              : }
      11              : 
      12              : export const CenteredRectangleWaveSpinner: React.FC<RectangleWaveSpinnerProps> = (
      13              :     props: RectangleWaveSpinnerProps,
      14              : ) => {
      15              :     return (
      16              :         <div className={styles.rw_container}>
      17              :             <RectangleWaveSpinner className={props.className} active={props.active} color={props.color} />
      18              :         </div>
      19              :     );
      20              : };
      21              : 
      22            1 : export const RectangleWaveSpinner: React.FC<RectangleWaveSpinnerProps> = (props: RectangleWaveSpinnerProps) => {
      23            1 :     const s = {
      24            1 :         backgroundColor: props.color || 'var(--color_fg)',
      25            1 :     };
      26            1 :     return (
      27            1 :         <div className={classNames(props.className, styles.rw)}>
      28            1 :             <div
      29            1 :                 className={classNames(styles.rw_rect_1, {
      30            1 :                     [styles.rw_rect_active]: props.active,
      31            1 :                 })}
      32            1 :                 style={s}
      33            1 :             />
      34            1 :             <div
      35            1 :                 className={classNames(styles.rw_rect_2, {
      36            1 :                     [styles.rw_rect_active]: props.active,
      37            1 :                 })}
      38            1 :                 style={s}
      39            1 :             />
      40            1 :             <div
      41            1 :                 className={classNames(styles.rw_rect_3, {
      42            1 :                     [styles.rw_rect_active]: props.active,
      43            1 :                 })}
      44            1 :                 style={s}
      45            1 :             />
      46            1 :             <div
      47            1 :                 className={classNames(styles.rw_rect_4, {
      48            1 :                     [styles.rw_rect_active]: props.active,
      49            1 :                 })}
      50            1 :                 style={s}
      51            1 :             />
      52            1 :             <div
      53            1 :                 className={classNames(styles.rw_rect_5, {
      54            1 :                     [styles.rw_rect_active]: props.active,
      55            1 :                 })}
      56            1 :                 style={s}
      57            1 :             />
      58            1 :         </div>
      59              :     );
      60            1 : };