Added share button

Author: Rohithgilla12

app/routes/app.tsx

@@ -1,13 +1,13 @@
+import { TwitterIcon, TwitterShareButton } from "next-share";
 import { LoaderFunction, redirect, useLoaderData, useTransition } from "remix";
-import { ChartProvider, XAxis, BarSeries, YAxis, Tooltip } from "rough-charts";
-import { mockResponse } from "~/mocks/mock-response";
+import { BarSeries, ChartProvider, Tooltip, XAxis, YAxis } from "rough-charts";
 import { Article } from "~/types/articleData";
 import { ArticleProcessedData } from "~/types/articleProcessedData";
 import { cookie } from "~/utils/cookie.server";
 import {
-  processArticlesStats,
   articlesMapByMonth,
   findMonthWithHeighestArticles,
+  processArticlesStats,
 } from "~/utils/processArticles";
 
 export const loader: LoaderFunction = async ({ request, params }) => {
@@ -109,6 +109,18 @@ export default function AppRoute() {
           </ChartProvider>
         </div>
       </div>
+
+      <div className="my-2 flex flex-row-reverse">
+        <div className="prose ml-4">Share it if you like it :D </div>
+        <TwitterShareButton
+          url={"https://devto-wrapped.netlify.app/"}
+          title={
+            "Generate a report of your articles in 2021 and share it with your friends"
+          }
+        >
+          <TwitterIcon size={32} round />
+        </TwitterShareButton>
+      </div>
     </div>
   );
 }

app/tailwind.css

@@ -1112,6 +1112,18 @@ select {
   margin-top: 1rem;
 }
 
+.mr-8 {
+  margin-right: 2rem;
+}
+
+.mr-4 {
+  margin-right: 1rem;
+}
+
+.ml-4 {
+  margin-left: 1rem;
+}
+
 .block {
   display: block;
 }
@@ -1196,6 +1208,10 @@ select {
   flex-direction: row;
 }
 
+.flex-row-reverse {
+  flex-direction: row-reverse;
+}
+
 .flex-col {
   flex-direction: column;
 }
@@ -1262,11 +1278,6 @@ select {
   border-color: rgb(14 165 233 / var(--tw-border-opacity));
 }
 
-.border-sky-50 {
-  --tw-border-opacity: 1;
-  border-color: rgb(240 249 255 / var(--tw-border-opacity));
-}
-
 .bg-lime-50 {
   --tw-bg-opacity: 1;
   background-color: rgb(247 254 231 / var(--tw-bg-opacity));
@@ -1297,11 +1308,6 @@ select {
   background-color: rgb(0 0 0 / var(--tw-bg-opacity));
 }
 
-.bg-sky-300 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(125 211 252 / var(--tw-bg-opacity));
-}
-
 .p-8 {
   padding: 2rem;
 }
@@ -1401,6 +1407,11 @@ select {
   color: rgb(239 68 68 / var(--tw-text-opacity));
 }
 
+.text-sky-500 {
+  --tw-text-opacity: 1;
+  color: rgb(14 165 233 / var(--tw-text-opacity));
+}
+
 .text-slate-200 {
   --tw-text-opacity: 1;
   color: rgb(226 232 240 / var(--tw-text-opacity));
@@ -1411,16 +1422,6 @@ select {
   color: rgb(56 189 248 / var(--tw-text-opacity));
 }
 
-.text-blue-600 {
-  --tw-text-opacity: 1;
-  color: rgb(37 99 235 / var(--tw-text-opacity));
-}
-
-.text-sky-500 {
-  --tw-text-opacity: 1;
-  color: rgb(14 165 233 / var(--tw-text-opacity));
-}
-
 .underline {
   -webkit-text-decoration-line: underline;
           text-decoration-line: underline;
@@ -1490,11 +1491,6 @@ select {
   transition-duration: 150ms;
 }
 
-.visited\:text-purple-600:visited {
-  --tw-text-opacity: 1;
-  color: rgb(147 51 234 / var(--tw-text-opacity));
-}
-
 .visited\:text-sky-600:visited {
   --tw-text-opacity: 1;
   color: rgb(2 132 199 / var(--tw-text-opacity));
@@ -1505,11 +1501,6 @@ select {
   background-color: rgb(29 78 216 / var(--tw-bg-opacity));
 }
 
-.hover\:text-blue-800:hover {
-  --tw-text-opacity: 1;
-  color: rgb(30 64 175 / var(--tw-text-opacity));
-}
-
 .hover\:text-sky-500:hover {
   --tw-text-opacity: 1;
   color: rgb(14 165 233 / var(--tw-text-opacity));

package.json

@@ -16,6 +16,7 @@
     "@remix-run/react": "^1.1.1",
     "@tailwindcss/forms": "^0.4.0",
     "@tailwindcss/typography": "^0.5.0",
+    "next-share": "^0.12.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "remix": "^1.1.1",

yarn.lock

@@ -2814,6 +2814,11 @@ neo-async@^2.6.2:
   resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.2.tgz#b4aafb93e3aeb2d8174ca53cf163ab7d7308305f"
   integrity sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==
 
+next-share@^0.12.2:
+  version "0.12.2"
+  resolved "https://registry.yarnpkg.com/next-share/-/next-share-0.12.2.tgz#209e20c04d4e3e1e93f0b3d731142347bae9648e"
+  integrity sha512-Eklbhcvyx51HZAvdDUFmI3YowamiVgoVpY7xOylENDttG0bdFxlF9iol9g6zoU0fLSAhDuZkdEurNcFFKVKu9Q==
+
 next-tick@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/next-tick/-/next-tick-1.0.0.tgz#ca86d1fe8828169b0120208e3dc8424b9db8342c"