codeableorg · github-classroom · Feb 19, 2021 · Feb 19, 2021 · Feb 19, 2021 · Feb 19, 2021
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,12 +3,16 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^1.2.34",
+    "@fortawesome/free-solid-svg-icons": "^5.15.2",
+    "@fortawesome/react-fontawesome": "^0.1.14",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-scripts": "4.0.2",
+    "remixicon": "^2.5.0",
     "web-vitals": "^1.0.1"
   },
   "scripts": {

diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -2,42 +2,11 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
     <title>React App</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
   </body>
 </html>
diff --git a/public/logo192.png b/public/logo192.png
diff --git a/public/logo512.png b/public/logo512.png
diff --git a/public/manifest.json b/public/manifest.json
diff --git a/public/robots.txt b/public/robots.txt
diff --git a/src/App.js b/src/App.js
@@ -1,25 +1,34 @@
-import logo from './logo.svg';
-import './App.css';
+import React from "react";
+import Header from "./components/Header";
+import Link from "./components/Link";
+import SearchBar from "./components/SearchBar";
+import Main from "./components/Main";
+/* Fuente */
+import Card from "./components/Card";
+import Container from "./components/Container";
+/* import Main from "./components/Main"; */
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faBell, faCommentDots, faUser } from '@fortawesome/free-solid-svg-icons'
 
-function App() {
+const App = () => {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
+    <>
+      <Header className="header" >
+        <div className="header__nav">
+          <Link>Inicio</Link>
+          <Link>Hoy</Link>
+          <Link>Siguiendo</Link>
+        </div>
+        <SearchBar/>
+        <div className="header__notices">
+          <FontAwesomeIcon icon={faBell} />
+          <FontAwesomeIcon icon={faCommentDots} />
+          <FontAwesomeIcon icon={faUser} />
+        </div>
+      </Header>
+      <Main />   
+    </>
   );
-}
+};
 
 export default App;
diff --git a/src/App.test.js b/src/App.test.js
diff --git a/src/components/Card.js b/src/components/Card.js
@@ -0,0 +1,15 @@
+import styles from "./../stylesheets/Card.css"
+
+const Card = ({className, description, title, size, src,...props}) => {
+  const sizeClassName = size ? "card--large" : "";
+  return (
+    <div className={`card ${className} ${sizeClassName}`}>
+      <div className='card__gradient'/>
+      <img src={src} className="card__img"/>
+      <p className='card__description'>{description}</p>
+      <h2 className='card__title'>{title}</h2>
+    </div>
+  );
+};
+
+export default Card;
diff --git a/src/components/Container.js b/src/components/Container.js
@@ -0,0 +1,15 @@
+import React from "react";
+import styles from "./../stylesheets/Container.css"
+
+export default function Container({title, children, ...props}) {
+  return (
+    <div className="container__wrapper">
+      <div className="container">
+        <h2 className="container__title">{title}</h2>
+        <div className="container__cards">
+          {children}
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/src/components/Header.js b/src/components/Header.js
@@ -0,0 +1,12 @@
+import "../stylesheets/Header.css";
+import 'remixicon/fonts/remixicon.css';
+
+const Header = ({className,children}) => {
+  return (
+    <header className={className}>
+      {children}
+    </header>
+  );
+};
+
+export default Header;
diff --git a/src/components/Link.js b/src/components/Link.js
@@ -0,0 +1,10 @@
+import React from "react";
+import "../stylesheets/Link.css"
+
+export default function Link({href, children, ...props}) {
+  return (
+    <a className={`link`} href={href}>
+      {children}
+    </a>
+  )
+}
diff --git a/src/components/Main.js b/src/components/Main.js
@@ -0,0 +1,54 @@
+import styles from "./../stylesheets/main.css"
+import Container from "./Container";
+import Card from "./Card";
+import { STORE } from "../store";
+
+function dateTitle(date){
+  var options = { year: 'numeric', month: 'long', day: 'numeric' };
+  let [a,m,d]= date.split("-");
+  let dateArticle = new Date(a,m-1,d);
+  return dateArticle.toLocaleDateString("es-ES", options)
+}
+
+const Main = () => {
+  let dateTitle1 = '2021-02-18';
+  let dateTitle2 = '2021-02-17';
+  const title1 = dateTitle(dateTitle1); 
+  const title2 = dateTitle(dateTitle1); 
+
+
+  return (
+    <main className="main">
+      <Container title={title1}>
+        {STORE.map((article) => {
+          if (dateTitle1 == article.date){
+            return <Card description={article.description}
+            title = {article.title}
+            src = {article.img_url}
+            size ={article.size}
+            key = {article.title}
+           /> 
+          }
+        })}
+      </Container>
+      <Container title={title2}>
+        {STORE.map((article) => {
+          let [a,m,d]= article.date.split("-");
+          let dateArticle = new Date(a,m-1,d);
+          var options = { year: 'numeric', month: 'long', day: 'numeric' };
+          if (dateTitle2 == article.date){
+            return <Card description={article.description}
+            title = {article.title}
+            src = {article.img_url}
+            size ={article.size}
+            key = {article.title}
+            /> 
+          }
+
+        })}
+      </Container>
+    </main>
+  );
+};
+
+export default Main;
diff --git a/src/components/SearchBar.js b/src/components/SearchBar.js
@@ -0,0 +1,12 @@
+import "../stylesheets/SearchBar.css";
+
+const SearchBar = () => {
+  return (
+    <div className="searchbar">
+      <i className="ri-search-line"></i>
+      <input placeholder="Buscar" />
+    </div>
+  );
+};
+
+export default SearchBar;
diff --git a/src/index.css b/src/index.css
@@ -1,10 +1,28 @@
+:root {
+  --background-body: #FFFFFF;
+  --background-header: #FFFFFF;
+  --background-main: #E5E5E5;
+  --background-search:#EFEFEF;
+  --button-background-black: #111111;
+  --color-white: #FFFFFF;
+  --font-dark: #000000;
+  --font-dark-gray: #333333;
+}
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
 body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  background-color: var(--background-body);
 }
 
 code {

diff --git a/src/index.js b/src/index.js
@@ -2,7 +2,6 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
-import reportWebVitals from './reportWebVitals';
 
 ReactDOM.render(
   <React.StrictMode>
@@ -11,7 +10,3 @@ ReactDOM.render(
   document.getElementById('root')
 );
 
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();
diff --git a/src/logo.svg b/src/logo.svg
diff --git a/src/store.js b/src/store.js
@@ -0,0 +1,53 @@
+const STORE = [
+  {
+    title: 'Para dias más productivos',
+    description: 'Agendas y bullet journals',
+    date: '2021-02-18',
+    img_url: 'https://res.cloudinary.com/robcar/image/upload/v1613786388/image_7_teaj7e.png',
+    size: '',
+  },
+  {
+    title: 'Para IOS',
+    description: 'Intereses, el nuevo Widget de Pinterest',
+    date: '2021-02-18',
+    img_url: 'https://res.cloudinary.com/robcar/image/upload/v1613786730/image_2_fhq6jo.png',
+    size: '',
+  },
+  {
+    title: 'Gafas de Sol',
+    description: 'Un accesorio que no puede faltar en tu look',
+    date: '2021-02-18',
+    img_url: 'https://res.cloudinary.com/robcar/image/upload/v1613786735/image_1_cyn7va.png',
+    size: 'large',
+  },
+  {
+    title: 'Un viaje por la arquitectura mexicana',
+    description: 'Estilo colonial y moderno',
+    date: '2021-02-17',
+    img_url: 'https://res.cloudinary.com/robcar/image/upload/v1613786974/torres_4.png',
+    size: '',
+  },
+  {
+    title: 'Espejos con mucho estilo para tu casa',
+    description: 'Ideas para decorar',
+    date: '2021-02-17',
+    img_url: 'https://res.cloudinary.com/robcar/image/upload/v1613787059/decorar_5.png',
+    size: '',
+  },
+  {
+    title: 'Cómo utilizarla para un mundo mejor',
+    description: 'Inteligencia Artificial',
+    date: '2021-02-17',
+    img_url: 'https://res.cloudinary.com/robcar/image/upload/v1613787090/ia_6.png',
+    size: '',
+  },
+  {
+    title: 'Por dias más productivos',
+    description: 'Agendas y bullet journals',
+    date: '2021-02-17',
+    img_url: 'https://res.cloudinary.com/robcar/image/upload/v1613787095/agenda_7.png',
+    size: '',
+  },
+]
+
+export { STORE };