added state in TweetsPage

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);
 

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;

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;
+`;

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;