https://github.com/deemon13/react-components-profile

https://github.com/deemon13/react-components-profile

components css-modules editorconfig eslint gh-pages html javascript json jsx prettier prop-types react vite

Last synced: 25 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/deemon13/react-components-profile
• Owner: Deemon13
• Created: 2024-08-24T08:28:18.000Z (2 months ago)
• Default Branch: main
• Last Pushed: 2024-09-09T17:50:19.000Z (about 2 months ago)
• Last Synced: 2024-09-28T06:23:37.841Z (about 1 month ago)
• Topics: components, css-modules, editorconfig, eslint, gh-pages, html, javascript, json, jsx, prettier, prop-types, react, vite
• Language: JavaScript
• Homepage: https://deemon13.github.io/react-components-profile/
• Size: 225 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# React + Vite

This template provides a minimal setup to get React working in Vite with HMR and some

ESLint rules.

Currently, two official plugins are available:

-   [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md)

    uses [Babel](https://babeljs.io/) for Fast Refresh

-   [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses

    [SWC](https://swc.rs/) for Fast Refresh

Description of App

Внутри общего контейнера - корневого компонента  рендерятся 4 компонента: Профиль

социальной сети, Секция статистики, Список друзей, История транзакций.

Для компонентов описаны propTypes.

Стилизация выполнена CSS-modules.

Профиль социальной сети - компонент . Отображается информация о пользователе

социальной сети. Данные о пользователе лежат в файле user.json. Компонент принимает объект

props с информацией о пользователе:

username — имя пользователя; tag — тег в социальной сети без @; location — город и страна;

avatar — ссылка на изображение; stats — объект с информацией об активности.

Секция статистики - компонент . Отображает статистику по переданным пропам.

Например, загрузки в облако по типу файлов, посещение веб-страницы пользователями разных

стран, финансовые траты и т. п. Данные о статистике лежат в файле data.json. Компонент

принимает два пропа title и stats, в которых указывается заголовок и объект статистики.

title - не обязателен, и если он не передан, не рендерится разметка заголовка 
;

stats - массив объектов содержащих информацию о элементе статистики. Может иметь

произвольное количество элементов.


Список друзей - компонент . Отображает информацию о друзьях пользователя.

Информация о друзьях хранится в файле friends.json. Состоит из проивольного количества

компонентов . Компонент принимает один проп friends - массив объектов

друзей, в составе которого обязательный проп id, использующийся в качестве key для

коллекции компонентов .

3.1. Карточка одного друга - компонент . Компонент принимает несколько

пропсов:

avatar - ссылка на аватар; name - имя друга; isOnline - буль сигнализирующий о состоянии

друга, в сети или нет. В зависимости от пропа isOnline, меняется цвет текста статуса

друга.

История транзакций - компонент . Принимает один проп items - массив

объектов транзакций из transactions.json. Компонент создает разметку таблицы. Каждая

транзакция это строка таблицы. Данные для списка доступны в файле transactions.json. Это

массив объектов, каждый объект описывает одну транзакцию со следующими свойствами: id —

уникальный идентификатор транзакции; type — тип транзакции; amount - сумма транзакции;

currency - тип валюты.