From f98c35ef8fc15b96def15ac0c0d928a5b6fafe53 Mon Sep 17 00:00:00 2001
From: Nikolai Shabalin <dev.nikolai.shabalin@gmail.com>
Date: Thu, 19 Dec 2024 18:20:23 +0300
Subject: [PATCH] Add era

---
 src/components/CssEra.astro | 43 +++++++++++++++++++++++++++++++++++++
 src/pages/index.astro       |  2 ++
 2 files changed, 45 insertions(+)
 create mode 100644 src/components/CssEra.astro

diff --git a/src/components/CssEra.astro b/src/components/CssEra.astro
new file mode 100644
index 0000000..32885fa
--- /dev/null
+++ b/src/components/CssEra.astro
@@ -0,0 +1,43 @@
+<section class="era">
+  Выбери CSS эпоху:
+  <button type="button" data-era="CSS3">CSS3</button>
+  <button type="button" data-era="CSS4">CSS4</button>
+  <button type="button" data-era="CSS5">CSS5</button>
+  <button type="button" data-action="reset">Отменить выбор</button>
+</section>
+
+<script>
+    const EAR_YEARS = {
+      CSS3: [2009, 2010, 2011, 2012],
+      CSS4: [2013, 2014, 2015, 2016, 2017, 2018],
+      CSS5: [2019, 2020, 2021, 2022, 2023, 2024]
+    };
+    const eraSection = document.querySelector('.era');
+    const sections = document.querySelectorAll('.properties-of-year');
+
+    eraSection.addEventListener('click', event => {
+      const button = event.target;
+
+      if (button.tagName === 'BUTTON') {
+        if (button.dataset.action === 'reset') {
+          sections.forEach(section => {
+            section.style.display = 'flex';
+          });
+          return;
+        }
+
+        const era = button.dataset.era;
+        const years = EAR_YEARS[era] || [];
+
+        sections.forEach(section => {
+          const sectionYear = parseInt(section.id.replace('year-', ''), 10);
+          if (years.includes(sectionYear)) {
+            section.style.display = 'flex';
+          } else {
+            section.style.display = 'none';
+          }
+        });
+      }
+    });
+
+</script>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 070a149..216d769 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -2,6 +2,7 @@
 import Base from '../layouts/Base.astro';
 import Github from '../components/Github.astro';
 import SelectYear from '../components/SelectYear.astro';
+import CssEra from '../components/CssEra.astro';
 import Properties from '../components/Properties.astro';
 import {data} from '../data/data.js';
 
@@ -12,6 +13,7 @@ const listYears = Object.keys(data).reverse();
   <main class="main">
     <h1 class="title">Список всех CSS-свойств</h1>
     <SelectYear listYears={listYears} />
+    <CssEra />
     <Properties properties={data} />
   </main>
   <Github />