From 8f8ab9ba551d919411494ea7834659825ea717d2 Mon Sep 17 00:00:00 2001
From: Olesya Aldoshyna <olesyaaldoshyna@gmail.com>
Date: Sun, 12 Nov 2023 16:34:52 +0200
Subject: [PATCH] added state in TweetsPage

---
 src/components/Tweet/Tweet.jsx            |  2 +-
 src/components/UserList/UserList.jsx      | 24 +++++++++++++++++++++++
 src/components/UserList/UserList.syled.js |  8 ++++++++
 src/pages/TweetsPage.jsx                  | 15 +++++++++++++-
 4 files changed, 47 insertions(+), 2 deletions(-)
 create mode 100644 src/components/UserList/UserList.jsx
 create mode 100644 src/components/UserList/UserList.syled.js

diff --git a/src/components/Tweet/Tweet.jsx b/src/components/Tweet/Tweet.jsx
index af7fc1d..163498f 100644
--- a/src/components/Tweet/Tweet.jsx
+++ b/src/components/Tweet/Tweet.jsx
@@ -3,7 +3,7 @@ import Avatar from '../Avatar/Avatar';
 import Button from '../Button/Button';
 import { CardContainer, CardImage, Line, Logo } from './Tweet.styled';
 
-const Tweet = ({ imageURL }) => {
+const Tweet = ({ imageURL, folowers, tweets, id }) => {
   const [isActive, setIsActive] = useState(false);
   const [isLoading, setIsLoading] = useState(true);
 
diff --git a/src/components/UserList/UserList.jsx b/src/components/UserList/UserList.jsx
new file mode 100644
index 0000000..1986392
--- /dev/null
+++ b/src/components/UserList/UserList.jsx
@@ -0,0 +1,24 @@
+import Tweet from 'components/Tweet/Tweet';
+import { GridContainer } from './UserList.syled';
+
+const UserList = ({ users }) => {
+  return (
+    <>
+      <GridContainer>
+        {users.map(({ avatar, folowers, tweets, id }) => {
+          return (
+            <Tweet
+              imageURL={avatar}
+              folowers={folowers}
+              tweets={tweets}
+              id={id}
+              key={id}
+            />
+          );
+        })}
+      </GridContainer>
+    </>
+  );
+};
+
+export default UserList;
diff --git a/src/components/UserList/UserList.syled.js b/src/components/UserList/UserList.syled.js
new file mode 100644
index 0000000..2b6f94e
--- /dev/null
+++ b/src/components/UserList/UserList.syled.js
@@ -0,0 +1,8 @@
+import styled from "@emotion/styled";
+
+export const GridContainer = styled.ul`
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: 20px;
+  list-style: none;
+`;
\ No newline at end of file
diff --git a/src/pages/TweetsPage.jsx b/src/pages/TweetsPage.jsx
index a3761b0..1a3d9a9 100644
--- a/src/pages/TweetsPage.jsx
+++ b/src/pages/TweetsPage.jsx
@@ -1,3 +1,16 @@
-const TweetsPage = params => {};
+import UserList from 'components/UserList/UserList';
+import { useState } from 'react';
+
+const TweetsPage = () => {
+  const [users, setUsers] = useState([]);
+  const [page, setPage] = useState(1);
+  const [isLoading, setIsLoading] = useState(false);
+
+  return (
+    <>
+      <UserList users={users} />
+    </>
+  );
+};
 
 export default TweetsPage;