From 2fda61945cb544629dfb33757d6bfe4b3cf2d36c Mon Sep 17 00:00:00 2001
From: andres <andres@doersdf.com>
Date: Sun, 25 Jun 2023 13:47:07 +0200
Subject: [PATCH] chapter 4 started

---
 pages/lesson-1/_meta.en.json    |  4 +++-
 pages/lesson-1/_meta.ru.json    |  3 ++-
 pages/lesson-1/chapter-4.en.mdx |  1 +
 pages/lesson-1/chapter-4.ru.mdx | 21 +++++++++++++++++++++
 4 files changed, 27 insertions(+), 2 deletions(-)
 create mode 100644 pages/lesson-1/chapter-4.en.mdx
 create mode 100644 pages/lesson-1/chapter-4.ru.mdx

diff --git a/pages/lesson-1/_meta.en.json b/pages/lesson-1/_meta.en.json
index cde97ea..005aefb 100644
--- a/pages/lesson-1/_meta.en.json
+++ b/pages/lesson-1/_meta.en.json
@@ -1,4 +1,6 @@
 {
   "chapter-1": "Chapter 1",
-  "chapter-2": "Chapter 2"
+  "chapter-2": "Chapter 2",
+  "chapter-3": "Chapter 3",
+  "chapter-4": "Chapter 4"
 }
diff --git a/pages/lesson-1/_meta.ru.json b/pages/lesson-1/_meta.ru.json
index e5adb63..6997898 100644
--- a/pages/lesson-1/_meta.ru.json
+++ b/pages/lesson-1/_meta.ru.json
@@ -1,5 +1,6 @@
 {
   "chapter-1": "1. Создание и настройка проекта",
   "chapter-2": "2. Storybook и css переменные",
-  "chapter-3": "3. Полиморфные компоненты"
+  "chapter-3": "3. Полиморфные компоненты",
+  "chapter-4": "4. Headless компоненты, универсальный доступ, Radix UI"
 }
diff --git a/pages/lesson-1/chapter-4.en.mdx b/pages/lesson-1/chapter-4.en.mdx
new file mode 100644
index 0000000..922266a
--- /dev/null
+++ b/pages/lesson-1/chapter-4.en.mdx
@@ -0,0 +1 @@
+# Under construction
diff --git a/pages/lesson-1/chapter-4.ru.mdx b/pages/lesson-1/chapter-4.ru.mdx
new file mode 100644
index 0000000..ed508fc
--- /dev/null
+++ b/pages/lesson-1/chapter-4.ru.mdx
@@ -0,0 +1,21 @@
+import { Callout } from 'nextra/components'
+
+# Headless компоненты, универсальный доступ, Radix UI
+
+## Headless компоненты
+
+### Теория
+
+Headless компоненты - это компоненты, которые не имеют своего визуального представления,
+но предоставляют нам API для управления внутренним состоянием компонента,
+а также поддерживают универсальный доступ из коробки (взаимодействие с помощью клавиатуры, поддержка screen reader'ов и т.д.).
+Такие компоненты удобно использовать когда у нас есть готовый дизайн и мы не хотим писать всю логику с нуля.
+
+#### Популярные библиотеки headless компонентов
+
+- [Radix UI](https://radix-ui.com/)
+- [Headless UI](https://headlessui.dev/)
+- [React Aria](https://react-spectrum.adobe.com/react-aria/index.html)
+- [Base UI от MUI (beta)](https://mui.com/base-ui/getting-started/overview/)
+
+Мы будем использовать Radix UI, потому что она предоставляет все нужные нам компоненты и с ней просто взаимодействовать.