add: share btn

kawamataryo · Jan 16, 2025 · 67281b0 · 67281b0
1 parent 695e85b
commit 67281b0
Show file tree

Hide file tree

Showing 3 changed files with 80 additions and 4 deletions.
diff --git a/src/components/Icons/BlueskyIconSvg.tsx b/src/components/Icons/BlueskyIconSvg.tsx
@@ -1,14 +1,17 @@
-function BlueskyIconSvg() {
+type Props = {
+  className?: string;
+};
+
+function BlueskyIconSvg({ className }: Props) {
   return (
     <svg
       version="1.0"
       id="katman_1"
       xmlns="http://www.w3.org/2000/svg"
       xmlnsXlink="http://www.w3.org/1999/xlink"
-      x="0px"
-      y="0px"
-      viewBox="0 0 591 595.3"
+      viewBox="267.5 33.3 315.4 261.5"
       xmlSpace="preserve"
+      className={className}
     >
       <style>{".st0{fill:url(#SVGID_1_);}"}</style>
       <g>

diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
@@ -8,6 +8,7 @@ import {
 import { getMessageWithLink } from "~lib/utils";
 import type { MatchType, MatchTypeFilterValue } from "~types";
 import AsyncButton from "./AsyncButton";
+import BlueskyIconSvg from "./Icons/BlueskyIconSvg";
 import SocialLinks from "./SocialLinks";
 
 type Props = {
@@ -31,6 +32,12 @@ const Sidebar = ({
   followAll,
   blockAll,
 }: Props) => {
+  const shareText = encodeURIComponent(`I've discovered ${detectedCount} Bluesky users from my social network using the Sky Follower Bridge.✨
+
+Check it out: https://share.sky-follower-bridge.dev?q=${detectedCount}
+
+#skyfollowerbridge`);
+
   return (
     <aside className="bg-base-300 w-80 min-h-screen p-4 border-r border-base-300 flex flex-col">
       <div className="flex-grow">
@@ -96,6 +103,17 @@ const Sidebar = ({
             </div>
           </div>
         </div>
+        <div>
+          <a
+            className="btn btn-sm btn-wide btn-ghost btn-outline share-button"
+            href={`https://bsky.app/intent/compose?text=${shareText}`}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <BlueskyIconSvg className="w-5 h-5" />
+            Share on Blueskv{" "}
+          </a>
+        </div>
         <div className="divider" />
         <div className="flex items-center gap-2 mb-2">
           <svg

diff --git a/src/style.css b/src/style.css
@@ -5,3 +5,58 @@
 .modal {
   background-color: rgba(0, 0, 0, 0.5);
 }
+
+.share-button {
+  transition: opacity 0.2s ease-in-out;
+  transition: 1s box-shadow;
+  position: relative;
+  overflow: auto;
+}
+
+
+.share-button:before {
+    content: '';
+    background: linear-gradient(45deg, #0000ff, #0040ff, #0080ff, #00bfff, #00ffff, #00bfff, #0080ff, #0040ff, #0000ff);
+    position: absolute;
+    top: -2px;
+    left:-2px;
+    background-size: 400%;
+    z-index: 0;
+    filter: blur(5px);
+    width: calc(100% + 4px);
+    height: calc(100% + 4px);
+    animation: glowing 20s linear infinite;
+    opacity: 0;
+    transition: opacity .3s ease-in-out;
+    border-radius: 10px;
+}
+
+.share-button:active {
+    color: #000
+}
+
+.share-button:active:after {
+    background: transparent;
+}
+
+.share-button:hover:before {
+    opacity: 1;
+}
+
+.share-button:after {
+    z-index: -1;
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background: #111;
+    left: 0;
+    top: 0;
+    border-radius: 10px;
+}
+
+@keyframes glowing {
+    0% { background-position: 0 0; }
+    50% { background-position: 400% 0; }
+    100% { background-position: 0 0; }
+}