From 44af861034cc41dd6fb022b2ab6d2a46039925f5 Mon Sep 17 00:00:00 2001
From: Kyliux <salocinigrub@gmail.com>
Date: Mon, 30 Dec 2024 18:54:55 +0800
Subject: [PATCH] add github logo

---
 showcase.json                              |  3 +-
 src/components/Spotlight/index.module.scss | 15 ++++++++
 src/components/Spotlight/index.tsx         | 12 +++++-
 static/icons/github_pink.svg               | 43 ++++++++++++++++++++++
 4 files changed, 70 insertions(+), 3 deletions(-)
 create mode 100644 static/icons/github_pink.svg

diff --git a/showcase.json b/showcase.json
index f088bb87..665080f9 100644
--- a/showcase.json
+++ b/showcase.json
@@ -34,7 +34,8 @@
     "title": "Bicycle to Dfinity",
     "url": "https://m5rwi-daaaa-aaaal-acrpq-cai.icp0.io",
     "description": "An adventure around the world to meet great souls and promote good stuff.",
-    "img": "/showcase/aegir.jpg"
+    "img": "/showcase/aegir.jpg",
+    "github":"https://github.com/Kyliux/Icloud"
   },
   {
     "title": "ICPFA",
diff --git a/src/components/Spotlight/index.module.scss b/src/components/Spotlight/index.module.scss
index 124747bc..7a9bdc66 100644
--- a/src/components/Spotlight/index.module.scss
+++ b/src/components/Spotlight/index.module.scss
@@ -60,4 +60,19 @@
     word-break: break-word;
     white-space: pre-wrap;
   }
+
+  h4 {
+    display: flex;
+    align-items: center;
+    justify-content: space-between; /* This pushes items to the edges */
+  }
+
+  .githubLogo {
+    width: 40px; /* Adjust the size of the logo */
+    height: 40px;
+  }
+}
+
+.githubLink {
+  margin-left: auto; /* Pushes the link to the right */
 }
diff --git a/src/components/Spotlight/index.tsx b/src/components/Spotlight/index.tsx
index c6dcea20..650dbb7a 100644
--- a/src/components/Spotlight/index.tsx
+++ b/src/components/Spotlight/index.tsx
@@ -6,7 +6,8 @@ export default function Spotlight({
   title,
   description,
   img,
-  url
+  url,
+  github
 }: ShowcaseSpotlight): JSX.Element {
   return (
     <Link href={url} target="_blank" rel="noreferrer noopener nofollow">
@@ -22,7 +23,14 @@ export default function Spotlight({
         </div>
 
         <div className={styles.content}>
-          <h4>{title}</h4>
+        <h4>
+        {title}
+        {github && (
+          <Link href={github} target="_blank" rel="noreferrer noopener nofollow" className={styles.githubLink}>
+            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/ae/Github-desktop-logo-symbol.svg/640px-Github-desktop-logo-symbol.svg.png" alt="GitHub Logo" className={styles.githubLogo} />
+          </Link>
+        )}
+      </h4>
           <p>{description}</p>
         </div>
       </article>
diff --git a/static/icons/github_pink.svg b/static/icons/github_pink.svg
new file mode 100644
index 00000000..27734df1
--- /dev/null
+++ b/static/icons/github_pink.svg
@@ -0,0 +1,43 @@
+<svg width="128" height="128" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs>
+        <circle id="b" cx="64" cy="64" r="56"/>
+        <filter x="-7.1%" y="-5.4%" width="114.3%" height="114.3%" filterUnits="objectBoundingBox" id="a">
+            <feMorphology radius="1" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"/>
+            <feOffset dy="2" in="shadowSpreadOuter1" result="shadowOffsetOuter1"/>
+            <feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"/>
+            <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"/>
+            <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.240942029 0" in="shadowBlurOuter1"/>
+        </filter>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="c">
+            <stop stop-color="#FEFEFE" offset="0%"/>
+            <stop stop-color="#E0E0E0" offset="100%"/>
+        </linearGradient>
+        <circle id="d" cx="64" cy="63" r="52"/>
+        <linearGradient x1="50%" y1="100%" x2="50%" y2="0%" id="g">
+            <stop stop-color="#492779" offset="0%"/>
+            <stop stop-color="#892793" offset="100%"/>
+        </linearGradient>
+        <path d="M12 64.034c0 23.025 14.885 42.472 35.555 49.367 2.6.456 3.575-1.105 3.575-2.47 0-1.237-.065-5.334-.065-9.692C38 103.644 34.62 98.05 33.58 95.124c-.585-1.496-3.12-6.114-5.33-7.35-1.82-.976-4.42-3.382-.065-3.447 4.095-.065 7.02 3.772 7.995 5.333 4.68 7.87 12.155 5.66 15.145 4.293.455-3.382 1.82-5.66 3.315-6.96-11.57-1.3-23.66-5.788-23.66-25.69 0-5.66 2.015-10.343 5.33-13.985-.52-1.3-2.34-6.634.52-13.79 0 0 4.355-1.365 14.3 5.334 4.16-1.17 8.58-1.756 13-1.756s8.84.586 13 1.756c9.945-6.764 14.3-5.333 14.3-5.333 2.86 7.154 1.04 12.487.52 13.788 3.315 3.642 5.33 8.26 5.33 13.984 0 19.968-12.155 24.39-23.725 25.692 1.885 1.626 3.51 4.748 3.51 9.626 0 6.96-.065 12.553-.065 14.31 0 1.365.975 2.99 3.575 2.47C101.115 106.507 116 86.995 116 64.035 116 35.284 92.73 12 64 12S12 35.285 12 64.034z" id="e"/>
+        <filter x="-.5%" y="-.5%" width="101%" height="102%" filterUnits="objectBoundingBox" id="f">
+            <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+            <feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.529296875 0" in="shadowOffsetOuter1"/>
+        </filter>
+        <filter x="-1%" y="-1%" width="101.9%" height="103%" filterUnits="objectBoundingBox" id="h">
+            <feGaussianBlur stdDeviation="1" in="SourceAlpha" result="shadowBlurInner1"/>
+            <feOffset in="shadowBlurInner1" result="shadowOffsetInner1"/>
+            <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"/>
+            <feColorMatrix values="0 0 0 0 0.258823529 0 0 0 0 0.137254902 0 0 0 0 0.431372549 0 0 0 0.703549592 0" in="shadowInnerInner1"/>
+        </filter>
+    </defs>
+    <g fill="none" fill-rule="evenodd">
+        <path d="M0 0h128v128H0z"/>
+        <use fill="#000" filter="url(#a)" xlink:href="#b"/>
+        <use stroke-opacity=".5" stroke="#BABABA" stroke-width="2" fill-opacity="0" fill="#FFF" xlink:href="#b"/>
+        <circle fill="url(#c)" cx="64" cy="64" r="56"/>
+        <g>
+            <use fill="#000" filter="url(#f)" xlink:href="#e"/>
+            <use fill="url(#g)" xlink:href="#e"/>
+            <use fill="#000" filter="url(#h)" xlink:href="#e"/>
+        </g>
+    </g>
+</svg>
\ No newline at end of file