diff --git a/index.html b/index.html index f9c96db7c..d92b59570 100644 --- a/index.html +++ b/index.html @@ -4,6 +4,12 @@ + LAB | React Tweets diff --git a/src/App.jsx b/src/App.jsx index 5f86116c4..c6cd58d50 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -40,7 +40,10 @@ const tweetsArray = [ function App() { return (
- + {tweetsArray.map((tweet, index) => ( + + ))} + ;
); } diff --git a/src/components/Actions.jsx b/src/components/Actions.jsx new file mode 100644 index 000000000..a7bcea777 --- /dev/null +++ b/src/components/Actions.jsx @@ -0,0 +1,13 @@ +function Actions() { + return ( +
+ {/* Font Awesome icons */} + + + + +
+ ); +} + +export default Actions; diff --git a/src/components/Message.jsx b/src/components/Message.jsx new file mode 100644 index 000000000..08a08e4a2 --- /dev/null +++ b/src/components/Message.jsx @@ -0,0 +1,5 @@ +function Message({ message }) { + return

{message}

; +} + +export default Message; diff --git a/src/components/ProfileImage.jsx b/src/components/ProfileImage.jsx new file mode 100644 index 000000000..d3431c86b --- /dev/null +++ b/src/components/ProfileImage.jsx @@ -0,0 +1,5 @@ +function ProfileImage({ image }) { + return profile; +} + +export default ProfileImage; diff --git a/src/components/Timestamp.jsx b/src/components/Timestamp.jsx new file mode 100644 index 000000000..20ceccb09 --- /dev/null +++ b/src/components/Timestamp.jsx @@ -0,0 +1,5 @@ +function Timestamp({ time }) { + return {time}; +} + +export default Timestamp; diff --git a/src/components/Tweet.jsx b/src/components/Tweet.jsx index 1700d3d15..2745b37dc 100644 --- a/src/components/Tweet.jsx +++ b/src/components/Tweet.jsx @@ -1,36 +1,24 @@ -function Tweet() { +import ProfileImage from "./ProfileImage"; +import User from "./User"; +import Timestamp from "./Timestamp"; +import Message from "./Message"; +import Actions from "./Actions"; + +function Tweet({ tweet }) { + const { user, timestamp, message } = tweet; + return (
- profile - +
- - Ironhack - @ironhack - - - Nov 30, 2020 + +
-

- On December 7th, we will be hosting a #webinar that will introduce you - to #SQL! Are you ready? 🚀 -

- -
- {/* Font Awesome icons */} - - - - -
+ +
-
); diff --git a/src/components/User.jsx b/src/components/User.jsx new file mode 100644 index 000000000..adb7628aa --- /dev/null +++ b/src/components/User.jsx @@ -0,0 +1,10 @@ +function User({ name, handle }) { + return ( + + {name} + @{handle} + + ); +} + +export default User;