This low profile kit displays time. Elapsed, current, future, or otherwise.
import React from 'react' import Timestamp from '../_timestamp' const todaysDate = new Date() const futureYear = new Date().getFullYear() + 4 const pastYear = new Date().getFullYear() - 1 const month = new Date().getMonth() const date = new Date().getDate() const hours = new Date().getHours() const minutes = new Date().getMinutes() const futureDate = new Date(futureYear, month, date, hours, minutes) const pastDate = new Date(pastYear, month, date, hours, minutes) const TimestampDefault = (props) => { return ( <div> <Timestamp align="left" showDate={false} timestamp={todaysDate} {...props} /> <br /> <Timestamp align="left" showDate timestamp={todaysDate} {...props} /> <br /> <Timestamp align="left" showDate timestamp={futureDate} {...props} /> <br /> <Timestamp align="left" showDate timestamp={pastDate} {...props} /> </div> ) } export default TimestampDefault
import React from 'react' import Timestamp from '../_timestamp' const todaysDate = new Date() const futureYear = new Date().getFullYear() + 4 const pastYear = new Date().getFullYear() - 1 const month = new Date().getMonth() const date = new Date().getDate() const hours = new Date().getHours() const minutes = new Date().getMinutes() const futureDate = new Date(futureYear, month, date, hours, minutes) const pastDate = new Date(pastYear, month, date, hours, minutes) const TimestampAlign = (props) => { return ( <div> <Timestamp align="left" showDate={false} timestamp={todaysDate} {...props} /> <br /> <Timestamp align="left" showDate timestamp={todaysDate} {...props} /> <br /> <Timestamp align="left" showDate timestamp={futureDate} {...props} /> <br /> <Timestamp align="left" showDate timestamp={pastDate} {...props} /> <br /> <br /> <Timestamp align="center" showDate={false} timestamp={todaysDate} {...props} /> <br /> <Timestamp align="center" showDate timestamp={todaysDate} {...props} /> <br /> <Timestamp align="center" showDate timestamp={futureDate} {...props} /> <br /> <Timestamp align="center" showDate timestamp={pastDate} {...props} /> <br /> <br /> <Timestamp align="right" showDate={false} timestamp={todaysDate} {...props} /> <br /> <Timestamp align="right" showDate timestamp={todaysDate} {...props} /> <br /> <Timestamp align="right" showDate timestamp={futureDate} {...props} /> <br /> <Timestamp align="right" showDate timestamp={pastDate} {...props} /> </div> ) } export default TimestampAlign
import React from 'react' import Timestamp from '../_timestamp' const todaysDate = new Date() const futureYear = new Date().getFullYear() + 4 const pastYear = new Date().getFullYear() - 1 const month = new Date().getMonth() const date = new Date().getDate() const hours = new Date().getHours() const minutes = new Date().getMinutes() const futureDate = new Date(futureYear, month, date, hours, minutes) const pastDate = new Date(pastYear, month, date, hours, minutes) const TimestampTimezones = (props) => { return ( <div> <Timestamp align="left" showDate={false} showTimezone timestamp={todaysDate} timezone="America/New_York" {...props} /> <br /> <Timestamp align="left" showDate showTimezone timestamp={todaysDate} timezone="America/New_York" {...props} /> <br /> <Timestamp align="left" showDate showTimezone timestamp={futureDate} timezone="America/New_York" {...props} /> <br /> <Timestamp align="left" showDate showTimezone timestamp={pastDate} timezone="America/New_York" {...props} /> <br /> <Timestamp align="left" showDate={false} showTimezone timestamp={todaysDate} timezone="Asia/Hong_Kong" {...props} /> <br /> <Timestamp align="left" showDate showTimezone timestamp={todaysDate} timezone="Asia/Hong_Kong" {...props} /> <br /> <Timestamp align="left" showDate showTimezone timestamp={futureDate} timezone="Asia/Hong_Kong" {...props} /> <br /> <Timestamp align="left" showDate showTimezone timestamp={pastDate} timezone="Asia/Hong_Kong" {...props} /> </div> ) } export default TimestampTimezones
import React from 'react' import Timestamp from '../_timestamp' const todaysDate = new Date() const TimestampUpdated = (props) => { return ( <div> <Timestamp showUser text="Maricris Nonato" timestamp={todaysDate} variant="updated" {...props} /> <br /> <Timestamp showUser={false} timestamp={todaysDate} variant="updated" {...props} /> </div> ) } export default TimestampUpdated
import React from 'react' import Timestamp from '../_timestamp' const todaysDate = new Date() const year = new Date().getFullYear() const month = new Date().getMonth() const date = new Date().getDate() const hours = new Date().getHours() - 10 const minutes = new Date().getMinutes() const customDate = new Date(year, month, date, hours, minutes) const TimestampElapsed = (props) => { return ( <div> <Timestamp showUser text="Maricris Nonato" timestamp={todaysDate} variant="elapsed" {...props} /> <br /> <Timestamp showUser={false} timestamp={customDate} variant="elapsed" {...props} /> <br /> <Timestamp hideUpdated showUser={false} timestamp={customDate} variant="elapsed" {...props} /> </div> ) } export default TimestampElapsed
Leave the text style as is. Don’t use timestamps to display important or sensitive time information.