https://github.com/yevheniidatsenko/goit-react-woolf-hw-01-components

⚛️ React Hometask - Components
https://github.com/yevheniidatsenko/goit-react-woolf-hw-01-components

components css3 goit goit-react-woolf-hw-01-components ja react

Last synced: 2 months ago
JSON representation

⚛️ React Hometask - Components

• Host: GitHub
• URL: https://github.com/yevheniidatsenko/goit-react-woolf-hw-01-components
• Owner: yevheniidatsenko
• Created: 2024-02-03T16:41:30.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2024-02-04T22:08:55.000Z (over 2 years ago)
• Last Synced: 2025-02-10T08:49:18.229Z (over 1 year ago)
• Topics: components, css3, goit, goit-react-woolf-hw-01-components, ja, react
• Language: HTML
• Homepage: https://yevheniidatsenko.github.io/goit-react-woolf-hw-01-components/
• Size: 2.14 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
### React homework - Components

This React homework, named `goit-react-woolf-hw-01-components`, consists of

several components to display various types of information.

The components are:

1. **Profile:**

   - Displays information about a social media user.

   - Accepts props for username, tag, location, avatar, and stats.

   - Renders a structured profile layout.

2. **Statistics:**

   - Displays statistical information based on provided data.

   - Accepts props for title (optional) and stats array.

   - Renders a statistical data section with a flexible layout.

3. **FriendList:**

   - Displays a list of friends with avatars, names, and online status.

   - Accepts a prop for an array of friend objects.

   - Renders a friend list with dynamic online status styling.

4. **TransactionHistory:**

   - Displays a table of transaction history based on provided data.

   - Accepts a prop for an array of transaction objects.

   - Renders a transaction history table with clear columns.

### Implementation Details

- All components are rendered within a single page using the root component

  ``.

- Component files are organized in separate folders with distinct React and

  styles files.

- JavaScript code is clean, readable, and follows the Prettier code formatting.

- Styling is achieved using CSS modules or Styled Components.

- Emphasis on functional JavaScript implementation (80%) with basic yet

  sufficient styling (20%).