diff --git a/pages/lesson-1/chapter-3.ru.mdx b/pages/lesson-1/chapter-3.ru.mdx index 48cd2a8..d79a9c6 100644 --- a/pages/lesson-1/chapter-3.ru.mdx +++ b/pages/lesson-1/chapter-3.ru.mdx @@ -63,7 +63,7 @@ export type ButtonProps = { Создадим сам компонент: -```tsx +```tsx filename="button.tsx" import s from './button.module.scss' export const Button = ({ variant = 'primary', fullWidth, className, ...rest }: ButtonProps) => { diff --git a/pages/lesson-1/chapter-4.ru.mdx b/pages/lesson-1/chapter-4.ru.mdx index ed508fc..29bacb3 100644 --- a/pages/lesson-1/chapter-4.ru.mdx +++ b/pages/lesson-1/chapter-4.ru.mdx @@ -1,5 +1,3 @@ -import { Callout } from 'nextra/components' - # Headless компоненты, универсальный доступ, Radix UI ## Headless компоненты @@ -19,3 +17,32 @@ Headless компоненты - это компоненты, которые не - [Base UI от MUI (beta)](https://mui.com/base-ui/getting-started/overview/) Мы будем использовать Radix UI, потому что она предоставляет все нужные нам компоненты и с ней просто взаимодействовать. + +### Материалы для изучения: + +#### Видео на тему ui библиотек + +- [So You Think You Can Build A Dropdown? - Pedro Duarte](https://youtu.be/pcMYcjtWwVI) +- [Сравнение MUI, Tailwind, Bootstrap](https://youtu.be/CQuTF-bkOgc) +- [Radix overview](https://www.youtube.com/watch?v=EUrbuROiuaA) +- [Shadcn UI - библиотека компонентов на основе Radix UI и TailwindCss](https://www.youtube.com/watch?v=7MKEOfSP2s4) + +#### Откуда начать? + +##### Библиотека компонентов it-incubator: + +Построена на базе Radix UI и Headless UI, для стилизации используется SASS. + +- [Github](https://github.com/it-incubator/incubator-libs/tree/dev/packages/ui-kit/src/components) +- [Storybook](https://ui-kit.it-incubator.io/?path=/docs/getting-started-installation--docs) + +Многие вопросы отпадут если просто посмотреть код. + +##### Shadcn UI + +Компоненты которые можно копировать и вставлять в свой проект. + +Конечно же есть нюансы, но в целом это хороший способ понять как работает Radix UI. + +- [Github](https://github.com/shadcn/ui) +- [Docs](https://ui.shadcn.com/) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 5da54fb..009d035 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1,4 +1,4 @@ -lockfileVersion: '6.0' +lockfileVersion: '6.1' settings: autoInstallPeers: true