Add code v1

src/components/App.jsx

@@ -1,16 +1,25 @@
+import { Profile } from './Profile/Profile';
+import user from '../data/user.json';
+import { Statistics } from './Statistics/Statistics';
+import data from '../data/data.json';
+import { FriendList } from './FriendList/FriendList';
+import friends from '../data/friends.json';
+import { TransactionHistory } from './TransactionHistory/TransactionHistory';
+import transactions from '../data/transactions.json';
+
 export const App = () => {
   return (
-    <div
-      style={{
-        height: '100vh',
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        fontSize: 40,
-        color: '#010101'
-      }}
-    >
-      React homework template
-    </div>
+    <>
+      <Profile
+        username={user.username}
+        tag={user.tag}
+        location={user.location}
+        avatar={user.avatar}
+        stats={user.stats}
+      />
+      <Statistics title="Upload Stats" stats={data} />
+      <FriendList friends={friends} />
+      <TransactionHistory items={transactions} />
+    </>
   );
 };

src/components/FriendList/FriendList.jsx

@@ -0,0 +1,26 @@
+import PropTypes from 'prop-types';
+import { FriendListItem } from 'components/FriendListItem/FriendListItem';
+import css from './FriendList.module.css';
+
+export const FriendList = ({ friends }) => {
+  return (
+    <ul className={css.friendList}>
+      {friends.map(({ avatar, name, isOnline, id }) => (
+        <FriendListItem
+          key={id}
+          avatar={avatar}
+          name={name}
+          isOnline={isOnline}
+        />
+      ))}
+    </ul>
+  );
+};
+
+FriendList.propTypes = {
+  friends: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.number.isRequired,
+    })
+  ).isRequired,
+};

src/components/FriendList/FriendList.module.css

@@ -0,0 +1,11 @@
+.friendList {
+  display: flex;
+  width: 350px;
+  flex-direction: column;
+  margin: 0 auto;
+  list-style-type: none;
+  padding: 0;
+  padding-top: 30px;
+  padding-bottom: 30px;
+  border-radius: 10px;
+}

src/components/FriendListItem/FriendListItem.jsx

@@ -0,0 +1,18 @@
+import css from './FriendListItem.module.css';
+import PropTypes from 'prop-types';
+
+export const FriendListItem = ({ avatar, name, isOnline }) => {
+  return (
+    <li className={css.friendListItem}>
+      <span className={isOnline ? css.online : css.offline}></span>
+      <img className="avatar" src={avatar} alt="User avatar" width="48" />
+      <p className="name">{name}</p>
+    </li>
+  );
+};
+
+FriendListItem.propTypes = {
+  avatar: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  isOnline: PropTypes.bool.isRequired,
+};

src/components/FriendListItem/FriendListItem.module.css

@@ -0,0 +1,28 @@
+.friendListItem {
+  padding: 15px 30px;
+  margin-bottom: 15px;
+  display: flex;
+  align-items: center;
+  gap: 30px;
+  border-radius: 0px 0px 4px 4px;
+  background: white;
+  box-shadow: 0px 2px 1px 0px rgba(46, 47, 66, 0.08),
+    0px 1px 1px 0px rgba(46, 47, 66, 0.16),
+    0px 1px 6px 0px rgba(46, 47, 66, 0.08);
+}
+
+.status {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+}
+
+.online {
+  composes: status;
+  background-color: green;
+}
+
+.offline {
+  composes: status;
+  background-color: red;
+}

src/components/Profile/Profile.jsx

@@ -0,0 +1,42 @@
+import PropTypes from 'prop-types';
+import css from './Profile.module.css';
+
+export const Profile = ({ username, tag, location, avatar, stats }) => {
+  return (
+    <div className={css.profile}>
+      <div className={css.description}>
+        <img src={avatar} alt="User avatar" className={css.avatar} />
+        <p className={css.name}>{username}</p>
+        <p className={css.userInfo}>@{tag}</p>
+        <p className={css.userInfo}>{location}</p>
+      </div>
+
+      <ul className={css.stats}>
+        <li className={css.item}>
+          <span className={css.label}>Followers</span>
+          <span className={css.quantity}>{stats.followers}</span>
+        </li>
+        <li className={css.item}>
+          <span className={css.label}>Views</span>
+          <span className={css.quantity}>{stats.views}</span>
+        </li>
+        <li className={css.item}>
+          <span className={css.label}>Likes</span>
+          <span className={css.quantity}>{stats.likes}</span>
+        </li>
+      </ul>
+    </div>
+  );
+};
+
+Profile.propTypes = {
+  username: PropTypes.string.isRequired,
+  tag: PropTypes.string.isRequired,
+  location: PropTypes.string.isRequired,
+  avatar: PropTypes.string.isRequired,
+  stats: PropTypes.shape({
+    followers: PropTypes.number.isRequired,
+    views: PropTypes.number.isRequired,
+    likes: PropTypes.number.isRequired,
+  }).isRequired,
+};

src/components/Profile/Profile.module.css

@@ -0,0 +1,100 @@
+.profile {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-top: 60px;
+  padding-bottom: 60px;
+
+}
+
+.description {
+
+  padding-top: 30px ;
+  padding-bottom: 30px;
+  background-color: white;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  border-top-left-radius: 10px;
+  border-top-right-radius: 10px;
+  width: 350px;
+  /* height: 370px; */
+  box-shadow: 0px 2px 1px 0px rgba(46, 47, 66, 0.08),
+      0px 1px 1px 0px rgba(46, 47, 66, 0.16),
+      0px 1px 6px 0px rgba(46, 47, 66, 0.08);
+
+
+}
+
+.avatar {
+  display: block;
+  width: 150px;
+  /* margin-top: 20px; */
+  border-radius: 50%;
+  background-color:#9CAF88;
+}
+
+.name {
+  font-size: 22px;
+  line-height: 1.62;
+  font-weight: bold;
+  color: #0f0f4f;
+  margin-top: 20px;
+}
+
+.userInfo {
+  margin-top: 10px;
+  font-size: 16px;
+  line-height: 1.62;
+  font-weight: 18px;
+  /* font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; */
+  color: slategrey;
+}
+
+.stats {
+  background-color: #f7fcff;
+  width: 350px;
+  display: flex;
+  margin: 0 auto;
+  padding: 0;
+  align-items: center;
+  justify-content: center;
+  border-bottom-left-radius: 10px;
+  border-bottom-right-radius: 10px;
+  box-shadow: 0px 2px 1px 0px rgba(46, 47, 66, 0.08),
+      0px 1px 1px 0px rgba(46, 47, 66, 0.16),
+      0px 1px 6px 0px rgba(46, 47, 66, 0.08);
+}
+
+.item {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 5px;
+  border-top: 1px solid #cdcdcd;
+  border-right: 1px solid #cdcdcd;
+}
+
+.item:last-child {
+  border-right: none;
+}
+
+.label {
+  display: flex;
+  margin-top: 15px;
+  line-height: 1.62;
+  font-size: 16px;
+  font-weight: 18px;
+  text-align: center;
+  justify-content: center;
+  color: slategrey;
+}
+
+.quantity {
+  text-align: center;
+  line-height: 1.58;
+  font-weight: bold;
+  margin-bottom: 15px;
+  color: #0f0f4f;
+}

src/components/Statistics/Statistics.jsx

@@ -0,0 +1,41 @@
+import PropTypes from 'prop-types';
+import css from './Statistics.module.css';
+
+export const Statistics = ({ title, stats }) => {
+  // Generate Random Color
+  const generateRandomColor = () => {
+    return `rgb(${Math.floor(Math.random() * 256)}, ${Math.floor(
+      Math.random() * 256
+    )}, ${Math.floor(Math.random() * 256)})`;
+  };
+
+  return (
+    <section className={css.statistics}>
+      {title && <h2 className={css.title}>{title}</h2>}
+
+      <ul className={css.statList}>
+        {stats.map(stat => (
+          <li
+            className={css.item}
+            style={{ backgroundColor: generateRandomColor() }}
+            key={stat.id}
+          >
+            <span className={css.label}>{stat.label}</span>
+            <span className={css.percentage}>{stat.percentage}%</span>
+          </li>
+        ))}
+      </ul>
+    </section>
+  );
+};
+
+Statistics.propTypes = {
+  title: PropTypes.string,
+  stats: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.string.isRequired,
+      label: PropTypes.string.isRequired,
+      percentage: PropTypes.number.isRequired,
+    })
+  ).isRequired,
+};

src/components/Statistics/Statistics.module.css

@@ -0,0 +1,62 @@
+.statistics {
+  width: 250px;
+  margin: 0 auto;
+  padding: 50px 20px;
+  width: 350px;
+
+}
+
+.title {
+  text-transform: uppercase;
+  text-align: center;
+  /* color: #192431; */
+  margin: 0 auto;
+  padding-top: 30px;
+  padding-bottom: 30px;
+  background-color: white;
+  color: #0f0f4f;
+  box-shadow: 0px 2px 1px 0px rgba(46, 47, 66, 0.08),
+      0px 1px 1px 0px rgba(46, 47, 66, 0.16),
+      0px 1px 6px 0px rgba(46, 47, 66, 0.08);
+
+}
+
+.statList {
+  display: flex;
+  justify-content: center;
+  margin: 0 auto;
+  padding: 0;
+  /* width: 350px; */
+  box-shadow: 0px 2px 1px 0px rgba(46, 47, 66, 0.08),
+      0px 1px 1px 0px rgba(46, 47, 66, 0.16),
+      0px 1px 6px 0px rgba(46, 47, 66, 0.08);
+}
+
+.item {
+  display: flex;
+  flex-direction: column;
+  margin: auto;
+  margin-top: 0;
+  text-align: center;
+
+  width: 100%;
+}
+
+.label {
+  padding-top: 5px;
+  color: white;
+  align-items: center;
+  /* width: 350px; */
+
+
+}
+
+.percentage {
+  font-size: 20px;
+  padding-bottom: 5px;
+  padding: 5px;
+  align-items: center;
+  color: white;
+  /* width: 350px; */
+
+}