Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/andriidorohov/goit-react-hw-01-components
React components & styling - 👤 PROFILE - 📊 STATISTICS - 👥 FRIENDS LIST - 💰 TRANSACTION HISTORY
https://github.com/andriidorohov/goit-react-hw-01-components
css normalize-css react react-hooks
Last synced: about 2 months ago
JSON representation
React components & styling - 👤 PROFILE - 📊 STATISTICS - 👥 FRIENDS LIST - 💰 TRANSACTION HISTORY
- Host: GitHub
- URL: https://github.com/andriidorohov/goit-react-hw-01-components
- Owner: AndriiDorohov
- Created: 2023-06-25T23:14:53.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-01-06T00:20:46.000Z (12 months ago)
- Last Synced: 2024-01-06T01:29:29.774Z (12 months ago)
- Topics: css, normalize-css, react, react-hooks
- Language: JavaScript
- Homepage: https://AndriiDorohov.github.io/goit-react-hw-01-components/
- Size: 2.79 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Social Network Profile
It is necessary to create a component ``, with which we could display
information about the user of the social network. User data is stored in the
[user.json](./src/data/user.json) file.
## Description of the `` component
The component must accept several propses with user information:
- `username` — user name
- `tag` — tag in a social network without `@'
- `location' — city and country
- `avatar' — link to the image
- `stats' — object with activity information
The component should create a DOM element of the following structure.
```html
Petra Marica
@pmarica
Salvador, Brasil
-
Followers
1000
-
Views
2000
-
Likes
3000
```
## Usage example
```js
import user from 'path/to/user.json;
```
# Statistics Section
Create a component `` that would display statistics on the
transmitted prop. For example, uploads to the cloud by file type, web page
visits by users from different countries, financial expenses, etc. Statistics
data are in the file [data.json](./src/data/data.json).
## Description of the component
The component must accept two passes `title` and `stats`, which specify the
title and the statistics object.
- `title` is optional, and if it is not passed, the markup should not be
rendered the header `
`.
- `stats` - an array of objects containing information about the statistics
element. Can have an arbitrary number of elements.
- You can skip the background color of the statistics element in the design, or
create a function to generate a random color.
The component should create a DOM element of the following structure.
```html
Upload stats
-
.docx
4%
-
.mp3
14%
-
.pdf
41%
-
.mp4
12%
```
## Usage example
```js
import data from '/path/to/data.json';
;
;
```
# Friends list
It is necessary to create a component ``, with which we could
display information about the user's friends. Information about friends is
stored in the [friends.json](./src/data/friends.json).
## Description of the `` component
The component must accept a single `friends` prop - an array of friends objects.
The component should create a DOM of the following structure.
```html
```
## Description of the `` component
The component must accept multiple props:
- `avatar' - link to the avatar
- `name` - friend's name
- `isOnline` - a bul signaling the status of a friend, online or not.
Depending on the prop `isOnline`, the background color `span.status` should
change. This can be done through a different CSS class or Styled Components.
The component should create a DOM of the following structure.
```html
```
## Usage example
```js
import friends from 'path/to/friends.json';
,
```
# Transaction History
It is necessary to create a transaction history component in the personal
account of the Internet bank.
The data for the list is available in JSON format in a file
[transactions.json](./src/data/transactions.json). This is an array of objects,
each object describes one transaction with the following properties:
- `id' — unique transaction ID
- `type' — transaction type
- `amount` - transaction amount
- `currency' - currency type
## Description of the `` component
It is necessary to create a component `` that accepts one
prop `items` is an array of transaction objects from 'transactions.json`. The
component creates a table layout. Each transaction is a row of a table. The
example shows the markup of two transactions.
```html
Type
Amount
Currency
Invoice
125
USD
Withdrawal
85
USD
```
## Usage example
```js
import transactions from 'path/to/transactions.json';
;
```