feat: feed e tweets

src/components/Button/index.tsx

@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 
 interface Props {
-  outlined: boolean;
+  outlined?: boolean;
 }
 
 export default styled.button<Props>`
@@ -10,7 +10,7 @@ export default styled.button<Props>`
   border: ${props => props.outlined ? '1px solid var(--twitter)': 'none'};
 
   padding: 16px;
-  border-radius: 25%;
+  border-radius: 25px;
 
   font-weight: bold;
   font-size: 15px;

src/components/Feed/index.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+import Tweet from '../Tweet';
+
+import { Container, Tab, Tweets } from './styles';
+
+const Feed: React.FC = () =>{
+  return (
+    <Container>
+      <Tab>Tweets</Tab>
+
+      <Tweets>
+        <Tweet />
+        <Tweet />
+        <Tweet />
+        <Tweet />
+        <Tweet />
+      </Tweets>
+    </Container>
+
+  );
+}
+
+export default Feed;

src/components/Feed/styles.ts

@@ -0,0 +1,35 @@
+import styled from "styled-components";
+
+
+export const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+
+`;
+
+export const Tab = styled.div`
+  margin-top: 10px;
+  padding: 11px 0 15px;
+  text-align: center;
+
+  font-weight: bold;
+  font-size: 15px;
+
+  outline: 0;
+  cursor: pointer;
+
+  color: var(--twitter);
+  border-bottom: 2px solid var(--twitter);
+  
+  &:hover{
+    background: var(--twitter-dark-hover);
+
+  }
+`;
+
+export const Tweets = styled.div`
+  display: flex;
+  flex-direction: column;
+
+  flex-shrink: 0;
+`;

src/components/Layout/index.tsx

@@ -1,16 +1,17 @@
 import React from 'react';
+
 import Main from '../Main';
+
 import { Container, Wrapper } from './styles';
 
-const Layout: React.FC =  ( ) => {
+const Layout: React.FC =  () => {
   return (
     <Container>
       <Wrapper>
         {/* <MenuBar /> */}
-          <Main />
-            {/* <SideBar /> */}
+        <Main />
+        {/* <SideBar /> */}
       </Wrapper>
-
     </Container>
   );
 }

src/components/Layout/styles.ts

@@ -10,4 +10,4 @@ export const Wrapper = styled.div`
 
   display: flex;
   justify-content: center;
-`;
+`;

src/components/Main/index.tsx

@@ -18,24 +18,25 @@ const Main: React.FC = () => {
   return(
     <Container> 
       <Header>
-          <button>
-            <BackIcon />
-          </button>
+        <button>
+          <BackIcon />
+        </button>
 
-          <ProfileInfo>
-            <strong>renan pereira</strong>
-            <span>11,6K Tweets</span>
-          </ProfileInfo>
+        <ProfileInfo>
+          <strong>Renan</strong>
+          <span>11,6K Tweets</span>
+        </ProfileInfo>
       </Header>
-      <ProfilePage/>
+
+      <ProfilePage />
       <BottomMenu>
         <HomeIcon />
         <SearchIcon />
         <BellIcon />
         <EmailIcon />
       </BottomMenu>
     </Container>
-  )
+  );
 }
 
 export default Main;

src/components/Main/styles.ts

@@ -7,7 +7,7 @@ export const Container = styled.div`
 
   width: min(601px, 100%);
 
-  @media (min-width: 500px ){
+  @media (min-width: 500px){
     border-left: 1px solid var(--outline);
     border-right: 1px solid var(--outline);
   }
@@ -43,19 +43,20 @@ export const Header = styled.div`
 export const BackIcon = styled(ArrowLeft)`
   width: 24px;
   height: 24px;
-  right: 100%;
+
   fill: var(--twitter);
 `;
 
 export const ProfileInfo = styled.div`
   margin-left: 17px;
+
   display: flex;
   flex-direction: column;
 
-  > strong{
+  > strong {
     font-size: 19px;
   }
-  > span{
+  > span {
     font-size: 15px;
     color: var(--gray);
   }

src/components/ProfilePage/index.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 
+import Feed from '../Feed';
 import { 
    Container,
    Banner,
@@ -46,6 +47,8 @@ const ProfilePage: React.FC = () => {
         </span>  
       </Followage>  
       </ProfileData>
+
+      <Feed />
     </Container>
 
   );

src/components/ProfilePage/styles.ts

@@ -46,38 +46,36 @@ export const ProfileData = styled.div`
   flex-direction: column;
 
   position: relative;
-  
+
   >h1{
     font-weight: bold;
     font-size: 19px;
   }
+
   >h2{
-   font-weight: normal;
-   font-size: 15px;
-   color: var(--gray);
-
-  > p {
-     font-size: 15px;
-     margin-top: 11px;
-   }
-  > ul {
-    list-style-type: none;
+    font-weight: normal;
+    font-size: 15px;
+    color: var(--gray);
+  }
+  >p{
+    font-size: 15px;
+    margin-top: 11px;
+  }
+  >ul{
+    list-style: none;
     margin-top: 10px;
     margin-bottom: 10px;
-    
-    > li {
-      display: flex;
-      align-items: center;
+    >li{
       font-size: 15px;
       color: var(--gray);
 
       >svg{
         fill: var(--gray);
         margin-right: 5px;
-       }
-     }
-   } 
+      }
+    }
   }
+
 `;
 const IconCSS = css`
   width: 20px;
@@ -100,4 +98,19 @@ export const Followage = styled.div`
       margin-left: 20px;
     }
   }
+`;
+
+export const EditButton = styled(Button)`
+  position: absolute;
+  top: 2vw;
+  right: 7px;
+
+  padding: 4px 16px;
+  font-size: 13px;
+
+  @media(min-width: 320px){
+    top: 10px;
+    padding: 10px 19px;
+    font-size: 15px;
+  }
 `;

src/components/Tweet/index.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+
+import { 
+   Container,
+   Retweeted,
+   RocketseatIcon,
+   Body,
+   Avatar,
+   Content,
+   Header,
+   Dot,
+   Description,
+   ImageContent,
+   Icons,
+   Status,
+   CommentIcon,
+   RetweetIcon,
+   LikeIcon
+  } from './styles';
+
+const Tweet: React.FC = () => {
+  return (
+    <Container>
+      <Retweeted>
+        <RocketseatIcon />
+        Você retweetou
+      </Retweeted>
+      <Body>
+        <Avatar />
+
+        <Content>
+          <Header>
+            <strong>Renan</strong>
+            <span>@renan</span>
+            <Dot />
+            <time> 25 de jul</time>
+          </Header>
+
+          <Description>Testando...</Description>
+
+          <ImageContent />
+
+          <Icons>
+            <Status>
+              <CommentIcon />
+              20
+              <RetweetIcon />
+              20
+              <LikeIcon />
+              150
+            </Status>
+          </Icons>
+        </Content>
+      </Body>
+    </Container>
+  );
+}
+
+export default Tweet;

src/components/Tweet/styles.ts

@@ -0,0 +1,32 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+  
+`;
+export const Retweeted = styled.div``;
+
+export const RocketseatIcon = styled.div``;
+
+export const Body = styled.div``;
+
+export const Avatar = styled.div``;
+
+export const Content = styled.div``;
+
+export const Header = styled.div``;
+
+export const Dot = styled.div``;
+
+export const Description = styled.div``;
+
+export const ImageContent = styled.div``;
+
+export const Icons = styled.div``;
+
+export const Status = styled.div``;
+
+export const CommentIcon = styled.div``;
+
+export const RetweetIcon = styled.div``;
+
+export const LikeIcon = styled.div``;

src/styles/GlobalStyles.ts

@@ -2,14 +2,16 @@ import { createGlobalStyle } from "styled-components";
 
 export default createGlobalStyle`
   *{
-    margin: auto;
+    margin: 0;
     padding: 0;
     box-sizing: border-box;
+
+    color: var(--white);
   }
 
-  html, body, root{
+  html, body, #root{
     max-height: 100vh;
-    max-width: 100vh;
+    max-width: 100vw;
 
     width: 100%;
     height: 100%;
@@ -21,9 +23,11 @@ export default createGlobalStyle`
     color: var(--white);
     font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
   }
+
   html{
     background: var(--primary);
   }
+
   :root{
     --primary: #000;
     --secondary: #15181C;