Всем привет. В этом проекте мы собираемся создать приложение для поиска пользователей GitHub с использованием Github API.


Мы разработаем пользовательский интерфейс приложения с помощью Tailwind CSS и Next.js в качестве основы.


Мы будем использовать Github API для извлечения данных профиля и их отображения.


Вот изображение приложения, которое мы собираемся создать:



![Давайте создадим приложение для поиска пользователей Github с помощью Next.js и Tailwind CSS.]
Давайте создадим приложение Github для поиска пользователей с помощью Next.js и Tailwind CSS.


Это вызов frontendmentor.io, и наша цель — сделать этот дизайн как можно ближе к заданному дизайну.


Он будет полностью адаптивным, а также иметь [темный режим] (https://dev.to/raivikas/add-dark-mode-in-nextjs-app-using-tailwind-css-dark-mode-220e). f функциональность.


[Демонстрационная ссылка проекта] (https://github-user-finder-by-raivikas.vercel.app/)


[Ссылка проекта на Github] (https://github.com/raiv200/github-user-finder)


Итак, начинаем строить 🚀 :


Создайте приложение Next.js с помощью CSS попутного ветра:


npx create-next-app my-project // без установленного Tailwind CSS


или


npx create-next-app -e with-tailwindcss my-project // с помощью Tailwind CSS


Установите необходимые пакеты npm:


  1. Установите @heroicons/реагировать.

  1. Установите следующие темы.

``` ударить


npm установить следующие темы @heroicons/реагировать


Создание компонентов и добавление функциональности темного режима


Прежде всего, создайте папку components в корне каталога и добавьте эти файлы:


  1. Аватар.js

  1. Загрузка.js

  1. Лого.js

  1. Navbar.js

  1. GithubUser.js

  1. SearchBar.js

  1. UserBio.js

  1. UserData.js

  1. UserProfile.js

  1. UserStats.js

Не беспокойтесь о том, что вы видите так много компонентов, я специально создал эти компоненты, чтобы вам было легко управлять кодом.


Один важный момент перед этим: откройте файл _app.js внутри каталога pages и добавьте следующий код:


Внутри _app.js:


```javascript


импортировать 'tailwindcss/tailwind.css'


импортировать '../styles/globals.css'


импортировать {ThemeProvider} из «следующих тем»


функция MyApp({Компонент, pageProps}) {


возврат (


<Атрибут ThemeProvider="класс">


<Компонент {...pageProps} />



экспорт MyApp по умолчанию


Затем откройте файл tailwind.config.js и добавьте ключ darkMode со значением class следующим образом:


Внутри tailwind.config.js:


```json


модуль.экспорт = {


содержание: [


'./страницы/*/.{js,ts,jsx,tsx}',


'./компоненты/*/.{js,ts,jsx,tsx}',


тема: {


продлевать: {


анимация: {


wiggle: 'покачивание 1 с легким входом-выходом',


wiggle_reverse:'wiggle_reverse 0,3 с.


ключевые кадры: {


покачиваться: {


'0%, 100%': { преобразование: 'поворот (-60 градусов)' },


'50%': { преобразование: 'поворот (60 градусов)' },


wiggle_reverse: {


'0%': {преобразование: 'повернуть (90 градусов)'},


'100%': { преобразование: 'поворот (0 градусов)' },


темный режим: "класс",


плагины: [],


Затем файл next.config.js и добавьте домены для изображений следующим образом:


Внутри next.config.js:


/* @type {import('next').NextConfig} /


модуль.экспорт = {


картинки: {


домены: ["nextjsdev.com", "avatars.githubusercontent.com"]


реагироватьStrictMode: правда,


Я добавил две пользовательские анимации, которые я использую в этом приложении.


Теперь вставьте этот код один за другим в каждый компонент:


Внутри Avatar.js:


```javascript


импортировать изображение из «следующего/изображения»;


импортировать Vercel из "../public/vercel.svg"


постоянный аватар = ({imageURL}) => {


возврат (



{URL изображения ? (


<Изображение


источник = {URL-адрес изображения? URL-адрес изображения: Vercel}


ширина = "120"


высота = "120"


objectFit="обложка"


имя_класса = "закругленный-полный"


Изображение не найдено



экспортировать аватар по умолчанию


Внутри Loading.js:


```javascript


экспортировать константную загрузку = () => {


возврат (





<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5,373 0 12h4zm2 5.291A7.962 7,962 0 014 12H0c0 3,042 1,135 5,824 3 7,938l7z-2. </путь>




Внутри Logo.js:


```javascript


импортировать ссылку из 'далее/ссылка'


const Логотип = () => {


возврат (


<Ссылка href="/">




разработчик





экспорт логотипа по умолчанию


Внутри Navbar.js:


```javascript


импортировать {SunIcon} из '@heroicons/react/outline'


импортировать { MoonIcon } из '@heroicons/react/solid'


импортировать логотип из './Logo'


импортировать {useTheme} из «следующих тем»


импортировать {useState, useEffect} из «реагировать»


const Navbar = () => {


const { systemTheme, theme, setTheme } = useTheme();


const [mounted, setMounted] = useState (false);


использоватьЭффект(() => {


установитьMounted (истина);


константа renderThemeChanger = () => {


const currentTheme = тема === 'система' ? системаТема : тема


если (!mounted) вернуть ноль;


если (currentTheme === 'темный') {


возврат (




Светлый


<SunIcon


className="ml-1 встроенный блок h-8 w-8 текст-янтарь-400 анимация-покачивание "


onClick={() => setTheme('свет')}




} еще {


возврат (




Темный


<Иконка Луны


className="ml-1 встроенный блок h-8 w-8 text-grey-600 animate-wiggle_reverse"


onClick={() => setTheme('темный')}




возврат (



<дел>


<Логотип />