feat: solve all tasks

package.json

@@ -8,7 +8,9 @@
     "@testing-library/react": "^12.1.4",
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.1.0",
+    "react-animated-text": "^0.1.4",
     "react-dom": "^18.1.0",
+    "react-icons": "^5.0.1",
     "react-scripts": "5.0.1",
     "styled-components": "^6.1.8",
     "web-vitals": "^2.1.3"

src/components/App.jsx

@@ -1,13 +1,22 @@
-import { Profile } from './Profile/Profile';
-import user from '../data/user.json';
 import { Layout } from './Layout';
 import { GlobalStyle } from './Globalstyle';
+import { Statistics } from './Statistics/Statistics';
+import { Profile } from './Profile/Profile';
+import { FriendList } from './FriendList/FriendList';
+import stats from '../data/statistics.json';
+import user from '../data/user.json';
+import friends from '../data/friends.json';
+import transactions from '../data/transactions.json';
+import { TransactionsHistory } from './Transactions/TransactionsHistory';
 
 export const App = () => {
   return (
     <Layout>
       <GlobalStyle />
       <Profile {...user} />
+      <Statistics title="Upload stats" items={stats} />
+      <FriendList friends={friends} />
+      <TransactionsHistory items={transactions} />;
     </Layout>
   );
 };

src/components/FriendList/FriendItem/FriendItem.jsx

@@ -0,0 +1,11 @@
+import { Avatar, Name, Status } from './FriendItem.styled';
+
+export const FriendItem = ({ avatar, name, isOnline }) => {
+  return (
+    <>
+      <Status $isonline={isOnline}></Status>
+      <Avatar src={avatar} alt="User avatar" width="48" />
+      <Name>{name}</Name>
+    </>
+  );
+};

src/components/FriendList/FriendItem/FriendItem.styled.js

@@ -0,0 +1,17 @@
+import styled from 'styled-components';
+
+export const Status = styled.span`
+  width: 15px;
+  height: 15px;
+  background-color: ${({ $isonline }) => ($isonline ? 'green' : 'red')};
+  border-radius: 50%;
+`;
+
+export const Avatar = styled.img`
+  width: 50px;
+`;
+
+export const Name = styled.p`
+  font-size: 26px;
+  font-weight: 700;
+`;

src/components/FriendList/FriendList.jsx

@@ -0,0 +1,18 @@
+import { FriendItem } from './FriendItem/FriendItem';
+import { FriendWrapper, FriendWrapperItem } from './FriendList.styled';
+
+export const FriendList = ({ friends }) => {
+  return (
+    <FriendWrapper>
+      {friends.map(({ avatar, name, isOnline, id }) => (
+        <FriendWrapperItem key={id}>
+          <FriendItem
+            avatar={avatar}
+            name={name}
+            isOnline={isOnline}
+          ></FriendItem>
+        </FriendWrapperItem>
+      ))}
+    </FriendWrapper>
+  );
+};

src/components/FriendList/FriendList.styled.js

@@ -0,0 +1,31 @@
+import styled from 'styled-components';
+
+export const FriendWrapper = styled.ul`
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+`;
+
+export const FriendWrapperItem = styled.li`
+  display: flex;
+  align-items: center;
+  gap: 15px;
+  min-width: 250px;
+  min-height: 50px;
+  margin: 0 auto;
+  padding: 20px;
+  border: 1px solid lightskyblue;
+  border-radius: 4px;
+  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.12);
+  background-color: white;
+  color: midnightblue;
+  transition: transform var(--animation-duration) var(--timing-function),
+    box-shadow var(--animation-duration) var(--timing-function);
+  &:hover,
+  :focus {
+    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.12), 0px 4px 4px rgba(0, 0, 0, 0.06),
+      1px 4px 6px rgba(0, 0, 0, 0.16);
+    cursor: pointer;
+    transform: scale(1.03);
+  }
+`;

src/components/Profile/Profile.jsx

@@ -9,6 +9,10 @@ import {
   StatValue,
   Wrapper,
 } from './Profile.styled';
+import { FcLike } from 'react-icons/fc';
+import { IoEye } from 'react-icons/io5';
+import { GiShadowFollower } from 'react-icons/gi';
+import { IconContext } from 'react-icons';
 
 export const Profile = ({
   username,
@@ -28,15 +32,27 @@ export const Profile = ({
 
       <Stat>
         <StatItem>
-          <StatLabel>Followers</StatLabel>
+          <StatLabel>
+            <IconContext.Provider value={{ color: 'purple', size: '24px' }}>
+              <GiShadowFollower />
+            </IconContext.Provider>
+          </StatLabel>
           <StatValue>{followers}</StatValue>
         </StatItem>
         <StatItem>
-          <StatLabel>Views</StatLabel>
+          <StatLabel>
+            <IconContext.Provider value={{ color: 'blue', size: '24px' }}>
+              <IoEye />
+            </IconContext.Provider>
+          </StatLabel>
           <StatValue>{views}</StatValue>
         </StatItem>
         <StatItem>
-          <StatLabel>Likes</StatLabel>
+          <StatLabel>
+            <IconContext.Provider value={{ size: '24px' }}>
+              <FcLike />
+            </IconContext.Provider>
+          </StatLabel>
           <StatValue>{likes}</StatValue>
         </StatItem>
       </Stat>

src/components/Profile/Profile.styled.js

@@ -23,7 +23,7 @@ export const Avatar = styled.img`
 `;
 
 export const Name = styled.div`
-  color: skyblue;
+  color: midnightblue;
   margin-top: 16px;
   font-weight: bold;
   font-size: 24px;
@@ -39,12 +39,14 @@ export const Info = styled.div`
 
 export const Stat = styled.ul`
   display: flex;
+  align-items: center;
+  height: 150px;
+  background-color: lightskyblue;
 `;
 
 export const StatItem = styled.li`
   flex-basis: calc(100% / 3);
   text-align: center;
-  background-color: lightskyblue;
   border: 1px solid lightskyblue;
 `;
 

src/components/Statistics/Statistics.jsx

@@ -0,0 +1,25 @@
+import {
+  StatsItem,
+  StatsLabel,
+  StatsList,
+  StatsSection,
+  StatsValue,
+  Title,
+} from './Statistics.styled';
+
+export const Statistics = ({ title, items }) => {
+  return (
+    <StatsSection>
+      {title && <Title title={title}>{title}</Title>}
+      {/* <Wave1></Wave1> */}
+      <StatsList>
+        {items.map(({ id, label, percentage }) => (
+          <StatsItem key={id} $count={items.length}>
+            <StatsLabel>{label}</StatsLabel>
+            <StatsValue>{percentage}%</StatsValue>
+          </StatsItem>
+        ))}
+      </StatsList>
+    </StatsSection>
+  );
+};

src/components/Statistics/Statistics.styled.js

@@ -0,0 +1,60 @@
+import styled from 'styled-components';
+import { Wave } from 'react-animated-text';
+
+const StyledTitle = styled.h2`
+  text-align: center;
+  text-transform: uppercase;
+  font-size: 30px;
+  font-weight: 700;
+  padding: 32px 0;
+  color: midnightblue;
+`;
+
+export const Title = ({ title }) => (
+  <StyledTitle>
+    <Wave text={`${title}`} effect="fadeOut" effectChange={1.0} />
+  </StyledTitle>
+);
+export const StatsSection = styled.section`
+  margin: 60px auto;
+  padding: 20px;
+  border: 1px solid lightskyblue;
+  border-radius: 4px;
+  background-color: lightskyblue;
+  width: 500px;
+`;
+
+export const StatsList = styled.ul`
+  display: flex;
+  gap: 15px;
+  padding: 15px;
+  background-color: white;
+  border-radius: 4px;
+`;
+
+export const StatsItem = styled.li`
+  text-align: center;
+  flex-basis: ${({ $count }) => `calc(100% / ${$count})`};
+  background-color: ${getRandomHexColor};
+  border: 1px solid midnightblue;
+  border-radius: 4px;
+`;
+
+export const StatsLabel = styled.p`
+  margin-top: 18px;
+  margin-bottom: 9px;
+  font-size: 20px;
+  font-weight: bold;
+  color: midnightblue;
+`;
+
+export const StatsValue = styled.p`
+  font-size: 18px;
+  margin-bottom: 16px;
+  font-weight: bold;
+  color: midnightblue;
+`;
+
+function getRandomHexColor() {
+  return `#${Math.floor(Math.random() * 16777215).toString(16)}`;
+}

src/components/Transactions/TransactionsHistory.jsx

@@ -0,0 +1,24 @@
+import { Table } from './TransactionsHistory.styled';
+
+export const TransactionsHistory = ({ items }) => {
+  return (
+    <Table>
+      <thead>
+        <tr>
+          <th>Type</th>
+          <th>Amount</th>
+          <th>Currency</th>
+        </tr>
+      </thead>
+      <tbody>
+        {items.map(({ id, type, amount, currency }) => (
+          <tr key={id}>
+            <td>{type}</td>
+            <td>{amount}</td>
+            <td>{currency}</td>
+          </tr>
+        ))}
+      </tbody>
+    </Table>
+  );
+};

src/components/Transactions/TransactionsHistory.styled.js

@@ -0,0 +1,24 @@
+import styled from 'styled-components';
+
+export const Table = styled.table`
+  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.12), 0px 1px 1px rgba(0, 0, 0, 0.14),
+    0px 2px 1px rgba(0, 0, 0, 0.2);
+  border-radius: 0px 0px 4px 4px;
+  margin: 60px auto 0 auto;
+  text-align: center;
+  color: midnightblue;
+  width: 40%;
+  & thead {
+    background-color: lightskyblue;
+  }
+  & tr:hover {
+    background-color: lightskyblue;
+    text-shadow: 1px 1px 2px white, 0 0 1em white, 0 0 0.2em white;
+  }
+  & th,
+  & td {
+    padding: 8px 16px;
+    border: 1px solid lightskyblue;
+    border-radius: 10px;
+  }
+`;

src/data/friends.json

@@ -0,0 +1,32 @@
+[
+  {
+    "avatar": "https://cdn-icons-png.flaticon.com/512/1998/1998592.png",
+    "name": "Mango",
+    "isOnline": true,
+    "id": 1812
+  },
+  {
+    "avatar": "https://cdn-icons-png.flaticon.com/512/616/616438.png",
+    "name": "Kiwi",
+    "isOnline": false,
+    "id": 1137
+  },
+  {
+    "avatar": "https://cdn-icons-png.flaticon.com/512/1623/1623681.png",
+    "name": "Ajax",
+    "isOnline": true,
+    "id": 1213
+  },
+  {
+    "avatar": "https://cdn-icons-png.flaticon.com/512/2977/2977285.png",
+    "name": "Jay",
+    "isOnline": true,
+    "id": 1714
+  },
+  {
+    "avatar": "https://cdn-icons-png.flaticon.com/512/1998/1998749.png",
+    "name": "Poly",
+    "isOnline": false,
+    "id": 1284
+  }
+]

src/data/statistics.json

@@ -0,0 +1,7 @@
+[
+  { "id": "id-1", "label": ".docx", "percentage": 22 },
+  { "id": "id-2", "label": ".pdf", "percentage": 4 },
+  { "id": "id-3", "label": ".mp3", "percentage": 17 },
+  { "id": "id-4", "label": ".psd", "percentage": 47 },
+  { "id": "id-5", "label": ".pdf", "percentage": 10 }
+]