@hey-mirror/clock

Example

import styled from '@emotion/styled';
import { Clock } from '@hey-mirror/today';

const Wrapper = styled.div({
  display: 'flex',
  flexDirection: 'column',
  gap: 8,
});

export const Display = () => (
  <Clock
    hour12
    locale='en-US'
  >
    <Clock.Hours />:<Clock.Minutes/>.<Clock.Seconds>{' '}
    <Clock.Period>
      <Clock.Period.AM>
        am
      </Clock.Period.AM>
      <Clock.Period.PM>
        pm
      </Clock.Period.PM>
    </Clock.Period>
  </Clock>
);

API

<Clock />

| Prop | Default | Type | Description | | ---------- | ------- | ----------- | ---------------------- | | children | - | ReactNode | | | locale | en-US | string | Javascript Date locale |

<Hours />

| Prop | Default | Type | Description | | ----------- | --------- | ---------------------- | ----------- | | className | - | string | | | length | numeric | numeric or 2-digit | |

<Hours /> will handle hour12 if set on <Clock />.

<Minutes />

| Prop | Default | Type | Description | | ----------- | --------- | ---------------------- | ----------- | | className | - | string | | | length | 2-digit | numeric or 2-digit | |

<Seconds />

| Prop | Default | Type | Description | | ---------- | ---------------------------- | ---------------------- | ----------- | | children | <Period.AM /><Period.PM /> | ReactNode | | | length | 2-digit | numeric or 2-digit | |

<Period />

| Prop | Default | Type | Description | | ---------- | ---------------------------- | ----------- | ----------- | | children | <Period.AM /><Period.PM /> | ReactNode | |

Only renders if hour12 is set on <Clock />.

or you can customize both displays:

<Time.Period>
  <Time.Period.AM>a.m.</Time.Period.AM>
  <Time.Period.PM>p.m.</Time.Period.PM>
</Time.Period>

Include both <Time.Period.AM /> and <Time.Period.PM /> — only the correct one will be rendered.

<Period.AM /> and <Period.PM />

| Prop | Default | Type | Description | | ----------- | ------------ | ----------- | ----------- | | children | AM or PM | ReactNode | | | className | - | string | |