Projeto finalizado v1

package.json

@@ -14,7 +14,9 @@
     "@fortawesome/free-brands-svg-icons": "^6.6.0",
     "@fortawesome/free-solid-svg-icons": "^6.6.0",
     "@fortawesome/react-fontawesome": "^0.2.2",
+    "crypto": "^1.0.1",
     "crypto-js": "^4.2.0",
+    "prop-types": "^15.8.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "uuid": "^10.0.0"

src/App.jsx

@@ -1,57 +1,121 @@
 import { Sidebar } from "./Components/Sidebar"
 import { Tweet } from "./Components/Tweet"
 import { TwitterForm } from "./Components/TwitterForm"
-import { v4 } from "uuid";
-import { getAvatar, getRandomImage } from "./utils/generateImages";
-import { useState,useEffect } from "react";
+import { v4 } from "uuid"
+import { getAvatar, getRandomImage } from "./utils/generateImages"
+import { useState, useEffect } from "react"
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+import { faSearch } from "@fortawesome/free-solid-svg-icons"
+import { TrendItem } from "./Components/TrendItem"
+import { FollowItem } from "./Components/FollowItem"
 
 
 function App() {
-const [tweets, setTweets] = useState([])
-
-
-
-const addNewTweet = (content,incluideImage = false) => {
-  const newTweet = {
-    id: v4(),
-    name:"User",
-    username: 'user${Math.floor(Math.random() * 1000)}',
-    avatar: getAvatar('user${Math.floor(Math.random() * 1000)}@email.com'),
-    content,
-    time: new Date().toLocaleString ([],{
-      hour:'2-digit',
-      minute:'2-digit'
-    }),
-    Image: incluideImage ? getRandomImage() : null,
-    likes: 0,
-    retweets:0,
-    comments:0
-
-  }
-  setTweets ((prevTweets)=> [newTweet, ...prevTweets])
+  const [tweets, setTweets] = useState([])
 
+  useEffect(() => {
+    const interval = setInterval(() => {
+      addNewRandomTweets ()
+    }, 4000);
+    return () => clearInterval (interval)
+  }, [])
+
+const  addNewRandomTweets = () => {
+  const randomTweets = [
+    'Essa vai ser a oposição mais afrontosa que o brasil ja viu 👊',
+    'Quando lança o GTA 6 meu deus??',
+    'NAO JOGA NO TIGRINHO ISSO NÃO É VIDA',
+    'Just Walk Away From The Screen CLOSE YOUR EYES - Tyler The Creator',
+    'Gente o Tim Maia morreu???',
+    'YOTRA',
+    'CALMA CALABRESO',
+    'GAROTO FILHO EU NAO QUERO',
+    'depois que inventaram a desculpa nunca mais morreu ninguém kkkkk',
+    'gente o akon usou playback? #ROCKINRIO',
+    '#Tocansando', 
+    'VAI CORINTHIANS eu te amo DEPAY👉😌👈',
 
+  ]
+  const randomTweet = 
+  randomTweets [Math.floor(Math.random() * randomTweets.length)]
 
+  addNewTweet (randomTweet, Math.random () > 0.100)
 }
 
+
+
+
+
+
+  const addNewTweet = (content, includeImage = false) => {
+    const newTweet = {
+      id: v4(),
+      name: "User",
+      username: `user${Math.floor(Math.random() * 1000)}`,
+      avatar: getAvatar(`user${Math.floor(Math.random() * 1000)}@email.com`),
+      content: content,
+
+      time: new Date().toLocaleString([], {
+        hour: '2-digit',
+        minute: '2-digit'
+      }),
+      image: includeImage ? getRandomImage() : null,
+      likes: 0,
+      retweets: 0,
+      comments: 0
+
+    }
+    setTweets((prevTweets) => [newTweet, ...prevTweets])
+
+  }
+
   return (
-   
-      <div className="flex mx-auto max-w-7xl">
-       <Sidebar/>
-     
+
+    <div className="flex mx-auto max-w-7xl">
+      <Sidebar />
+
       <main className="flex-grow border-l border-r border-gray-700 max-w-xl">
         <header className="sticky top-0 z-10 bg-twitter-background bg-opacity-80 backdrop-blur-sm">
           <h2 className="px-4 py-3 text-xl font-bold">For You</h2>
         </header>
-        <TwitterForm onTweet={(content) => addNewTweet(content, Math.random() > 0.6)}/>
+        <TwitterForm onTweet={(content) => addNewTweet(content, Math.random() > 0.6)} />
         <div>
           {tweets.map(tweet => (
-            <Tweet key={tweet.id}  tweet={tweet}/>
+            <Tweet key={tweet.id} tweet={tweet} />
           ))}
-         
+
         </div>
       </main>
-      </div>
+      <aside className="hidden xl:block w-80 px-4">
+        <div className="sticky top-0 pt-2">
+          <div className="relative">
+            <FontAwesomeIcon icon={faSearch} className="absolute top-3 left-3 text-gray-500"/>
+            <input placeholder="Search Twitter" className="w-full bg-gray-800 text-white rounded-full outline-none py-2 pl-10 pr-4"/>
+          </div>
+
+          <div className="bg-gray-800 rounded-xl mt-4 p-4">
+            <h2 className="font-bold text-xl mb-4">Subscribe to Premium</h2>
+            <p className="text-gray-500 mb-4">Da dinheiro pro Twitter não!</p>
+            <button className="bg-twitter-blue text-white font-bold py-2 px-4 rounded-full hover:bg-blue-600 transition duration-200">Subscribe</button>
+          </div>
+          <div className="bg-gray-800 rounded-xl mt-4 p-4">
+
+          <h2 className="font-bold text-xl mb-4"> OQ TA PEGANDO AGORA NO MUNDAO?</h2>
+            <TrendItem category="NBA · LIVE" name="Boston Celtics NBA CHAMPIONSHIP"tweetCount='8,183'/>
+            <TrendItem category="Brasil · Trending" name="#ROCKINRIO"tweetCount='5,763'/>
+            <TrendItem category="Futebol · Trending" name="DEPAY É TIMÃO!"tweetCount='50,462'/>
+            <TrendItem category="Games · Trending" name="Valorant"tweetCount='345'/>
+            <TrendItem category="Music · Trending" name="RACIONAIS MCS" tweetCount='1,345'/>
+          </div>
+          <div className="bg-gray-800 rounded-xl mt-4 p-4">
+            <h2 className="font-bold text-xl mb-4">Quem Seguir?</h2>
+            <FollowItem name="Jon Snow" username="Jon Snow" />
+            <FollowItem name ="Lebron James" username="kingjames" />
+            <FollowItem name ="Tracie Okereke" username="tracieokereke" />
+          </div>
+        </div>
+      </aside>
+    </div>
   )
 }
 

src/Components/FollowItem/index.jsx

@@ -0,0 +1,28 @@
+import PropTypes from "prop-types";
+import Proptypes from "prop-types";
+import { getAvatar } from "../../utils/generateImages";
+
+export function FollowItem({ name, username }) {
+  const avatar = getAvatar(
+    `${name + Math.floor(Math.random() * 1000)}@email.com`
+  );
+  return (
+    <div className="flex items-centers justify-between py-3 hover:bg-gray-800 transition duration-200">
+      <div className="flex items-center">
+        <img src={avatar} alt="user avatar" className="w-12 h-12 rounded-full mr-3" />
+        <div>
+          <p className="font-bold">{name}</p>
+          <p className="text-gray-500">{username}</p>
+        </div>
+      </div>
+      <div>
+        <button className="bg-white text-black font-bold px-4 py-2 rounded-full hover: bg-gray-300 transition duration-200">Follow</button>
+      </div>
+    </div>
+  )
+}
+
+FollowItem.Proptypes = {
+  name: PropTypes.string,
+  username: Proptypes.string,
+};

src/Components/Sidebar/index.jsx

@@ -31,7 +31,7 @@ export function Sidebar(){
 
             </nav>
             <button className="bg-blue-400 text-white rounded-full font-bold px-4 py-3 mt-4 w-full cursor-pointer">
-            <FontAwesomeIcon icon={faFeatherAlt} className="text-blue-400 text-3xl m-4 inline xl:hidden" />
+            <FontAwesomeIcon icon={faFeatherAlt} className="text-white inline xl:hidden" />
             <span className="hidden xl:inline">Twitter</span>
 
             </button>

src/Components/TrendItem/index.jsx

@@ -0,0 +1,19 @@
+import PropTypes from 'prop-types';
+
+
+export function TrendItem({category, name, tweetCount}) {
+    return (
+    <div className='py-3 hover: bg-gray-800 transition duration-200 cursor-pointer'>
+        <p className='text-gray-500 text-sm'>{category}</p>
+        <p className='font-bold'>{name}</p>
+        {tweetCount &&<p className='text-gray-500 text-sm'>{tweetCount}</p>}
+    </div>)
+
+}
+
+TrendItem.PropTypes = {
+    category : PropTypes.string,
+    name : PropTypes.string,
+    tweetCount : PropTypes.string,
+
+}

src/Components/Tweet/index.jsx

@@ -6,9 +6,10 @@ export function Tweet({ tweet }) {
     const [comments, setComments] = useState(0)
     const [like, setLikes] = useState(0)
     const [retweet, setRetweet] = useState(0)
-    
+
     function handleAction(action) {
 
+
         switch (action) {
             case 'like':
                 setLikes((likes) => likes + 1)
@@ -39,7 +40,7 @@ export function Tweet({ tweet }) {
                         <FontAwesomeIcon icon={faEllipsisH} className="text-gray-500" />
                     </div>
                     <p className="mt-2">{tweet.content}</p>
-                    {tweet.image && <img src={tweet.image} className="mt-3 rounded-2xl max-w-full h-auto" alt="user image content" />}
+                    {tweet.image && <img src={tweet.image} className="mt-3 rounded-2xl max-w-full h-auto" alt='user image content' />}
                     <div className="flex justify-between mt-4 text-gray-500">
                         <div className="flex items-center cursor-pointer hover:text-blue-400">
                             <FontAwesomeIcon icon={faComment} onClick={() => handleAction('comment')} />

src/Components/TwitterForm/index.jsx

@@ -3,6 +3,8 @@ import { faCalendarAlt, faChartBar, faFilm, faImage, faMapMarked, faSmile } from
 import { faMapMarkedAlt } from "@fortawesome/free-solid-svg-icons/faMapMarkedAlt";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useRef } from 'react';
+import PropTypes from 'prop-types'; // ES6
+
 
 export function TwitterForm ({onTweet}){
 const textAreaRef = useRef ()
@@ -38,4 +40,10 @@ const textAreaRef = useRef ()
         </div>
 
     )
+}
+
+
+TwitterForm.PropTypes = {
+    onTweet: PropTypes.func
+
 }

src/utils/generateImages.js

@@ -2,9 +2,9 @@ import CryptoJS from "crypto-js";
 
 export const getAvatar = (email) => {
     const hash = CryptoJS.MD5(email.trim().toLowerCase())
-    return `https://www.gravatar.com/avatar/${ hash }?s=40&d=identicon`;
+    return `https://www.gravatar.com/avatar/${hash}?s=40&d=identicon`;
 }
 
 export const getRandomImage = () => {
-    return 'https://picsum.photos/600/400?random=${Math.random()}'
-}
+    return `https://picsum.photos/600/400?random=${Math.random()}`
+}