Check if the creator is live or not

source/src/pages/live.astro

@@ -14,9 +14,14 @@ import { ArrowDown } from "@iconoir/vue";
 
 // Fetch
 const CreatorName = Astro.url.href.split("live?=").pop();
-const Creator = await fetch(
-  "https://twitch-backend.sudovanilla.org" + "/api/users/" + CreatorName,
-).then((response) => response.json());
+const Creator = await fetch("https://twitch-backend.sudovanilla.org" + "/api/users/" + CreatorName,).then((response) => response.json());
+
+// Check if the Creator is live
+if(Creator.isLive === true) {
+  var IsLive = true
+} else if(Creator.isLive === false) {
+  var IsLive = false
+}
 ---
 
 <Base>
@@ -36,14 +41,19 @@ const Creator = await fetch(
     <div class="creator-tw-start">
       <img src={"https://ipx.sudovanilla.org" + "/" + Creator.data.pfp} />
       <p style="font-size: 14px;">{Creator.data.username}</p>
+      {IsLive ?
         <span>|</span>
         <p style="font-weight: bold">{Creator.data.stream.title}</p>
+        :
+        null
+      }
     </div>
     <div class="creator-tw-end">
       <p style="font-size: 14px;opacity: 0.5;">{Creator.data.followers} Followers</p>
       <!-- <button><ArrowDown /></button> -->
     </div>
   </div>
+  {IsLive ?
     <Zorn
       Live
       Video={"https://twitch-backend.sudovanilla.org" +
@@ -51,6 +61,11 @@ const Creator = await fetch(
         CreatorName +
         "/hls.m3u8"}
     />
+    :
+    <div style={'background: linear-gradient(0deg, #23232345, #' + Creator.data.colorHex + ');'} class="creator-is-offline">
+      <p>They're currently offline.</p>
+    </div>
+  }
 </Base>
 
 <style is:global lang="scss">
@@ -112,6 +127,15 @@ const Creator = await fetch(
       }
     }
   }
+  .creator-is-offline {
+    color: white;
+    font-weight: bold;
+    text-align: center;
+    margin: 48px 24px 0px 24px;
+    padding: 16% 0px;
+    border-radius: 12px;
+    font-size: 32px;
+  }
 </style>
 
 <style is:global lang="scss">