4 files changed, 143 insertions, 0 deletions
diff --git a/web_page/webpage-shorlink/src/components/AddUrl.css b/web_page/webpage-shorlink/src/components/AddUrl.css
new file mode 100644
index 0000000..e11e6eb
--- /dev/null
+++ b/web_page/webpage-shorlink/src/components/AddUrl.css
@@ -0,0 +1,61 @@
+* {
+  background-color: #282828;
+}
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+  display: flex;
+  justify-content: center;
+}
+
+#title {
+  color: #ebdbb2;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-style: solid;
+  text-align: center;
+  border-radius: 20px;
+  width: 640px;
+  height: 64px;
+}
+
+#id-form {
+  color: #ebdbb2;
+  border-style: solid;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-direction: column;
+  padding: 10px;
+  border-radius: 20px;
+}
+
+#btn1 {
+  color: #ebdbb2;
+  background-color: #689d6a;
+  height: 48px;
+  width: 88px;
+  font-size: 24px;
+  border-radius: 20px;
+  border-color: #ebdbb2;
+}
+
+#btn1:hover {
+  background-color: #83a598;
+  cursor: pointer;
+}
+
+#id-label {
+  font-size: 24px;
+  height: 48px;
+}
+
+#inp {
+  color: #ebdbb2;
+  border-color: #ebdbb2;
+  border-radius: 10px;
+  font-size: 24px;
+}
diff --git a/web_page/webpage-shorlink/src/components/AddUrl.jsx b/web_page/webpage-shorlink/src/components/AddUrl.jsx
new file mode 100644
index 0000000..1112459
--- /dev/null
+++ b/web_page/webpage-shorlink/src/components/AddUrl.jsx
@@ -0,0 +1,51 @@
+import "./AddUrl.css";
+
+function AddUrl({ setShort }) {
+  return (
+    <div>
+      <h1 id="title">ENCURTADOR DE URL</h1>
+      <form
+        id="id-form"
+        method="post"
+        onSubmit={(e) => {
+          e.preventDefault();
+
+          const form = e.target;
+          const formData = new FormData(form);
+          const formJson = Object.fromEntries(formData.entries());
+          let data = formJson["url"];
+
+          fetch("https://sl.azuminha.com/add/" + encodeURIComponent(data))
+            .then((response) => {
+              if (!response.ok) {
+                throw new Error("Network response was not ok");
+              }
+              return response.text();
+            })
+            .then((result) => {
+              console.log(result);
+              setShort("sl.azuminha.com/" + result);
+              //const res = document.createElement("p");
+              //res.textContent = data + " => " + "sl.azuminha.com/" + result;
+              //document.body.appendChild(res);
+            });
+        }}
+      >
+        <label id="id-label">
+          URL:
+          <input name="url" id="inp" type="text" />
+        </label>
+        <button
+          id="btn1"
+          onClick={() => {
+            console.log("OLA");
+          }}
+        >
+          enviar
+        </button>
+      </form>
+    </div>
+  );
+}
+
+export default AddUrl;
diff --git a/web_page/webpage-shorlink/src/components/ShowUrl.css b/web_page/webpage-shorlink/src/components/ShowUrl.css
new file mode 100644
index 0000000..a7a9d1c
--- /dev/null
+++ b/web_page/webpage-shorlink/src/components/ShowUrl.css
@@ -0,0 +1,9 @@
+p {
+  color: #ebdbb2;
+  font-size: 24px;
+}
+
+p:hover {
+  color: #83a598;
+  cursor: pointer;
+}
diff --git a/web_page/webpage-shorlink/src/components/ShowUrl.jsx b/web_page/webpage-shorlink/src/components/ShowUrl.jsx
new file mode 100644
index 0000000..d063c5e
--- /dev/null
+++ b/web_page/webpage-shorlink/src/components/ShowUrl.jsx
@@ -0,0 +1,22 @@
+import { useState } from "react";
+import AddUrl from "./AddUrl";
+import "./ShowUrl.css";
+
+function ShowUrl() {
+  const [short, setShort] = useState();
+  return (
+    <div>
+      <AddUrl setShort={setShort} />
+      <p
+        onClick={() => {
+          navigator.clipboard.writeText(short);
+          alert("Link copiado");
+        }}
+      >
+        {short}
+      </p>
+    </div>
+  );
+}
+
+export default ShowUrl;