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

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