added data to cards

.eslintcache

@@ -1 +1 @@
-[{"/home/yusuf/Programming/React/homepage/src/index.js":"1","/home/yusuf/Programming/React/homepage/src/App.js":"2","/home/yusuf/Programming/React/homepage/src/reportWebVitals.js":"3","/home/yusuf/Programming/React/homepage/src/components/time/time-component.jsx":"4","/home/yusuf/Programming/React/homepage/src/components/fetch weather/weather-fetch.jsx":"5","/home/yusuf/Programming/React/homepage/src/components/card/card-component.jsx":"6"},{"size":500,"mtime":1611166245620,"results":"7","hashOfConfig":"8"},{"size":559,"mtime":1611234006423,"results":"9","hashOfConfig":"8"},{"size":362,"mtime":1611166245620,"results":"10","hashOfConfig":"8"},{"size":496,"mtime":1611233470447,"results":"11","hashOfConfig":"8"},{"size":993,"mtime":1611233413913,"results":"12","hashOfConfig":"8"},{"size":261,"mtime":1611234119493,"results":"13","hashOfConfig":"8"},{"filePath":"14","messages":"15","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"16"},"p1t955",{"filePath":"17","messages":"18","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"19","messages":"20","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"16"},{"filePath":"21","messages":"22","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"23","messages":"24","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"25","messages":"26","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/home/yusuf/Programming/React/homepage/src/index.js",[],["27","28"],"/home/yusuf/Programming/React/homepage/src/App.js",[],"/home/yusuf/Programming/React/homepage/src/reportWebVitals.js",[],"/home/yusuf/Programming/React/homepage/src/components/time/time-component.jsx",[],"/home/yusuf/Programming/React/homepage/src/components/fetch weather/weather-fetch.jsx",[],"/home/yusuf/Programming/React/homepage/src/components/card/card-component.jsx",[],{"ruleId":"29","replacedBy":"30"},{"ruleId":"31","replacedBy":"32"},"no-native-reassign",["33"],"no-negated-in-lhs",["34"],"no-global-assign","no-unsafe-negation"]
+[{"/home/yusuf/Programming/React/homepage/src/index.js":"1","/home/yusuf/Programming/React/homepage/src/App.js":"2","/home/yusuf/Programming/React/homepage/src/reportWebVitals.js":"3","/home/yusuf/Programming/React/homepage/src/components/time/time-component.jsx":"4","/home/yusuf/Programming/React/homepage/src/components/fetch weather/weather-fetch.jsx":"5","/home/yusuf/Programming/React/homepage/src/components/card/card-component.jsx":"6","/home/yusuf/Programming/React/homepage/src/data/card1.js":"7","/home/yusuf/Programming/React/homepage/src/data/card2.js":"8"},{"size":500,"mtime":1611166245620,"results":"9","hashOfConfig":"10"},{"size":675,"mtime":1611317556333,"results":"11","hashOfConfig":"10"},{"size":362,"mtime":1611166245620,"results":"12","hashOfConfig":"10"},{"size":496,"mtime":1611233470447,"results":"13","hashOfConfig":"10"},{"size":993,"mtime":1611233413913,"results":"14","hashOfConfig":"10"},{"size":242,"mtime":1611317509940,"results":"15","hashOfConfig":"10"},{"size":525,"mtime":1611317530510,"results":"16","hashOfConfig":"10"},{"size":282,"mtime":1611315056757,"results":"17","hashOfConfig":"10"},{"filePath":"18","messages":"19","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"20"},"p1t955",{"filePath":"21","messages":"22","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"23","messages":"24","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"20"},{"filePath":"25","messages":"26","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"20"},{"filePath":"27","messages":"28","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"20"},{"filePath":"29","messages":"30","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"31","messages":"32","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"33","messages":"34","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"20"},"/home/yusuf/Programming/React/homepage/src/index.js",[],["35","36"],"/home/yusuf/Programming/React/homepage/src/App.js",[],"/home/yusuf/Programming/React/homepage/src/reportWebVitals.js",[],"/home/yusuf/Programming/React/homepage/src/components/time/time-component.jsx",[],"/home/yusuf/Programming/React/homepage/src/components/fetch weather/weather-fetch.jsx",[],"/home/yusuf/Programming/React/homepage/src/components/card/card-component.jsx",[],"/home/yusuf/Programming/React/homepage/src/data/card1.js",[],"/home/yusuf/Programming/React/homepage/src/data/card2.js",[],{"ruleId":"37","replacedBy":"38"},{"ruleId":"39","replacedBy":"40"},"no-native-reassign",["41"],"no-negated-in-lhs",["42"],"no-global-assign","no-unsafe-negation"]

src/App.css

@@ -2,3 +2,8 @@ body {
   background-color: #181a1b;
   color: white;
 }
+
+.Cards {
+  display: flex;
+  justify-content: center;
+}

src/App.js

@@ -3,6 +3,8 @@ import React, { Component } from "react";
 import Time from "./components/time/time-component";
 import Forecast from "./components/fetch weather/weather-fetch";
 import Card from "./components/card/card-component";
+import { cards } from "./data/card1";
+import { card2 } from "./data/card2";
 
 class App extends Component {
   constructor() {
@@ -10,14 +12,16 @@ class App extends Component {
     this.state = {};
   }
   render() {
-    const card1 = ["deneme", "deneme2"];
     return (
       <div className="App">
         <h1>
           <Time />
         </h1>
         <Forecast />
-        <Card list={card1} />
+        <div className="Cards">
+          <Card list={cards} />
+          <Card list={card2} />
+        </div>
       </div>
     );
   }

src/components/card/card-component.jsx

@@ -2,13 +2,13 @@ import "./card-style.scss";
 
 const Card = (props) => {
   return (
-    <div className="card">
+    <ul className="card">
-      <ul className="list">
+      {props.list.map((li) => (
-        {props.list.map((li) => (
+        <li key={li} className="text">
-          <li className="text">{li}</li>
+          {li}
-        ))}
+        </li>
-      </ul>
+      ))}
-    </div>
+    </ul>
   );
 };
 

src/components/card/card-style.scss

@@ -1,22 +1,29 @@
+.title {
+  text-align: center;
+}
+
 .card {
-  display: flex;
+  margin-left: 20px;
-  align-items: center;
+  width: 200px;
-  justify-content: center;
+  height: 260px;
-  margin-bottom: 250px;
+  background-color: #242f34;
+  border: 1px solid grey;
+  border-radius: 5px;
+  padding: 10px;
 
-  .list {
+  .text {
-    margin-left: 40px;
+    text-align: center;
-    width: 200px;
+    list-style: none;
-    height: 230px;
+    line-height: 30px;
-    background-color: #242f34;
+  }
-    border: 1px solid grey;
-    border-radius: 5px;
-    padding: 20px;
 
-    .text {
+  a:link {
-      text-align: center;
+    color: white;
-      list-style: none;
+  } /* unvisited link */
-      line-height: 30px;
+  a:visited {
-    }
+    color: white;
+  } /* visited link */
+  a:active {
+    color: white;
   }
 }

src/components/time/time-component.scss

@@ -1,6 +1,6 @@
 .clock {
   text-align: center;
-  font-size: 90px;
+  font-size: 120px;
 }
 
 @media screen and (max-width: 700px) {

src/data/card1.js

@@ -0,0 +1,28 @@
+export const cards = [
+  <a href="https://www.protonmail.com/login" target="">
+    Protonmail
+  </a>,
+  <li>
+    <a href="https://www.youtube.com" target="">
+      Youtube
+    </a>
+  </li>,
+  <a href="https://studio.youtube.com" target="">
+    Youtube Studio
+  </a>,
+  <li>
+    <a href="https://www.github.com" target="">
+      Github
+    </a>
+  </li>,
+  <li>
+    <a href="https://www.odysee.com" target="">
+      Odysee
+    </a>
+  </li>,
+  <li>
+    <a href="https:/www.udemy.com" target="">
+      Udemy
+    </a>
+  </li>,
+];

src/data/card2.js

@@ -0,0 +1,6 @@
+export const card2 = [
+  <a href="https://www.reddit.com/r/dataisbeautiful/">r/DataIsBeautiful</a>,
+  <a href="https://www.reddit.com/r/firefox/">r/Firefox</a>,
+  <a href="https://www.reddit.com/r/linux/">r/Linux</a>,
+  <a href="https://www.reddit.com/r/privacy/">r/Privacy</a>,
+];