github.com/tilt-dev/tilt@v0.33.15-0.20240515162809-0a22ed45d8a0/web/src/SocketBar.tsx (about)

     1  import React from "react"
     2  import styled, { keyframes } from "styled-components"
     3  import { Color, ColorAlpha, ColorRGBA, ZIndex } from "./style-helpers"
     4  import { SocketState } from "./types"
     5  
     6  type SocketBarProps = {
     7    state: SocketState
     8  }
     9  
    10  let pulse = keyframes`
    11    0% {
    12      background-color: ${Color.yellow};
    13    }
    14    50% {
    15      background-color: ${Color.yellowLight};
    16    }
    17    100% {
    18      background-color: ${Color.yellow};
    19    }
    20  `
    21  
    22  export let SocketBarRoot = styled.div`
    23    position: fixed;
    24    z-index: ${ZIndex.SocketBar};
    25    width: 100vw;
    26    display: flex;
    27    top: 0;
    28    left: 0;
    29  `
    30  
    31  let Bar = styled.div`
    32    color: ${Color.gray10};
    33    background-color: ${Color.yellow};
    34    margin: auto;
    35    margin-top: 64px;
    36    padding: 8px 16px;
    37    border-radius: 3px;
    38    box-shadow: -5px 5px 0 0 ${ColorRGBA(Color.gray10, ColorAlpha.almostOpaque)};
    39    text-align: center;
    40    animation: ${pulse} 3s ease infinite;
    41  `
    42  
    43  export function isTiltSocketConnected(state: SocketState) {
    44    if (
    45      state === SocketState.Reconnecting ||
    46      state === SocketState.Closed ||
    47      state === SocketState.Loading
    48    ) {
    49      return false
    50    }
    51  
    52    return true
    53  }
    54  
    55  export default function SocketBar(props: SocketBarProps) {
    56    let state = props.state
    57    let message = ""
    58    if (state === SocketState.Reconnecting) {
    59      message = "Connection failed: reconnecting…"
    60    } else if (state === SocketState.Loading) {
    61      message = "Connecting…"
    62    }
    63  
    64    if (!message) {
    65      return null
    66    }
    67    return (
    68      <SocketBarRoot>
    69        <Bar>{message}</Bar>
    70      </SocketBarRoot>
    71    )
    72  }