# `Tayori.Components`
[🔗](https://github.com/hattoriai/tayori/blob/v0.1.0/lib/tayori/components.ex#L1)

The news in a LiveView: a button with the count of unread entries, the
panel it opens, and the announcement of the moment. They read `@tayori`,
from `Tayori.Live`.

    <Tayori.Components.news_button tayori={@tayori} />
    <Tayori.Components.news_panel tayori={@tayori} />
    <Tayori.Components.announcement tayori={@tayori} />

Put the button where the app's header has its icons, and the panel and
the announcement once in the layout (they are fixed to the page). They
need `tayori.css` (and `tayori-sumi.css` for Sumi), and the `Tayori`
hook, which shows the dates in the reader's time zone and language (see
the [In the app](in_app.md) guide).

The panel lists the newest entries as cards: a cover, the categories,
the date, the title and the summary. A card opens its entry in the
panel, whole, with its reactions. Escape goes back, then closes.

`news/1` and `entry/1` are the list and an entry alone, for a page of
the app's own.

# `announcement`

The entry announced to the reader now, if the app has the
`:announcements` feature and the admin announced one: a popup, a toast
or a banner, as the admin chose, with its button. Dismissing it is
remembered for the reader on every device.

## Attributes

* `tayori` (`Tayori.Live.State`) (required)

# `category`

A category's pill, in its colour.
## Attributes

* `key` (`:string`) (required)
* `categories` (`:map`) - Defaults to `%{}`.
* `locale` (`:string`) - Defaults to `nil`.
* `locales` (`:list`) - Defaults to `[]`.

# `cover`

An entry's cover image.
## Attributes

* `cover` (`:map`) (required)
* `class` (`:string`) - Defaults to `nil`.
* `loading` (`:string`) - Defaults to `"lazy"`.

# `entry`

One entry, whole, in the translation `Tayori.news/2` chose for the reader.
## Attributes

* `entry` (`Tayori.Entry`) (required)
* `new` (`:boolean`) - Defaults to `false`.
* `messages` (`:map`) (required)
* `categories` (`:map`) - Defaults to `%{}`.
* `locales` (`:list`) - Defaults to `[]`.
* `href` (`:string`) - Defaults to `nil`.
* `heading` (`:string`) - Defaults to `"h3"`.
* `cover` (`:boolean`) - Defaults to `true`.
## Slots

* `footer`

# `news`

A list of entries, whole: their cover, categories, date, title and body.
## Attributes

* `entries` (`:list`) (required) - entries with their `translation`, from `Tayori.news/2`.
* `messages` (`:map`) - the words, from `Tayori.Messages.for_locale/2`. Defaults to `nil`.
* `seen_before` (`DateTime`) - entries published after it are marked New. Defaults to `nil`.
* `page` (`:string`) - the public page: each title links to its entry. Defaults to `nil`.
* `heading` (`:string`) - the element of the titles. Defaults to `"h3"`.
* `categories` (`:map`) - the categories by key (`Tayori.Categories.by_key/0`). Defaults to `%{}`.

# `news_button`

The button that opens the panel, with the count of unread entries. Its
accessible name says the count ("What's new, 2 new updates").

## Attributes

* `tayori` (`Tayori.Live.State`) (required)
* `class` (`:any`) - classes of the button, besides `tayori-button`. Defaults to `nil`.
* `label` (`:boolean`) - show the word "What's new" beside the icon. Defaults to `false`.
* Global attributes are accepted.

# `news_panel`

The panel of the news: the newest entries as cards, the pinned ones
first, with a "New" mark on those the reader had not seen; the
categories to filter by; an entry open whole; "Show more", and a link
to the public page. Escape goes back to the list, then closes; so does
a click outside.

## Attributes

* `tayori` (`Tayori.Live.State`) (required)
* `class` (`:any`) - Defaults to `nil`.
* Global attributes are accepted.

# `reactions`

The reactions of an entry: each emoji with its count; the reader's own are pressed.
## Attributes

* `entry_id` (`:string`) (required)
* `reactions` (`:any`) (required) - `{counts, mine}` of `Tayori.Reactions.for_entries/2`.
* `emoji` (`:list`) (required)
* `messages` (`:map`) (required)
* `disabled` (`:boolean`) - a visitor sees the counts and cannot react. Defaults to `false`.
* `event` (`:string`) - Defaults to `"tayori:react"`.

---

*Consult [api-reference.md](api-reference.md) for complete listing*