github.com/tilt-dev/tilt@v0.36.0/web/src/SnapshotBar.tsx (about)

     1  import moment from "moment"
     2  import React from "react"
     3  import styled from "styled-components"
     4  import { usePathBuilder } from "./PathBuilder"
     5  import { useSnapshotAction } from "./snapshot"
     6  import { Color, FontSize, SizeUnit } from "./style-helpers"
     7  
     8  const SnapshotBanner = styled.div`
     9    background-color: ${Color.offWhite};
    10    box-sizing: border-box;
    11    color: ${Color.black};
    12    font-size: ${FontSize.small};
    13    height: ${SizeUnit(1)};
    14    padding: 3px 10px;
    15    width: 100%;
    16  
    17    /* There's a small layout shift in the header
    18    bar on Detail View because of the scrollbar,
    19    so offset it on Table View */
    20    &.is-grid {
    21      margin-bottom: -2px;
    22    }
    23  `
    24  
    25  const SnapshotTitle = styled.span`
    26    font-weight: bold;
    27    text-decoration: underline;
    28  `
    29  
    30  export function SnapshotBar(props: { className?: string }) {
    31    const pb = usePathBuilder()
    32    const { currentSnapshotTime } = useSnapshotAction()
    33  
    34    const isSnapshot = pb.isSnapshot()
    35    if (!isSnapshot) {
    36      return null
    37    }
    38  
    39    let timestampDescription = ""
    40    if (currentSnapshotTime?.createdAt) {
    41      const createdAt = moment(currentSnapshotTime?.createdAt).format("lll")
    42      timestampDescription = `(created at ${createdAt})`
    43    } else if (currentSnapshotTime?.tiltUpTime) {
    44      const tiltUpTime = moment(currentSnapshotTime?.tiltUpTime).format("lll")
    45      timestampDescription = `(session started at ${tiltUpTime})`
    46    }
    47  
    48    return (
    49      <SnapshotBanner role="status" className={props.className}>
    50        <SnapshotTitle>Snapshot</SnapshotTitle> {timestampDescription}
    51      </SnapshotBanner>
    52    )
    53  }