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 }