Timestamp

This low profile kit displays time. Elapsed, current, future, or otherwise.

Default

VStack(alignment: .leading, spacing: Spacing.small) {
  PBTimestamp(
    Date(),
    showDate: false
  )
  .frame(minWidth: minWidth, maxWidth: .infinity, alignment: .leading)

  PBTimestamp(
    Date()
  )
  .frame(minWidth: minWidth, maxWidth: .infinity, alignment: .leading)

  PBTimestamp(
    Date().addingTimeInterval(addThreeYear)
  )
  .frame(minWidth: minWidth, maxWidth: .infinity, alignment: .leading)

  PBTimestamp(
    Date().addingTimeInterval(subOneYear)
  )
  .frame(minWidth: minWidth, maxWidth: .infinity, alignment: .leading)
}

Alignments

VStack(alignment: .leading, spacing: Spacing.small) {
  Group {
    PBTimestamp(
      Date(),
      showDate: false
    )
    .frame(minWidth: minWidth, maxWidth: .infinity, alignment: .leading)
    PBTimestamp(Date())
      .frame(minWidth: minWidth, maxWidth: .infinity, alignment: .leading)
    PBTimestamp(Date().addingTimeInterval(addThreeYear))
      .frame(minWidth: minWidth, maxWidth: .infinity, alignment: .leading)
    PBTimestamp(Date().addingTimeInterval(subOneYear))
      .frame(minWidth: minWidth, maxWidth: .infinity, alignment: .leading)
  }
  Group {
    PBTimestamp(
      Date(),
      showDate: false
    )
      .frame(minWidth: minWidth, maxWidth: .infinity, alignment: .center)
    PBTimestamp(Date())
      .frame(minWidth: minWidth, maxWidth: .infinity, alignment: .center)
    PBTimestamp(Date().addingTimeInterval(addThreeYear))
      .frame(minWidth: minWidth, maxWidth: .infinity, alignment: .center)
    PBTimestamp(Date().addingTimeInterval(subOneYear))
      .frame(minWidth: minWidth, maxWidth: .infinity, alignment: .center)
  }
  Group {
    PBTimestamp(
      Date(),
      showDate: false
    )
    .frame(minWidth: minWidth, maxWidth: .infinity, alignment: .trailing)
    PBTimestamp(Date())
      .frame(minWidth: minWidth, maxWidth: .infinity, alignment: .trailing)
    PBTimestamp(Date().addingTimeInterval(addThreeYear))
      .frame(minWidth: minWidth, maxWidth: .infinity, alignment: .trailing)
    PBTimestamp(Date().addingTimeInterval(subOneYear))
      .frame(minWidth: minWidth, maxWidth: .infinity, alignment: .trailing)
  }
}

Timezones

VStack(alignment: .leading, spacing: Spacing.small) {
  Group {
    PBTimestamp(
      Date(),
      showDate: false,
      showTimeZone: true,
      timeZone: "America/New_York"
    )
    .frame(minWidth: minWidth, maxWidth: .infinity, alignment: .leading)

    PBTimestamp(
      Date(),
      showTimeZone: true,
      timeZone: "America/New_York"
    )
    .frame(minWidth: minWidth, maxWidth: .infinity, alignment: .leading)

    PBTimestamp(
      Date().addingTimeInterval(addThreeYear),
      showTimeZone: true,
      timeZone: "America/New_York"
    )
    .frame(minWidth: minWidth, maxWidth: .infinity, alignment: .leading)

    PBTimestamp(
      Date().addingTimeInterval(subOneYear),
      showTimeZone: true,
      timeZone: "America/New_York"
    )
    .frame(minWidth: minWidth, maxWidth: .infinity, alignment: .leading)
  }

  Group {
    PBTimestamp(
      Date(),
      showDate: false,
      showTimeZone: true,
      timeZone: "Asia/Hong_Kong"
    )
    .frame(minWidth: minWidth, maxWidth: .infinity, alignment: .leading)

    PBTimestamp(
      Date(),
      showTimeZone: true,
      timeZone: "Asia/Hong_Kong"
    )
    .frame(minWidth: minWidth, maxWidth: .infinity, alignment: .leading)

    PBTimestamp(
      Date().addingTimeInterval(addThreeYear),
      showTimeZone: true,
      timeZone: "Asia/Hong_Kong"
    )
    .frame(minWidth: minWidth, maxWidth: .infinity, alignment: .leading)

    PBTimestamp(
      Date().addingTimeInterval(subOneYear),
      showTimeZone: true,
      timeZone: "Asia/Hong_Kong"
    )
    .frame(minWidth: minWidth, maxWidth: .infinity, alignment: .leading)
  }
}

Last Updated by

VStack(alignment: .leading, spacing: Spacing.small) {
  PBTimestamp(
    Date().addingTimeInterval(-12),
    showUser: true,
    text: "Maricris Nanota",
    variant: .updated
  )
  .frame(minWidth: minWidth, maxWidth: .infinity, alignment: .leading)

  PBTimestamp(
    Date().addingTimeInterval(-12),
    variant: .updated
  )
  .frame(minWidth: minWidth, maxWidth: .infinity, alignment: .leading)
}

Time Ago

VStack(alignment: .leading, spacing: Spacing.small) {
  PBTimestamp(
    Date().addingTimeInterval(-10),
    showUser: true,
    text: "Maricris Nanota",
        variant: .elapsed
  )
  .frame(minWidth: minWidth, maxWidth: .infinity, alignment: .leading)

  PBTimestamp(
    Date().addingTimeInterval(-36000),
        variant: .elapsed
  )
  .frame(minWidth: minWidth, maxWidth: .infinity, alignment: .leading)

  PBTimestamp(
    Date().addingTimeInterval(-36000),
        variant: .hideUserElapsed
  )
  .frame(minWidth: minWidth, maxWidth: .infinity, alignment: .leading)
}

Props

Name	Type	Description	Default	Values
amPmStyle	`AmPmStyle`	Displays shortened or full version of "am" and "pm"	`.short`	`.short` `.full`
showDate	`Bool`	Displays date	`true`
showTimeZone	`Bool`	Displays time zone	`false`
showUser	`Bool`	Displays user's name	`false`
text	`String`	Specifies which user to display	`nil`
timeZone	`String`	Specifies which time zone to display	`nil`
variant	`Variant`	Specifies copy for last upadted	`.standard`	`.elapsed` `.standard` `.updated` `.hideUserElapsed`

Contribute to Playbook

When you start designing a new feature, you may come across a Design Token or Component that isn’t defined in Playbook. If so, you should open an issue or reach out to the team to make a contribution.

Contribute on GitHub

As the highest-rated residential remodeler in the nation, our international technology team builds a custom suite of products that continuously transform our business.

Power

Tech @ Power

Open Positions

About Power

Connect

Dribbble

Github

Connect Chat