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 }