Tonight

Az alkalmazás alapvetően sötét témával készüljön el.
A megvalósítás során The Movie DB API-ját fogjuk használni, ehhez az kulcs: 5c29cc871a74d80e6ef080337f275b27

Feladatok

Allítsd be a kovetkezőket az axios példányodra:

baseURL:https://api.themoviedb.org/3
params: legyen obejct a következő elemkkel:
- api_key: fent megadott kulcs
- language: hu-HU

Oldalak

A következő oldalakat készítsd el a pages könyvtárban és vedd fel a Routerbe.

Oldal neve	Komponens	Routerbeli elnevezés	URL	Lehetséges paraméterek
Főoldal	`IndexView`	`index`	`/`
Műfajok	`GenresView`	`genres`	`/:type`	`type:` `movie` vagy `tv`
Műfaj elemei	`ListView`	`list`	`/:type/:genre`	`type`: `movie` vagy `tv`, `genre`: bármilyen érvényes műfaj ID-ja
Film vagy sorozat megtekintése	`SingleView`	`show`	`/:type/:id`	`type`: `movie` vagy `tv`, `id`: bármilyen film vagy sorozat érvényes ID-ja

Az oldalak minden esetben a Composition API-t <script setup>-al használják.

Navigációs sáv

Készíts egy olyan navigációs sávot, amely az elemeit egy helyi állapotból szolgálja ki. Ezt Options API segítségével oldd meg.

A menüben jelenjen meg a Főoldal és a műfajkereső a filmekhez és a sorozatokhoz külön-külön.

Egy menüelem:

{
    name: "index"
    title: "Főoldal"
    to: "/"
}

Film kártyák

Készíts egy kártya komponenst amely a setup() függvénnyel működik. A tulajdonságokat Options API-on keresztül vegye át és add oda a setup()-nak paraméterben. A következőket tudja átvenni:

id: egész
name: szöveg
title: szöveg
original_title: szöveg
original_name: szöveg
overview: szöveg
poster_path: szöveg
backdrop_path: szöveg
media_type: szöveg

Kártyának legyen számított állapota, amely a poster_path és a backdrop_path-ből előállítja az URL-el együtt a teljes linket. Ehhez a következőt kell eléfűzni: http://image.tmdb.org/t/p/w500

Készíts számított állapotot, amely eldönti, hogy a címnek melyik átvett tulajdonságot kell felhasználni. Ezt a következőképp lehet eldönteni: Ha van

A fentiek segítségével Készíts egy kártyát, amely megjeleníti az adatokat és lehetőséget biztosít a megfelő oldal haszánlatával, annak további adatait megtekinteni.