Komponenty a vzory

Táto stránka slúži ako interná referencia pre agent-driven development a dokumentuje znovupoužiteľné komponenty dostupné v šablóne SZUŠ.

Dostupné komponenty

1. Event Banner Component

Umiestnenie: themes/ozvena-theme/layouts/partials/components/event_banner.html

Používa festival-rich-hero štýl na zobrazenie prominentných oznamov a udalostí s obrázkom, dátumom a CTA tlačidlami.

Použitie v šablónach:

{{ $eventData := dict
  "title" "Absolventský koncert 2026"
  "description" "Žiaci SZUŠ prezentujú výsledky svojej celoročnej práce."
  "date" "15. 6. 2026 o 18:00"
  "location" "Kultúrny dom Vranov nad Topľou"
  "chips" (slice "Koncert" "Vstup voľný")
  "image" "img/sample/ai/choir-members-singing-during-rehearsal.webp"
  "primary_cta" (dict "label" "Registrovať sa" "url" "/contact/")
  "secondary_cta" (dict "label" "Viac informácií" "url" "/posts/")
}}
{{ partial "components/event_banner.html" $eventData }}

Parametre:

• title (povinné): Názov udalosti
• description: Popis udalosti
• date: Dátum a čas
• location: Miesto konania
• image: URL obrázka (relatívna alebo absolútna)
• chips: Pole štítkov/badges (napr. slice "Koncert" "Vstup voľný")
• primary_cta: Primárne tlačidlo s .label a .url
• secondary_cta: Sekundárne tlačidlo s .label a .url

2. CTA Buttons Component

Umiestnenie: themes/ozvena-theme/layouts/partials/components/cta_buttons.html

Poskytuje konzistentný spôsob zobrazenia skupiny tlačidiel s primárnou, sekundárnou a terciárnou akciou.

Použitie v šablónach:

{{ $ctaData := dict
  "primary" (dict "label" "Prihláška" "url" "/admissions/")
  "secondary" (dict "label" "Školné" "url" "/fees/")
  "tertiary" (dict "label" "Kontakt" "url" "/contact/")
  "alignment" "center"
  "style" "light"
}}
{{ partial "components/cta_buttons.html" $ctaData }}

Parametre:

• primary: Primárne tlačidlo s .label a .url
• secondary: Sekundárne tlačidlo s .label a .url
• tertiary: Terciárne tlačidlo s .label a .url
• alignment: “left”, “center”, alebo “right” (predvolené: “left”)
• style: “light” alebo “dark” (predvolené: “light”)

Style varianty:

• light: Použite pre svetlé pozadie (normálne stránky)
• dark: Použite pre tmavé pozadie (napr. v rámci festival-rich-hero komponentu)

Alignment možnosti:

• left: Tlačidlá zarovnané vľavo (predvolené)
• center: Tlačidlá zarovnané na stred
• right: Tlačidlá zarovnané vpravo

Príklady použitia v existujúcich šablónach

Event Banner v home page

Pozrite si themes/ozvena-theme/layouts/_default/home.html - event banner sa používa na zobrazenie featured sticky posts a tax donation cards.

CTA Buttons v hero sekcii

Pozrite si themes/ozvena-theme/layouts/partials/home/szus_home.html - CTA tlačidlá sa používajú v hero sekcii s style="dark".

CSS triedy

Komponenty používajú existujúce CSS triedy z themes/ozvena-theme/assets/css/main.css:

• .festival-rich-hero - gradient pozadie s border a shadow
• .festival-rich-chip - badge štítky
• .btn, .btn-primary, .btn-outline - štýly tlačidiel

Všetky komponenty sú responzívne a podporujú dark mode automaticky.

Poznámky pre agentov

• Komponenty sú navrhnuté na znovupoužitie v šablónach, nie v markdown obsahu
• Používajte ich v partial templates alebo page layouts
• Pre dokumentačné účely použite code blocks namiesto renderovaných ukážok
• Pri pridávaní nových komponentov dodržujte existujúce CSS naming conventions