@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