├── src ├── styles │ ├── content.scss │ ├── cards.scss │ ├── sidebar.scss │ ├── comment.scss │ ├── menu.scss │ ├── cardMenu.scss │ ├── story.scss │ ├── stories.scss │ ├── index.scss │ ├── suggestions.scss │ ├── footer.scss │ ├── profileIcon.scss │ ├── App.scss │ ├── profile.scss │ ├── _variables.scss │ ├── navigation.scss │ └── card.scss ├── images │ ├── profile.jpg │ ├── searchIcon.png │ ├── instagramLogo.png │ ├── instagramWhite.png │ ├── inbox.svg │ ├── home.svg │ ├── bookmark.svg │ ├── cardButton.svg │ ├── comments.svg │ ├── explore.svg │ └── notifications.svg ├── index.js ├── components │ ├── Comment.js │ ├── App.js │ ├── Story.js │ ├── Footer.js │ ├── Navigation.js │ ├── CardMenu.js │ ├── Sidebar.js │ ├── Stories.js │ ├── Menu.js │ ├── ProfileIcon.js │ ├── Profile.js │ ├── Suggestions.js │ ├── Card.js │ └── Cards.js └── data │ └── users.js ├── .github └── FUNDING.yml ├── public ├── robots.txt ├── favicon.ico ├── logo192.png ├── logo512.png ├── manifest.json └── index.html ├── README.md ├── .gitignore └── package.json /src/styles/content.scss: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | github: [alekspopovic] 2 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alekspopovic/instagram-in-react/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alekspopovic/instagram-in-react/HEAD/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alekspopovic/instagram-in-react/HEAD/public/logo512.png -------------------------------------------------------------------------------- /src/images/profile.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alekspopovic/instagram-in-react/HEAD/src/images/profile.jpg -------------------------------------------------------------------------------- /src/images/searchIcon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alekspopovic/instagram-in-react/HEAD/src/images/searchIcon.png -------------------------------------------------------------------------------- /src/images/instagramLogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alekspopovic/instagram-in-react/HEAD/src/images/instagramLogo.png -------------------------------------------------------------------------------- /src/images/instagramWhite.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alekspopovic/instagram-in-react/HEAD/src/images/instagramWhite.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # instagram-in-react 2 | Source code for creating Instagram home page in React. Used in my Youtube tutorial found here: https://youtu.be/6sFTbTAVn5M 3 | -------------------------------------------------------------------------------- /src/styles/cards.scss: -------------------------------------------------------------------------------- 1 | .cards { 2 | width: 600px; 3 | } 4 | 5 | @media only screen and (max-width: 600px) { 6 | .cards { 7 | width: 100%; 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /src/styles/sidebar.scss: -------------------------------------------------------------------------------- 1 | .sidebar { 2 | width: 320px; 3 | padding: 7em 2em 0 2em; 4 | } 5 | 6 | @media only screen and (max-width: 1024px) { 7 | .sidebar { 8 | display: none; 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import "./styles/index.scss"; 4 | import App from "./components/App"; 5 | 6 | ReactDOM.render( 7 | 8 | 9 | , 10 | document.getElementById("root") 11 | ); 12 | -------------------------------------------------------------------------------- /src/styles/comment.scss: -------------------------------------------------------------------------------- 1 | @import "/variables"; 2 | 3 | .commentContainer { 4 | display: flex; 5 | padding-left: 1.5em; 6 | font-size: 0.75em; 7 | margin-bottom: 0.4em; 8 | 9 | .accountName { 10 | font-weight: 600; 11 | } 12 | 13 | .comment { 14 | margin-left: 0.5em; 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /src/styles/menu.scss: -------------------------------------------------------------------------------- 1 | .menu { 2 | display: flex; 3 | padding-right: 1.5em; 4 | 5 | .icon { 6 | margin-right: 1.5em; 7 | width: 23px; 8 | height: 23px; 9 | 10 | &:hover { 11 | cursor: pointer; 12 | } 13 | } 14 | 15 | .profileIcon { 16 | margin-top: -3px; 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /src/images/inbox.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/images/home.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/images/bookmark.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/images/cardButton.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/styles/cardMenu.scss: -------------------------------------------------------------------------------- 1 | .cardMenu { 2 | display: flex; 3 | justify-content: space-between; 4 | margin: 1em 0; 5 | 6 | .interactions { 7 | display: flex; 8 | padding-left: 1em; 9 | } 10 | 11 | .icon { 12 | margin-right: 1em; 13 | width: 23px; 14 | height: 23px; 15 | 16 | &:hover { 17 | cursor: pointer; 18 | } 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /src/components/Comment.js: -------------------------------------------------------------------------------- 1 | import "../styles/comment.scss"; 2 | 3 | function Comment(props) { 4 | const { accountName, comment } = props; 5 | 6 | return ( 7 |
8 |
{accountName}
9 |
{comment}
10 |
11 | ); 12 | } 13 | 14 | export default Comment; 15 | -------------------------------------------------------------------------------- /src/styles/story.scss: -------------------------------------------------------------------------------- 1 | @import "/variables"; 2 | 3 | .story { 4 | display: flex; 5 | flex-direction: column; 6 | align-items: center; 7 | margin: 1em 0.5em; 8 | 9 | &:first-child { 10 | margin-left: 1em; 11 | } 12 | 13 | &:last-child { 14 | margin-right: 1em; 15 | } 16 | 17 | .accountName { 18 | font-size: 0.65em; 19 | margin: 0.4em; 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /src/styles/stories.scss: -------------------------------------------------------------------------------- 1 | @import "/variables"; 2 | 3 | .stories { 4 | display: flex; 5 | align-content: center; 6 | background-color: $background-white; 7 | border: 1px solid $border-color-grey; 8 | border-radius: 3px; 9 | margin: 2em 0 1.5em 0; 10 | height: 7.4em; 11 | overflow: hidden; 12 | } 13 | 14 | @media only screen and (max-width: 640px) { 15 | .stories { 16 | margin: 0 0 0.5em 0; 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /src/styles/index.scss: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /src/images/comments.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/App.js: -------------------------------------------------------------------------------- 1 | import "../styles/App.scss"; 2 | import Navigation from "./Navigation"; 3 | import Cards from "./Cards"; 4 | import Sidebar from "./Sidebar"; 5 | 6 | function App() { 7 | return ( 8 |
9 | 10 |
11 |
12 | 13 | 14 |
15 |
16 |
17 | ); 18 | } 19 | 20 | export default App; 21 | -------------------------------------------------------------------------------- /src/images/explore.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/styles/suggestions.scss: -------------------------------------------------------------------------------- 1 | @import "/variables"; 2 | 3 | .suggestions { 4 | margin-top: 1.25em; 5 | 6 | .titleContainer { 7 | display: flex; 8 | justify-content: space-between; 9 | font-size: 0.8em; 10 | font-weight: 500; 11 | color: $font-color-secondary; 12 | margin-bottom: 1.25em; 13 | 14 | .title { 15 | min-width: 200px; 16 | } 17 | 18 | a { 19 | width: 100%; 20 | text-align: right; 21 | color: black; 22 | } 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /src/styles/footer.scss: -------------------------------------------------------------------------------- 1 | @import "/variables"; 2 | 3 | .footer { 4 | color: $font-color-footer; 5 | font-size: 0.7em; 6 | margin-top: 2em; 7 | 8 | .links { 9 | display: flex; 10 | flex-wrap: wrap; 11 | margin: 0 0 2em 0; 12 | padding: 0; 13 | list-style: none; 14 | 15 | li { 16 | &:after { 17 | content: "\2022"; 18 | margin: 0 0.25em 0 0.25em; 19 | } 20 | 21 | &:last-child:after { 22 | content: ""; 23 | } 24 | } 25 | } 26 | 27 | .copyRight { 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /src/components/Story.js: -------------------------------------------------------------------------------- 1 | import "../styles/story.scss"; 2 | import ProfileIcon from "./ProfileIcon"; 3 | import users from "../data/users"; 4 | 5 | function Story() { 6 | let accountName = users[Math.floor(Math.random() * users.length)].username; 7 | 8 | if (accountName.length > 10) { 9 | accountName = accountName.substring(0, 10) + "..."; 10 | } 11 | 12 | return ( 13 |
14 | 15 | {accountName} 16 |
17 | ); 18 | } 19 | 20 | export default Story; 21 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /src/images/notifications.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/Footer.js: -------------------------------------------------------------------------------- 1 | import "../styles/footer.scss"; 2 | 3 | function Footer() { 4 | return ( 5 |
6 | 19 |
@ 2020 INSTAGRAM FROM FACEBOOK
20 |
21 | ); 22 | } 23 | 24 | export default Footer; 25 | -------------------------------------------------------------------------------- /src/components/Navigation.js: -------------------------------------------------------------------------------- 1 | import "../styles/navigation.scss"; 2 | import Menu from "./Menu"; 3 | import logo from "../images/instagramLogo.png"; 4 | import searchIcon from "../images/searchIcon.png"; 5 | 6 | function Navigation() { 7 | return ( 8 |
9 |
10 | instagram logo 11 |
12 | search icon 13 | Search 14 |
15 | 16 |
17 |
18 | ); 19 | } 20 | 21 | export default Navigation; 22 | -------------------------------------------------------------------------------- /src/styles/profileIcon.scss: -------------------------------------------------------------------------------- 1 | @import "/variables"; 2 | 3 | .storyBorder { 4 | padding: 2px; 5 | background: linear-gradient( 6 | 200deg, 7 | $gradient-one 25%, 8 | $gradient-two 50%, 9 | $gradient-three 75%, 10 | $gradient-four 100% 11 | ); 12 | border-radius: 50%; 13 | } 14 | 15 | .profileIcon { 16 | border-radius: 50%; 17 | border: 2px solid $background-white; 18 | display: block; 19 | 20 | &:hover { 21 | cursor: pointer; 22 | } 23 | 24 | &.small { 25 | width: 25px; 26 | height: 25px; 27 | } 28 | 29 | &.medium { 30 | width: 35px; 31 | height: 35px; 32 | } 33 | 34 | &.big { 35 | width: 60px; 36 | height: 60px; 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /src/styles/App.scss: -------------------------------------------------------------------------------- 1 | @import "/variables"; 2 | 3 | body { 4 | background-color: $background-white; 5 | font-family: $font; 6 | font-size: 16px; 7 | margin: 0; 8 | padding: 0; 9 | min-width: fit-content; 10 | } 11 | 12 | main { 13 | background-color: $background-grey; 14 | margin-top: 60px; 15 | 16 | .container { 17 | display: flex; 18 | justify-content: left; 19 | margin: 0 auto; 20 | max-width: 1000px; 21 | } 22 | } 23 | 24 | a { 25 | text-decoration: none; 26 | color: $link-color; 27 | font-size: 0.9em; 28 | font-weight: 500; 29 | } 30 | 31 | @media only screen and (max-width: 1024px) { 32 | main .container { 33 | justify-content: center !important; 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /src/components/CardMenu.js: -------------------------------------------------------------------------------- 1 | import "../styles/cardMenu.scss"; 2 | import { ReactComponent as Inbox } from "../images/inbox.svg"; 3 | import { ReactComponent as Comments } from "../images/comments.svg"; 4 | import { ReactComponent as Notifications } from "../images/notifications.svg"; 5 | import { ReactComponent as Bookmark } from "../images/bookmark.svg"; 6 | 7 | function CardMenu() { 8 | return ( 9 |
10 |
11 | 12 | 13 | 14 |
15 | 16 |
17 | ); 18 | } 19 | 20 | export default CardMenu; 21 | -------------------------------------------------------------------------------- /src/components/Sidebar.js: -------------------------------------------------------------------------------- 1 | import "../styles/sidebar.scss"; 2 | import Sticky from "react-sticky-el"; 3 | import Profile from "./Profile"; 4 | import Suggestions from "./Suggestions"; 5 | import Footer from "./Footer"; 6 | import image from "../images/profile.jpg"; 7 | 8 | function Sidebar() { 9 | return ( 10 | 11 |
12 | 19 | 20 |
22 | 23 | ); 24 | } 25 | 26 | export default Sidebar; 27 | -------------------------------------------------------------------------------- /src/styles/profile.scss: -------------------------------------------------------------------------------- 1 | @import "/variables"; 2 | 3 | .profile { 4 | display: flex; 5 | align-items: center; 6 | font-size: 0.8em; 7 | margin-bottom: 0.85em; 8 | 9 | .textContainer { 10 | display: flex; 11 | flex-direction: column; 12 | margin-left: 1em; 13 | min-width: 180px; 14 | 15 | .accountName { 16 | font-weight: 500; 17 | margin-bottom: 5px; 18 | 19 | &:hover { 20 | cursor: pointer; 21 | text-decoration: underline; 22 | } 23 | } 24 | 25 | .caption { 26 | color: $font-color-secondary; 27 | 28 | &.small { 29 | font-size: 0.8em; 30 | } 31 | } 32 | } 33 | 34 | a { 35 | text-align: right; 36 | width: 100%; 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /src/components/Stories.js: -------------------------------------------------------------------------------- 1 | import "../styles/stories.scss"; 2 | import Story from "./Story"; 3 | import HorizontalScroll from "react-scroll-horizontal"; 4 | 5 | function Stories() { 6 | return ( 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | ); 28 | } 29 | 30 | export default Stories; 31 | -------------------------------------------------------------------------------- /src/components/Menu.js: -------------------------------------------------------------------------------- 1 | import "../styles/menu.scss"; 2 | import { ReactComponent as Home } from "../images/home.svg"; 3 | import { ReactComponent as Inbox } from "../images/inbox.svg"; 4 | import { ReactComponent as Explore } from "../images/explore.svg"; 5 | import { ReactComponent as Notifications } from "../images/notifications.svg"; 6 | import ProfileIcon from "./ProfileIcon"; 7 | import image from "../images/profile.jpg"; 8 | 9 | function Menu() { 10 | return ( 11 |
12 | 13 | 14 | 15 | 16 | 17 |
18 | ); 19 | } 20 | 21 | export default Menu; 22 | -------------------------------------------------------------------------------- /src/components/ProfileIcon.js: -------------------------------------------------------------------------------- 1 | import "../styles/profileIcon.scss"; 2 | 3 | function ProfileIcon(props) { 4 | const { iconSize, storyBorder, image } = props; 5 | 6 | function getRandomInt(min, max) { 7 | min = Math.ceil(min); 8 | max = Math.floor(max); 9 | return Math.floor(Math.random() * (max - min + 1)) + min; 10 | } 11 | 12 | let randomId = getRandomInt(1, 70); 13 | 14 | let profileImage = image 15 | ? image 16 | : `https://i.pravatar.cc/150?img=${randomId}`; 17 | 18 | return ( 19 |
20 | profile 25 |
26 | ); 27 | } 28 | 29 | export default ProfileIcon; 30 | -------------------------------------------------------------------------------- /src/styles/_variables.scss: -------------------------------------------------------------------------------- 1 | $background-white: #ffffff; 2 | $background-grey: #fafafa; 3 | $gradient-one: #da3394; 4 | $gradient-two: #e03c67; 5 | $gradient-three: #f3753b; 6 | $gradient-four: #f99b4a; 7 | $font-color-primary: #262626; 8 | $font-color-secondary: #8e8e8e; 9 | $font-color-footer: #c7c7c7; 10 | $border-color-grey: #dbdbdb; 11 | $border-color-grey-secondary: #efefef; 12 | $link-color: #0095f6; 13 | $link-color-secondary: #b3dffc; 14 | $font: "Montserrat", sans-serif; // instead of Proxima Nova 15 | 16 | // $background-white: #000000; 17 | // $background-grey: #080808; 18 | // $gradient-one: #da3394; 19 | // $gradient-two: #e03c67; 20 | // $gradient-three: #f3753b; 21 | // $gradient-four: #f99b4a; 22 | // $font-color-primary: #e2e2e2; 23 | // $font-color-secondary: #8e8e8e; 24 | // $font-color-footer: #2f2f2f; 25 | // $border-color-grey: #2e2e2e; 26 | // $border-color-grey-secondary: #111111; 27 | // $link-color: #0095f6; 28 | // $link-color-secondary: #b3dffc; 29 | -------------------------------------------------------------------------------- /src/components/Profile.js: -------------------------------------------------------------------------------- 1 | import "../styles/profile.scss"; 2 | import ProfileIcon from "./ProfileIcon"; 3 | import users from "../data/users"; 4 | 5 | function Profile(props) { 6 | const { 7 | username, 8 | caption, 9 | urlText, 10 | iconSize, 11 | captionSize, 12 | storyBorder, 13 | hideAccountName, 14 | image, 15 | } = props; 16 | 17 | let accountName = username 18 | ? username 19 | : users[Math.floor(Math.random() * users.length)].username; 20 | 21 | return ( 22 |
23 | 28 | {(accountName || caption) && !hideAccountName && ( 29 |
30 | {accountName} 31 | {caption} 32 |
33 | )} 34 | {urlText} 35 |
36 | ); 37 | } 38 | 39 | export default Profile; 40 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "instagram", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.11.5", 7 | "@testing-library/react": "^11.1.0", 8 | "@testing-library/user-event": "^12.1.10", 9 | "node-sass": "^4.14.1", 10 | "react": "^17.0.1", 11 | "react-dom": "^17.0.1", 12 | "react-scripts": "4.0.0", 13 | "react-scroll-horizontal": "^1.6.6", 14 | "react-sticky-el": "^2.0.5", 15 | "web-vitals": "^0.2.4" 16 | }, 17 | "scripts": { 18 | "start": "react-scripts start", 19 | "build": "react-scripts build", 20 | "test": "react-scripts test", 21 | "eject": "react-scripts eject" 22 | }, 23 | "eslintConfig": { 24 | "extends": [ 25 | "react-app", 26 | "react-app/jest" 27 | ] 28 | }, 29 | "browserslist": { 30 | "production": [ 31 | ">0.2%", 32 | "not dead", 33 | "not op_mini all" 34 | ], 35 | "development": [ 36 | "last 1 chrome version", 37 | "last 1 firefox version", 38 | "last 1 safari version" 39 | ] 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /src/styles/navigation.scss: -------------------------------------------------------------------------------- 1 | @import "/variables"; 2 | 3 | .navigation { 4 | position: fixed; 5 | top: 0; 6 | z-index: 2; 7 | background-color: $background-white; 8 | width: 100%; 9 | border-bottom: 1px solid $border-color-grey; 10 | 11 | .container { 12 | padding: 1em 0 0.9em 0; 13 | display: flex; 14 | align-content: center; 15 | justify-content: space-between; 16 | max-width: 1000px; 17 | margin: 0 auto; 18 | 19 | .logo { 20 | padding: 0 1em; 21 | width: 100px; 22 | 23 | &:hover { 24 | cursor: pointer; 25 | } 26 | } 27 | 28 | .search { 29 | border: 1px solid $border-color-grey; 30 | border-radius: 3px; 31 | background-color: $background-grey; 32 | min-width: 225px; 33 | display: flex; 34 | align-items: center; 35 | justify-content: center; 36 | 37 | .searchIcon { 38 | width: 10px; 39 | opacity: 0.4; 40 | margin-right: 0.3em; 41 | } 42 | 43 | .searchText { 44 | color: $font-color-secondary; 45 | font-size: 0.85em; 46 | font-weight: 300; 47 | } 48 | } 49 | } 50 | } 51 | 52 | @media only screen and (max-width: 500px) { 53 | .search { 54 | display: none !important; 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /src/components/Suggestions.js: -------------------------------------------------------------------------------- 1 | import "../styles/suggestions.scss"; 2 | import Profile from "./Profile"; 3 | 4 | function Suggestions() { 5 | return ( 6 |
7 |
8 |
Suggestions For You
9 | See All 10 |
11 | 12 | 19 | 25 | 31 | 38 | 44 |
45 | ); 46 | } 47 | 48 | export default Suggestions; 49 | -------------------------------------------------------------------------------- /src/components/Card.js: -------------------------------------------------------------------------------- 1 | import "../styles/card.scss"; 2 | import Profile from "./Profile"; 3 | import { ReactComponent as CardButton } from "../images/cardButton.svg"; 4 | import CardMenu from "./CardMenu"; 5 | import Comment from "./Comment"; 6 | 7 | function Card(props) { 8 | const { 9 | storyBorder, 10 | image, 11 | comments, 12 | likedByText, 13 | likedByNumber, 14 | hours, 15 | } = props; 16 | 17 | return ( 18 |
19 |
20 | 21 | 22 |
23 | card content 24 | 25 |
26 | 27 | 28 | Liked by {likedByText} and{" "} 29 | {likedByNumber} others 30 | 31 |
32 |
33 | {comments.map((comment) => { 34 | return ( 35 | 40 | ); 41 | })} 42 |
43 |
{hours} HOURS AGO
44 |
45 |
Add a comment...
46 |
Post
47 |
48 |
49 | ); 50 | } 51 | 52 | export default Card; 53 | -------------------------------------------------------------------------------- /src/styles/card.scss: -------------------------------------------------------------------------------- 1 | @import "/variables"; 2 | 3 | .card { 4 | border: 1px solid $border-color-grey; 5 | background-color: $background-white; 6 | margin-bottom: 3.5em; 7 | border-radius: 3px; 8 | 9 | header { 10 | display: flex; 11 | justify-content: space-between; 12 | align-items: center; 13 | padding: 0.75em; 14 | 15 | .profile { 16 | margin-bottom: 0; 17 | } 18 | 19 | .cardButton { 20 | height: 30px; 21 | 22 | &:hover { 23 | cursor: pointer; 24 | } 25 | } 26 | } 27 | 28 | .cardImage { 29 | width: 100%; 30 | display: block; 31 | } 32 | 33 | .likedBy { 34 | display: flex; 35 | padding-left: 1em; 36 | 37 | span { 38 | font-size: 0.75em; 39 | margin-left: 0.5em; 40 | padding-top: 0.5em; 41 | } 42 | } 43 | 44 | .comments { 45 | margin-bottom: 0.75em; 46 | } 47 | 48 | .timePosted { 49 | font-size: 0.6em; 50 | padding-left: 2em; 51 | padding-bottom: 1em; 52 | color: $font-color-secondary; 53 | border-bottom: 1px solid $border-color-grey-secondary; 54 | } 55 | 56 | .addComment { 57 | display: flex; 58 | justify-content: space-between; 59 | font-size: 0.85em; 60 | padding: 1.5em 1.25em; 61 | 62 | .commentText { 63 | color: $font-color-secondary; 64 | } 65 | 66 | .postText { 67 | color: $link-color-secondary; 68 | } 69 | } 70 | } 71 | 72 | @media only screen and (max-width: 640px) { 73 | .card { 74 | border: none; 75 | background-color: $background-grey; 76 | margin-bottom: 0.75em; 77 | 78 | .addComment { 79 | display: none; 80 | } 81 | 82 | .timePosted { 83 | border: none; 84 | } 85 | } 86 | } 87 | -------------------------------------------------------------------------------- /src/components/Cards.js: -------------------------------------------------------------------------------- 1 | import "../styles/cards.scss"; 2 | import Stories from "./Stories"; 3 | import Card from "./Card"; 4 | 5 | function Cards() { 6 | const commentsOne = [ 7 | { 8 | user: "raffagrassetti", 9 | text: "Woah dude, this is awesome! 🔥", 10 | id: 1, 11 | }, 12 | { 13 | user: "therealadamsavage", 14 | text: "Like!", 15 | id: 2, 16 | }, 17 | { 18 | user: "mapvault", 19 | text: "Niceeeee!", 20 | id: 3, 21 | }, 22 | ]; 23 | 24 | const commentsTwo = [ 25 | { 26 | user: "mapvault", 27 | text: "Amazing content, keep it up!", 28 | id: 4, 29 | }, 30 | ]; 31 | 32 | const commentsThree = [ 33 | { 34 | user: "dadatlacak", 35 | text: "Love this!", 36 | id: 5, 37 | }, 38 | ]; 39 | 40 | return ( 41 |
42 | 43 | 44 | 53 | 61 | 70 |
71 | ); 72 | } 73 | 74 | export default Cards; 75 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /src/data/users.js: -------------------------------------------------------------------------------- 1 | const users = [ 2 | { 3 | id: 1, 4 | name: "Leanne Graham", 5 | username: "Bret", 6 | }, 7 | { 8 | id: 2, 9 | name: "Ervin Howell", 10 | username: "Antonette", 11 | }, 12 | { 13 | id: 3, 14 | name: "Clementine Bauch", 15 | username: "Samantha", 16 | }, 17 | { 18 | id: 4, 19 | name: "Patricia Lebsack", 20 | username: "Karianne", 21 | }, 22 | { 23 | id: 5, 24 | name: "Chelsey Dietrich", 25 | username: "Kamren", 26 | }, 27 | { 28 | id: 6, 29 | name: "Mrs. Dennis Schulist", 30 | username: "Leopoldo_Corkery", 31 | }, 32 | { 33 | id: 7, 34 | name: "Kurtis Weissnat", 35 | username: "Elwyn.Skiles", 36 | }, 37 | { 38 | id: 8, 39 | name: "Nicholas Runolfsdottir V", 40 | username: "Maxime_Nienow", 41 | }, 42 | { 43 | id: 9, 44 | name: "Glenna Reichert", 45 | username: "Delphine", 46 | }, 47 | { 48 | id: 10, 49 | name: "Clementina DuBuque", 50 | username: "Moriah.Stanton", 51 | }, 52 | { 53 | id: 11, 54 | name: "Donald Duck", 55 | username: "donald.duck", 56 | }, 57 | { 58 | id: 12, 59 | name: "Adam Savage", 60 | username: "adam.is.savage", 61 | }, 62 | { 63 | id: 13, 64 | name: "Daniel Redhill", 65 | username: "harry.trotter", 66 | }, 67 | { 68 | id: 14, 69 | name: "Indiana Jones", 70 | username: "Indy Shot First", 71 | }, 72 | { 73 | id: 15, 74 | name: "Claudia Beckam", 75 | username: "handball2020", 76 | }, 77 | { 78 | id: 16, 79 | name: "Fabio Edwards", 80 | username: "EastCoastLion", 81 | }, 82 | { 83 | id: 17, 84 | name: "Jonah Roads", 85 | username: "AlwaysTheFunnyGuy", 86 | }, 87 | { 88 | id: 18, 89 | name: "Damian Knight", 90 | username: "The Rook", 91 | }, 92 | { 93 | id: 19, 94 | name: "Rowan Atkinson", 95 | username: "Mr Bean", 96 | }, 97 | { 98 | id: 20, 99 | name: "Bugs Bunny", 100 | username: "Albuquerque", 101 | }, 102 | ]; 103 | 104 | export default users; 105 | --------------------------------------------------------------------------------