# Web Components

`@astroway/ui` egy sor szokásos custom element: elhelyezed a tageket az oldalon, és magát rajzolja ki. A térképeket a [`@astroway/render`](https://www.npmjs.com/package/@astroway/render) rajzolja, ugyanaz a kód, ami a `/v1/render/*` mögött áll, így a kerék az oldaladon megegyezik az API által visszaadott kerékkel.

A csomag **alpha** állapotban van (`0.1.0-alpha.1`): az attribútumnevek még változhatnak 1.0-ig. A csomag oldala: [npm](https://www.npmjs.com/package/@astroway/ui), kód: [GitHub](https://github.com/astroway/astroway-ui).

## Telepítés

CDN-ről, összeállítás nélkül:

```html
<script type="module" src="https://cdn.jsdelivr.net/npm/@astroway/ui/dist/cdn/index.js"></script>
<aw-moon-phase></aw-moon-phase>
```

Vagy npm-mel, importálva az összes elemet vagy csak a szükségeseket. A csomag még alpha, ezért kérd ezt a taget:

```bash
npm install @astroway/ui@alpha
```

```js
```

## Három módja az elemnek adat átadásának

**A. Saját adataid.** Kérést küldesz a saját szerveredről a saját kulcsoddal, és JSON-t adsz át az elemnek. A látogató böngészőjéből nem megy kérés, így bármelyik osztály kulcsa megfelel.

```js
document.querySelector('aw-natal-wheel').data = chart; // data з відповіді /v1/chart
```

A szerver sablon ugyanazt a JSON-t írhatja egy attribútumba:

```php
<aw-natal-wheel data='<?= htmlspecialchars(json_encode($chart), ENT_QUOTES) ?>'></aw-natal-wheel>
```

**B. Kulcs nélkül.** Az `/v1/public/*` végpontokon lévő elemeknek nincs szükségük kulcsra. Megosztják a látogató nyilvános költségkeretét, 30 egységet óránként egy IP-ről; amikor ez kimerül, az elem azt írja, mennyit kell várni.

```html
<aw-moon-phase lang="uk"></aw-moon-phase>
<aw-horoscope sign="leo" period="daily"></aw-horoscope>
<aw-tarot-spread spread="three-card"></aw-tarot-spread>
```

**C. Kulcs a böngészőhöz.** A kulcsot igénylő végpontokon lévő elemek a `pk_` kulcsot használják, amelyet a te oldalad számára hoztak létre: a domain lista, a kredit limit és a végpontok tartománya kötelező a létrehozáskor. Lásd a "Kulcsok a böngészőhöz" részt a [hitelesítés](/authentication/) oldalon. A titkos `aw_` kulcs már a kérés előtt elutasításra kerül.

```html
<aw-natal-wheel api-key="pk_live_..." date="1990-05-15" time="14:30"
  latitude="50.45" longitude="30.52" timezone-offset="3"></aw-natal-wheel>
```

Ezekhez az elemekhez a kulcs területén szükséges a `chart`, és még a `chinese/zodiac/animal`, ha a `aw-chinese-sign`-t használod. A domainek a host alapján ellenőrződnek: a `example.com` kulcs működik a `http://example.com:8080`-n is.

## React és Next.js

A React 19 közvetlenül rendereli a custom elementeket. Két dologban különbözik a szokásos HTML-től:

- A React elvágja a `key`-t magának, ezért add át a kulcsot `api-key`-ként.
- A szerveroldali rendereléssel rendelkező oldalon az A módhoz az adatokat stringként add át. A React elutasítja az objektumokat a szerveroldali renderelés során, és nem állítja be őket a hidratáláskor.

```tsx
'use client';

  return <aw-natal-wheel data={JSON.stringify(chart)} />;
}
```

A modulok importálhatók a szerveren: a tag úgy viselkedik, mint egy szokásos HTML, és megjelenik, amint a böngésző betölti az elemet.

## Elemek

| Elem | Módok | Forrás |
|---|---|---|
| `aw-natal-wheel` | A/C | `/v1/chart` |
| `aw-aspect-grid` | A/C | `/v1/chart` |
| `aw-planet-table` | A/C | `/v1/chart` |
| `aw-moon-phase` | A/B | `/v1/public/moon-phase` |
| `aw-planet-of-day` | A/B | `/v1/public/planet-of-day` |
| `aw-horoscope` | A/B | `/v1/public/horoscope/{daily,weekly,monthly}` |
| `aw-tarot-card`, `aw-tarot-spread` | A/B | `/v1/public/tarot/*` |
| `aw-sign-matrix` | A/B | `/v1/public/compatibility/matrix` |
| `aw-synastry-score` | A/B | `/v1/public/synastry` |
| `aw-chinese-sign` | A/C | `/v1/chinese/zodiac/animal` + `/v1/public/chinese/zodiac/texts` |

Az egyetlen térképpel rendelkező elemek az oldalon (kerék, táblázat és rács ugyanazzal a születési adattal) egyetlen kérést tesznek az összesre.

`aw-aspect-grid` saját méretében körülbelül 560 px széles. Szűkebb oszlopban csökken, és az orbita feliratok kicsivé válnak; a `scroll` attribútum megtartja a teljes méretet vízszintes görgetéssel.

## Nyelv, téma, hibák

- `lang` bármelyik [21 nyelvet](/languages/) elfogadja, alapértelmezés szerint a `<html lang>` attribútumot veszi az oldalból. A nevek a `localized` táblákból jönnek az API-ban.
- `theme="dark"` átkapcsolja a megjelenést; a színeket a CSS változók `--aw-accent`, `--aw-fg`, `--aw-bg`, `--aw-bg-soft`, `--aw-border` határozzák meg.
- Minden elem `aw-error` eseményt küld `{ kind, message }` objektummal, ahol a `kind` lehet `error`, `rate-limited` vagy `key`.