ironhack-labs · Cgreig24 · Oct 10, 2024
diff --git a/index.html b/index.html
@@ -5,6 +5,12 @@
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>LAB | React Tweets</title>
+    <link
+  rel="stylesheet"
+  href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"
+  integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p"
+  crossorigin="anonymous"
+/>
   </head>
   <body>
     <div id="root"></div>

diff --git a/src/App.jsx b/src/App.jsx
@@ -38,9 +38,12 @@ const tweetsArray = [
 ];
 
 function App() {
+ // const [{user, timestamp, message}] = tweetsArray
   return (
     <div className="App">
-      <Tweet />
+      <Tweet tweet={tweetsArray[0]} />
+      <Tweet tweet={tweetsArray[1]} />
+      <Tweet tweet={tweetsArray[2]} />
     </div>
   );
 }

diff --git a/src/components/Actions.jsx b/src/components/Actions.jsx
@@ -0,0 +1,14 @@
+function Actions() {
+
+return(
+<div className="actions">
+          {/* Font Awesome icons */}
+          <i className="far fa-comment" data-testid="comment-icon"></i>
+          <i className="fas fa-retweet" data-testid="retweet-icon"></i>
+          <i className="far fa-heart" data-testid="heart-icon"></i>
+          <i className="fas fa-share" data-testid="share-icon"></i>
+        </div>
+)
+}
+
+export default Actions;
diff --git a/src/components/Message.jsx b/src/components/Message.jsx
@@ -0,0 +1,9 @@
+function Message (props) {
+    return(
+        <p className="message">{props.message}
+
+       </p>
+    )
+}
+
+export default Message;
diff --git a/src/components/ProfileImage.jsx b/src/components/ProfileImage.jsx
@@ -0,0 +1,8 @@
+
+function ProfileImage(props) {
+    return(
+<img src={props.image} className="profile" alt="profile" />
+)
+}
+
+export default ProfileImage
diff --git a/src/components/Timestamp.jsx b/src/components/Timestamp.jsx
@@ -0,0 +1,7 @@
+
+function Timestamp(props) {
+
+    return(<span className="timestamp">{props.time}</span>)
+}
+
+export default Timestamp;
diff --git a/src/components/Tweet.jsx b/src/components/Tweet.jsx
@@ -1,34 +1,23 @@
-function Tweet() {
+import ProfileImage from "./ProfileImage";
+import User from "./User";
+import Timestamp from "./Timestamp"
+import Message from "./Message"
+import Actions from "./Actions"
+
+function Tweet(props) {
   return (
     <div className="tweet">
-      <img
-        src="https://education-team-2020.s3.eu-west-1.amazonaws.com/web-dev/ih_logo.jpeg"
-        className="profile"
-        alt="profile"
-      />
-
+
+       <ProfileImage image={props.tweet.user.image}/>
+
       <div className="body">
         <div className="top">
-          <span className="user">
-            <span className="name">Ironhack</span>
-            <span className="handle">@ironhack</span>
-          </span>
-
-          <span className="timestamp">Nov 30, 2020</span>
+        <User name={props.tweet.user.name} handle={props.tweet.user.handle} />
+        <Timestamp time={props.tweet.timestamp} />
         </div>
 
-        <p className="message">
-          On December 7th, we will be hosting a #webinar that will introduce you
-          to #SQL! Are you ready? 🚀
-        </p>
-
-        <div className="actions">
-          {/* Font Awesome icons */}
-          <i className="far fa-comment" data-testid="comment-icon"></i>
-          <i className="fas fa-retweet" data-testid="retweet-icon"></i>
-          <i className="far fa-heart" data-testid="heart-icon"></i>
-          <i className="fas fa-share" data-testid="share-icon"></i>
-        </div>
+        <Message message={props.tweet.message} />
+        <Actions />
       </div>
 
       <i className="fas fa-ellipsis-h"></i>

diff --git a/src/components/User.jsx b/src/components/User.jsx
@@ -0,0 +1,11 @@
+function user (props){
+
+return(
+<span className="user">
+            <span className="name">{props.name}</span>
+            <span className="handle">{props.handle}</span>
+          </span>
+)
+}
+
+export default user;