playbook_ui_docs 12.36.0.pre.alpha.PLAY942collapsiblenav21035 → 12.36.0.pre.alpha.svgiconmethods1059

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b453a77a2422494201dd6202d01f9b3aff94e53065d91b29c1b2a8eb27438701
-  data.tar.gz: 6dd607e3ecf738ad46073dee29bd6a6ba9b1e046d90e88621bae4323cf7b022b
+  metadata.gz: 40a0b8b840f08f4f592d810168905fa77f431b2edc0382bb2664b71b177d54cb
+  data.tar.gz: 795e80d49d33b384f3864441c858f1c8925153e5a34e6e0b1427f246b02e0059
 SHA512:
-  metadata.gz: e09acd61f4b5a6d425ecc37153e673ba42c2ab3dd679426be13626d85641b2ecef53836621e8b37f6277e26d5d09cd27bec0089ddaeca716a153561b5ec2acbc
-  data.tar.gz: 4109215a81dd5453ad4215537e3b5fe7ed95a0673b36457711588412304fedca1e3df2783cecf79ce30a5311d9590cca062b612657210545eb2ff30742e0d9cb
+  metadata.gz: e2555c18b8806ff4bebaf36c50f1da95fa79bc251c14416288593cf7d4e2e051d8596fdc01b1276d3a13d51794132d00d5b834ac917dcd0cecf23c7ff8c514e2
+  data.tar.gz: '00823a06c9e4ef61fe0d0b885ce2f3948fb9cbd39c31e7b583560ecdcadaa4f9b69df89d60ea87520a86c08d6cde1a57997c2469c32b6c21245f03539bd04695'

data/app/pb_kits/playbook/pb_badge/docs/_badge_colors_swift.md

@@ -0,0 +1,33 @@
+![badge-colors](https://github.com/powerhome/playbook/assets/92755007/52ce34ef-eb0d-48c0-9232-89edfff60cef)
+
+```swift
+HStack {
+  PBBadge(text: "1", rounded: true, variant: .chat)
+  PBBadge(text: "4", variant: .chat)
+  PBBadge(text: "1000", variant: .chat)
+
+  PBBadge(text: "1", rounded: true, variant: .error)
+  PBBadge(text: "4", variant: .error)
+  PBBadge(text: "1000", variant: .error)
+
+  PBBadge(text: "1", rounded: true, variant: .info)
+  PBBadge(text: "4", variant: .info)
+  PBBadge(text: "1000", variant: .info)
+
+  PBBadge(text: "1", rounded: true, variant: .neutral)
+  PBBadge(text: "4", variant: .neutral)
+  PBBadge(text: "1000", variant: .neutral)
+
+  PBBadge(text: "1", rounded: true, variant: .primary)
+  PBBadge(text: "4", variant: .primary)
+  PBBadge(text: "1000", variant: .primary)
+
+  PBBadge(text: "1", rounded: true, variant: .success)
+  PBBadge(text: "4", variant: .success)
+  PBBadge(text: "1000", variant: .success)
+
+  PBBadge(text: "1", rounded: true, variant: .warning)
+  PBBadge(text: "4", variant: .warning)
+  PBBadge(text: "1000", variant: .warning)
+ }
+```

data/app/pb_kits/playbook/pb_badge/docs/_badge_default_swift.md

@@ -0,0 +1,9 @@
+![badge-rectangle](https://github.com/powerhome/playbook/assets/92755007/04188c68-84f0-475b-9764-7b9a325f73da)
+
+```swift
+HStack {
+  PBBadge(text: "+1", variant: .primary)
+  PBBadge(text: "+4", variant: .primary)
+  PBBadge(text: "+1000", variant: .primary)
+ }
+```

data/app/pb_kits/playbook/pb_badge/docs/_badge_notification_swift.md

@@ -0,0 +1,9 @@
+![badge-chat-notification](https://github.com/powerhome/playbook/assets/92755007/f769c3bc-6a63-465d-8538-3efb5f3ec0d3)
+
+```swift
+HStack {
+  PBBadge(text: "1", rounded: true, variant: .chat)
+  PBBadge(text: "4", variant: .chat)
+  PBBadge(text: "1000", variant: .chat)
+ }
+```

data/app/pb_kits/playbook/pb_badge/docs/_badge_props_swift.md

@@ -0,0 +1,6 @@
+### Props
+| Name | Type | Description | Default | Values |
+| --- | ----------- | --------- | --------- | --------- |
+| **text** | `String` | Specifies the value of the Badge |  |  |
+| **rounded** | `Bool` | Displays the rounded variant | `false` |  |
+| **variant** | `Variant` | Changes the color of the Badge | `.primary` | `.chat` `.error` `.info` `.neutral` `.primary` `.success` `.warning` |

data/app/pb_kits/playbook/pb_badge/docs/_badge_rounded_swift.md

@@ -0,0 +1,9 @@
+![badge-rounded](https://github.com/powerhome/playbook/assets/92755007/775a906f-0108-4ee1-a277-e7b9f2715a2b)
+
+```swift
+HStack {
+  PBBadge(text: "+1", rounded: true, variant: .primary)
+  PBBadge(text: "+4", rounded: true, variant: .primary)
+  PBBadge(text: "+1000", rounded: true, variant: .primary)
+ }
+```

data/app/pb_kits/playbook/pb_badge/docs/example.yml

@@ -10,3 +10,10 @@ examples:
   - badge_rounded: Rounded
   - badge_colors: Colors
   - badge_notification: Notification
+
+  swift:
+  - badge_default_swift: Rectangle
+  - badge_rounded_swift: Rounded
+  - badge_colors_swift: Colors
+  - badge_notification_swift: Notification
+  - badge_props_swift: ""

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_icons.jsx

@@ -1,17 +1,8 @@
 import React from 'react'
-import { Collapsible, useCollapsible, Button } from '../..'
+import { Collapsible } from '../..'
 
-const CollapsibleIcons = () => {
-  const [isCollapsed, setIsCollapsed] = useCollapsible(true)
-
-  return (
-  <>
-  <Button onClick={()=> setIsCollapsed(!isCollapsed)}>
-        {isCollapsed ? "Expand" : "Collapse"}
-  </Button>
-  <Collapsible collapsed={isCollapsed}
-      icon={['plus','minus']}
-  >
+const CollapsibleIcons = () => (
+  <Collapsible icon={['plus','minus']}>
     <Collapsible.Main>
       <div>{'Main Section'}</div>
     </Collapsible.Main>
@@ -23,8 +14,6 @@ const CollapsibleIcons = () => {
       </div>
     </Collapsible.Content>
   </Collapsible>
-  </>
-  )
-}
+)
 
 export default CollapsibleIcons

data/app/pb_kits/playbook/pb_collapsible/docs/example.yml

@@ -4,10 +4,10 @@ examples:
   - collapsible_default: Default
   - collapsible_size: Size
   - collapsible_color: Color
-  - collapsible_icons: Custom Icons
+  # - collapsible_icons: Custom Icons
 
   react:
   - collapsible_default: Default
   - collapsible_size: Size
   - collapsible_color: Color
-  - collapsible_icons: Custom Icons
+  # - collapsible_icons: Custom Icons

data/app/pb_kits/playbook/pb_icon/docs/_icon_animate.html.erb

@@ -1,3 +1,4 @@
 <p><%= pb_rails("icon", props: { icon: "spinner", spin: true, fixed_width: true, size: "2x" }) %> <span>Spin</span></p>
 <br/>
 <p><%= pb_rails("icon", props: { icon: "spinner", pulse: true, fixed_width: true, size: "2x" }) %> <span>Pulse</span></p>
+

data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.html.erb

@@ -14,3 +14,5 @@
     parent element's css color properties."
   } ) %>
 </div>
+
+

data/app/pb_kits/playbook/pb_icon/docs/_icon_svg.html.erb

@@ -0,0 +1,4 @@
+<%= pb_rails("icon", props: { size: "5x", custom_icon: "copilot", padding_left: "xl" } ) %>
+<%= pb_rails("icon", props: { size: "5x", custom_icon: "squirrel" } ) %>
+<%= pb_rails("icon", props: { size: "5x", custom_icon: "star" } ) %>
+

data/app/pb_kits/playbook/pb_icon/docs/example.yml

@@ -1,14 +1,15 @@
 examples:
   rails:
-  - icon_default: Icon Default
-  - icon_rotate: Icon Rotate
-  - icon_flip: Icon Flip
-  - icon_animate: Icon Animation
-  - icon_pull: Icon Pull
-  - icon_border: Icon Border
-  - icon_sizes: Icon Sizes
-  - icon_custom: Icon Custom
-  - icon_fa_kit: Icon with FontAwesome Kit
+  # - icon_default: Icon Default
+  # - icon_rotate: Icon Rotate
+  # - icon_flip: Icon Flip
+  # - icon_animate: Icon Animation
+  # - icon_pull: Icon Pull
+  # - icon_border: Icon Border
+  # - icon_sizes: Icon Sizes
+  # - icon_custom: Icon Custom
+  # - icon_fa_kit: Icon with FontAwesome Kit
+  - icon_svg: Icon SVG
 
   react:
   - icon_default: Icon Default

data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav.jsx

@@ -1,63 +1,83 @@
-import React from "react"
-import { Nav, NavItem, useCollapsible } from "../.."
-
-const CollapsibleNav = (props) => {
-  const navItems = ["Overview", "Albums", "Similar Artists"]
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  const collapsibles = navItems.map(() => useCollapsible(true))
-
-  const handleMainClick = (index) => {
-    collapsibles.forEach(([, , setCollapsed], idx) => {
-      if (idx === index) {
-        setCollapsed(false)
-      } else {
-        setCollapsed(true)
-      }
-    })
-  }
+import React from "react";
 
+import Nav from "../_nav";
+import NavItem from "../_item";
 
-  const handleIconRightClick = (index) => {
-    const [isCollapsed, setCollapsed] = collapsibles[index]
-    setCollapsed(!isCollapsed)
-  }
-
+const CollapsibleNav = (props) => {
   return (
-    <>
-      <Nav variant='subtle'>
-        {navItems.map((text, index) => {
-          const [collapsed] = collapsibles[index]
-          return (
-            <NavItem
-                collapsible
-                collapsibleClick={() => handleMainClick(index)}
-                iconLeft="chevron-down"
-                iconRightClick={() => handleIconRightClick(index)}
-                id={`collapsible-nav-item-${index + 1}`}
-                key={index}
-                link="#"
-                text={text}
-                toggleCollapsed={collapsed}
-                {...props}
-            >
-              <NavItem link="#" 
-                  text="City" 
-                  {...props} 
-              />
-              <NavItem link="#" 
-                  text="People" 
-                  {...props} 
-              />
-              <NavItem link="#" 
-                  text="Business" 
-                  {...props} 
-              />
-            </NavItem>
-          );
-        })}
-      </Nav>
-    </>
-  )
-}
+    <Nav variant="subtle">
+      <NavItem
+          collapsible 
+          iconLeft="city" 
+          link="#" 
+          text="Overview" 
+          {...props}
+      >
+        <NavItem
+            link="#" 
+            text="City"
+            {...props}
+        />
+        <NavItem
+            link="#"
+            text="People"
+            {...props}
+        />
+        <NavItem 
+            link="#" 
+            text="Business" 
+            {...props}
+        />
+      </NavItem>
+      <NavItem 
+          active 
+          collapsible 
+          iconLeft="theater-masks"
+          link="#" 
+          text="Albums" 
+          {...props}
+      >
+        <NavItem 
+            link="#" 
+            text="Entertainment" 
+            {...props}
+        />
+        <NavItem 
+            link="#" 
+            text="Food" 
+            {...props}
+        />
+        <NavItem 
+            link="#" 
+            text="Style" 
+            {...props}
+        />
+      </NavItem>
+      <NavItem 
+          collapsible 
+          iconLeft="city" 
+          link="#" 
+          text="Similar Artists" 
+          {...props}
+      >
+        <NavItem 
+            link="#" 
+            text="City"
+            {...props} 
+        />
+        <NavItem
+            link="#"
+            text="People"
+            {...props}
+        />
+        <NavItem 
+            link="#" 
+            text="Business" 
+            {...props}
+        />
+      </NavItem>
+    </Nav>
+  );
+};
 
-export default CollapsibleNav
+export default CollapsibleNav;

data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_custom_icons.jsx

@@ -1,5 +1,7 @@
 import React from "react";
-import { Nav, NavItem } from '../..'
+
+import Nav from "../_nav";
+import NavItem from "../_item";
 
 const CollapsibleNavCustomIcons = (props) => {
   return (
@@ -7,7 +9,7 @@ const CollapsibleNavCustomIcons = (props) => {
       <NavItem
           collapsible 
           iconLeft="city" 
-          iconRight={["plus", "minus"]}
+          iconRight={["chevron-down", "chevron-up"]}
           link="#" 
           text="Overview" 
           {...props}
@@ -32,7 +34,7 @@ const CollapsibleNavCustomIcons = (props) => {
           active 
           collapsible 
           iconLeft="theater-masks"
-          iconRight={["plus", "minus"]}
+          iconRight={["chevron-down", "chevron-up"]}
           link="#" 
           text="Albums" 
           {...props}
@@ -56,7 +58,7 @@ const CollapsibleNavCustomIcons = (props) => {
       <NavItem 
           collapsible 
           iconLeft="city" 
-          iconRight={["plus", "minus"]}
+          iconRight={["chevron-down", "chevron-up"]}
           link="#" 
           text="Similar Artists" 
           {...props}

data/app/pb_kits/playbook/pb_nav/docs/example.yml

@@ -25,8 +25,8 @@ examples:
   - borderless_nav: No Borders
   - subtle_nav: Subtle Variant
   - subtle_with_icons_nav: Subtle With Icons
-  - collapsible_nav: Subtle With Collapsible
-  - collapsible_nav_custom_icons: Subtle With Collapsible (No custom toggling)
+  # - collapsible_nav: Subtle With Collapsible
+  # - collapsible_nav_custom_icons: Subtle With Collapsible (Custom Toggle Icons)
   - subtle_no_highlight_nav: Subtle No Highlight
   - bold_vertical_nav: Bold Variant
   - horizontal_nav: Horizontal Nav

data/app/pb_kits/playbook/pb_pill/docs/_pill_default_swift.md

@@ -0,0 +1,5 @@
+![pill-default](https://github.com/powerhome/playbook/assets/92755007/608cb5dd-9400-45f4-afb2-ac1bbd972c3d)
+
+```swift
+PBPill("default")
+```

data/app/pb_kits/playbook/pb_pill/docs/_pill_props_swift.md

@@ -0,0 +1,5 @@
+### Props
+| Name | Type | Description | Default | Values |
+| --- | ----------- | --------- | --------- | --------- |
+| **title** | `String` | Specifies the value of the Pill |  |  |
+| **variant** | `Variant` | Changes the color of the Pill | `.neutral` | `.error` `.info` `.neutral` `.primary` `.success` `.warning` |

data/app/pb_kits/playbook/pb_pill/docs/_pill_variants_swift.md

@@ -0,0 +1,10 @@
+![pill-variants](https://github.com/powerhome/playbook/assets/92755007/79ac4260-633e-4429-8b1f-0a97b8178a86)
+
+```swift
+PBPill("success", variant: .success)
+ PBPill("error", variant: .error)
+ PBPill("warning", variant: .warning)
+ PBPill("info", variant: .info)
+ PBPill("neutral", variant: .neutral)
+ PBPill("primary", variant: .primary)
+```

data/app/pb_kits/playbook/pb_pill/docs/example.yml

@@ -11,3 +11,8 @@ examples:
   - pill_default: Default
   - pill_variants: Variants
   - pill_example: Example
+
+  swift:
+  - pill_default_swift: Default
+  - pill_variants_swift: Variants
+  - pill_props_swift: ""

data/app/pb_kits/playbook/pb_radio/docs/_radio_alignment_swift.md

@@ -0,0 +1,16 @@
+![radio-alignment](https://github.com/powerhome/playbook/assets/92755007/04b84035-8391-4de1-a33e-8964999d5c0f)
+
+```swift
+VStack(alignment: .leading) {
+  PBRadio(
+    items: [
+      PBRadioItem("Power"),
+      .init("Nitro"),
+      .init("Google")
+    ],
+    orientation: .horizontal,
+    textAlignment: .vertical,
+    selected: $selectedAlignment
+  )
+}
+```

data/app/pb_kits/playbook/pb_radio/docs/_radio_custom_swift.md

@@ -0,0 +1,18 @@
+![radio-custom](https://github.com/powerhome/playbook/assets/92755007/3eab180b-0550-4d7e-b562-84a007690218)
+
+```swift
+VStack(alignment: .leading) {
+  if let selectedCustom = selectedCustom {
+    Text("Your choice is: \(selectedCustom.title)")
+  }
+  PBRadio(
+    items: [
+      PBRadioItem("Custom Power"),
+      .init("Custom Nitro"),
+      .init("Custom Google")
+    ],
+    orientation: .vertical,
+    selected: $selectedCustom
+  )
+}
+```

data/app/pb_kits/playbook/pb_radio/docs/_radio_default_swift.md

@@ -0,0 +1,15 @@
+![radio-default](https://github.com/powerhome/playbook/assets/92755007/be32852e-de70-4ae0-b8bb-c091f8cfa34b)
+
+```swift
+VStack(alignment: .leading) {
+  PBRadio(
+    items: [
+      PBRadioItem("Power"),
+      .init("Nitro"),
+      .init("Google")
+    ],
+    orientation: .vertical,
+    selected: $selectedDefault
+  )
+}
+```

data/app/pb_kits/playbook/pb_radio/docs/_radio_error_swift.md

@@ -0,0 +1,14 @@
+![radio-error](https://github.com/powerhome/playbook/assets/92755007/425f499b-4daf-4093-82a7-230b01723287)
+
+```swift
+VStack(alignment: .leading) {
+  PBRadio(
+    items: [
+      PBRadioItem("Power")
+    ],
+    orientation: .vertical,
+    selected: $selectedError,
+    errorState: true
+  )
+}
+```

data/app/pb_kits/playbook/pb_radio/docs/_radio_orientation_swift.md

@@ -0,0 +1,15 @@
+![radio-orientation](https://github.com/powerhome/playbook/assets/92755007/f1f8dac7-a7d5-43cf-ba93-92bd624a1016)
+
+```swift
+VStack(alignment: .leading) {
+  PBRadio(
+    items: [
+      PBRadioItem("Power"),
+      .init("Nitro"),
+      .init("Google")
+    ],
+    orientation: .horizontal,
+    selected: $selectedOrientation
+  )
+}
+```

data/app/pb_kits/playbook/pb_radio/docs/_radio_padding_swift.md

@@ -0,0 +1,31 @@
+![radio-padding](https://github.com/powerhome/playbook/assets/92755007/5cb123fb-791b-43f7-a57e-336f93c1bb3a)
+
+```swift
+VStack(alignment: .leading) {
+  PBRadio(
+    items: [
+      PBRadioItem("Small")
+    ],
+    orientation: .vertical,
+    padding: Spacing.small,
+    selected: $selectedPadding
+  )
+  PBRadio(
+    items: [
+      PBRadioItem("Medium")
+    ],
+    orientation: .vertical,
+    padding: Spacing.medium,
+    selected: $selectedPadding
+  )
+  PBRadio(
+    items: [
+      PBRadioItem("Large")
+    ],
+    orientation: .vertical,
+    padding: Spacing.large,
+    selected: $selectedPadding
+  )
+}
+
+```

data/app/pb_kits/playbook/pb_radio/docs/_radio_props_swift.md

@@ -0,0 +1,10 @@
+### Props
+| Name | Type | Description | Default | Values |
+| --- | ----------- | --------- | --------- | --------- |
+| **items** | `PBRadioItem` | Specifies the value of the Radio buttons | | |
+| **orientation** | `Orientation` | Changes between stacked or inline Radio items | `.vertical` | |
+| **textAlignment** | `Orientation` | Changes lable position | `.horizontal` | |
+| **spacing** | `CGFloat` | Applies padding around Radio and lable | `Spacing.xSmall` | `Spacing.none` `Spacing.xxSmall` `Spacing.xSmall` `Spacing.small` `Spacing.medium` `Spacing.large` `Spacing.xLarge` |
+| **padding** | `CGFloat` | Applies padding between Radio and lable | `Spacing.xSmall` | `Spacing.none` `Spacing.xxSmall` `Spacing.xSmall` `Spacing.small` `Spacing.medium` `Spacing.large` `Spacing.xLarge` |
+| **errorState** | `Bool` | Changes Radio to error styling | | |
+| **selected** | `PBRadioItem?` | Sets selected Radio item | | |

data/app/pb_kits/playbook/pb_radio/docs/_radio_spacing_swift.md

@@ -0,0 +1,36 @@
+![radio-spacing](https://github.com/powerhome/playbook/assets/92755007/58d1bf02-0c79-4526-9e5c-ba2f631d1dfe)
+
+```swift
+HStack(alignment: .top) {
+  PBRadio(
+    items: [
+      PBRadioItem("Small"),
+      .init("Small Spacing"),
+      .init("Small Power")
+    ],
+    orientation: .vertical,
+    spacing: Spacing.small,
+    selected: $selectedSpacing
+  )
+  PBRadio(
+    items: [
+      PBRadioItem("Medium"),
+      .init("Medium Spacing"),
+      .init("Medium Power")
+    ],
+    orientation: .vertical,
+    spacing: Spacing.medium,
+    selected: $selectedSpacing
+  )
+  PBRadio(
+    items: [
+      PBRadioItem("Large"),
+      .init("Large Spacing"),
+      .init("Large Power")
+    ],
+    orientation: .vertical,
+    spacing: Spacing.large,
+    selected: $selectedSpacing
+  )
+}
+```

data/app/pb_kits/playbook/pb_radio/docs/_radio_subtitle_swift.md

@@ -0,0 +1,13 @@
+![radio-subtitle](https://github.com/powerhome/playbook/assets/92755007/1244f4d4-0e87-4b5a-9b20-ac2223866321)
+
+```swift
+VStack(alignment: .leading) {
+  PBRadio(
+    items: [
+      PBRadioItem("Power", subtitle: "subtitle")
+    ],
+    selected: $selectedSubtitle
+  )
+}
+
+```

data/app/pb_kits/playbook/pb_radio/docs/example.yml

@@ -12,3 +12,14 @@ examples:
   - radio_custom: Custom
   - radio_error: With Error
   - radio_alignment: Alignment
+
+  swift:
+  - radio_default_swift: Default
+  - radio_custom_swift: Custom
+  - radio_error_swift: With Error
+  - radio_orientation_swift: Orientation
+  - radio_alignment_swift: Alignment
+  - radio_spacing_swift: Spacing
+  - radio_padding_swift: Padding
+  - radio_subtitle_swift: Subtitle
+  - radio_props_swift: ""

data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_align_swift.md

@@ -0,0 +1,45 @@
+![timestamp-align](https://github.com/powerhome/playbook/assets/92755007/9107e699-218e-4a15-a0f9-b1a8f4710c37)
+
+```swiftå
+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)
+  }
+}
+```