From 564087947ca6bd2537a669f2293dfb51067ecd1a Mon Sep 17 00:00:00 2001
From: VChet <17050347+VChet@users.noreply.github.com>
Date: Sun, 22 Nov 2020 21:17:36 +0500
Subject: [PATCH] feat(style info): add Twitter share button

---
 .../components/dialogs/StyleInfoDialog.vue    | 21 +++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/src/src/components/dialogs/StyleInfoDialog.vue b/src/src/components/dialogs/StyleInfoDialog.vue
index 9763320..56deb4b 100644
--- a/src/src/components/dialogs/StyleInfoDialog.vue
+++ b/src/src/components/dialogs/StyleInfoDialog.vue
@@ -24,6 +24,10 @@
       </li>
     </ul>
 
+    <div class="share">
+      <a class="twitter" :href="twitterLink" rel="noopener" target="_blank">Share on Twitter</a>
+    </div>
+
     <div class="image">
       <img
         v-if="styleData.customPreview || styleData.preview"
@@ -147,6 +151,12 @@ export default {
       const userOrgs = this.user.orgs.map((org) => org.name);
       const isMember = userOrgs.includes(this.styleData.owner);
       return isAdmin || isOwner || isMember;
+    },
+    twitterLink() {
+      const name = this.styleData.customName || this.styleData.name;
+      const link = `https://stylebase.cc/${this.styleData.owner}/${this.styleData.name}`;
+      const text = encodeURIComponent(`${name} by ${this.styleData.owner}.\n${link}`);
+      return `https://twitter.com/intent/tweet?text=${text}`;
     }
   },
   methods: {
@@ -270,6 +280,17 @@ export default {
   }
 }
 
+.share {
+  margin: 1rem 0;
+
+  a {
+    color: var(--color-main);
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}
+
 .image {
   position: relative;
   display: flex;