From 2ae40943af4b54bf0ab49a7dfc894e8f9c2131e3 Mon Sep 17 00:00:00 2001
From: Alexander <alexfox_2000@hotmail.com>
Date: Fri, 19 Feb 2021 11:47:06 -0500
Subject: [PATCH 1/2] Created base for Link Component with a prop for theme

---
 src/App.js   |  3 ++-
 src/Link.css | 20 ++++++++++++++++++++
 src/Link.js  | 12 ++++++++++++
 3 files changed, 34 insertions(+), 1 deletion(-)
 create mode 100644 src/Link.css
 create mode 100644 src/Link.js

diff --git a/src/App.js b/src/App.js
index ec8867e..9c96df7 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,6 +1,7 @@
 import React from "react";
 /* import Header from "./components/Header"; */
 /* import Main from "./components/Main"; */
+import Link from "./Link.js"
 
 const App = () => {
   return (
@@ -8,9 +9,9 @@ const App = () => {
       {/* <Header /> */}
       {/* <Main /> */}
       Funcionando
+      <Link theme="dark">Hoy</Link>
     </>
   );
 };
 
 export default App;
-
diff --git a/src/Link.css b/src/Link.css
new file mode 100644
index 0000000..2070dc4
--- /dev/null
+++ b/src/Link.css
@@ -0,0 +1,20 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap');
+
+.link {
+  box-sizing: border-box;
+  padding: 16px;
+  border-radius: 24px;
+  text-align: center;
+  display: inline-block;
+  font-family: 'Roboto', arial, monospace;
+}
+
+.link--dark {
+  background-color: #111111;
+  color: #FFFFFF;
+}
+
+.link--light {
+  background-color: #FFFFFF;
+  color: #111111;
+}
diff --git a/src/Link.js b/src/Link.js
new file mode 100644
index 0000000..6c6d3f6
--- /dev/null
+++ b/src/Link.js
@@ -0,0 +1,12 @@
+import React from "react";
+import styles from "./Link.css"
+
+export default function Link({theme, icon, children, ...props}) {
+  const themeClassName = theme ? `link--${theme}` : '';
+
+  return (
+    <a className={`link ${themeClassName}`}>
+      {children}
+    </a>
+  )
+}

From cc4b09da095c6c30983703e21faf55f14c7a9a0a Mon Sep 17 00:00:00 2001
From: Alexander <alexfox_2000@hotmail.com>
Date: Fri, 19 Feb 2021 15:47:05 -0500
Subject: [PATCH 2/2] Link Component: made some changes that reflected better
 figma example

---
 src/App.js                    |  2 --
 src/Link.js                   | 12 ------------
 src/{ => components}/Link.css | 17 +++++++++++------
 src/components/Link.js        | 15 ++++++++-------
 4 files changed, 19 insertions(+), 27 deletions(-)
 delete mode 100644 src/Link.js
 rename src/{ => components}/Link.css (54%)

diff --git a/src/App.js b/src/App.js
index 9c96df7..28ba3c4 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,7 +1,6 @@
 import React from "react";
 /* import Header from "./components/Header"; */
 /* import Main from "./components/Main"; */
-import Link from "./Link.js"
 
 const App = () => {
   return (
@@ -9,7 +8,6 @@ const App = () => {
       {/* <Header /> */}
       {/* <Main /> */}
       Funcionando
-      <Link theme="dark">Hoy</Link>
     </>
   );
 };
diff --git a/src/Link.js b/src/Link.js
deleted file mode 100644
index 6c6d3f6..0000000
--- a/src/Link.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from "react";
-import styles from "./Link.css"
-
-export default function Link({theme, icon, children, ...props}) {
-  const themeClassName = theme ? `link--${theme}` : '';
-
-  return (
-    <a className={`link ${themeClassName}`}>
-      {children}
-    </a>
-  )
-}
diff --git a/src/Link.css b/src/components/Link.css
similarity index 54%
rename from src/Link.css
rename to src/components/Link.css
index 2070dc4..cc9f1de 100644
--- a/src/Link.css
+++ b/src/components/Link.css
@@ -7,14 +7,19 @@
   text-align: center;
   display: inline-block;
   font-family: 'Roboto', arial, monospace;
+  background-color: white;
+  color: black;
+  cursor: pointer;
+  text-decoration: none;
+  outline: none;
 }
 
-.link--dark {
-  background-color: #111111;
-  color: #FFFFFF;
+.link:hover {
+  background-color: black;
+  color: white;
 }
 
-.link--light {
-  background-color: #FFFFFF;
-  color: #111111;
+.link:active {
+  background-color: white;
+  color: black;
 }
diff --git a/src/components/Link.js b/src/components/Link.js
index 1696817..57da21a 100644
--- a/src/components/Link.js
+++ b/src/components/Link.js
@@ -1,9 +1,10 @@
+import React from "react";
+import styles from "./Link.css"
 
-const Link = () => {
+export default function Link({href, children, ...props}) {
   return (
-    <a>Link</a>
-
-  );
-};
-
-export default Link;
\ No newline at end of file
+    <a className={`link`} href={href}>
+      {children}
+    </a>
+  )
+}