Merge pull request #2854 from KukretiShubham/spotlight

add: only 3 spotlights
dev-protocol · Oct 27, 2024 · c481eb8 · c481eb8
2 parents 3ae23ec + dc64d9d
commit c481eb8
Showing 1 changed file with 43 additions and 0 deletions.
diff --git a/src/pages/passport/[eoa]/[...ids]/index.astro b/src/pages/passport/[eoa]/[...ids]/index.astro
@@ -33,6 +33,7 @@ const skin =
 const _passportSkinBGMs = skin?.bgm
 const _passportSkinClips = skin?.clips
 const _passportSkinVideos = skin?.videos
+const _passportSpotlight = skin?.spotlight
 const _currentLikes = skin?.likes
 
 const passportSkinBGMs = await whenDefined(_passportSkinBGMs, () =>
@@ -91,6 +92,35 @@ const passportSkinClips = await whenDefined(
       .catch(() => undefined)
   },
 )
+
+const passportSpotlight = await whenDefined(
+  _passportSpotlight,
+  async (spotLights) => {
+    if (!spotLights.length) {
+      return undefined
+    }
+
+    return Promise.all(
+      spotLights.map((item) =>
+        getPassportItemForPayload({ sTokenPayload: item.payload ?? '' })
+          .then(
+            (spotlight) =>
+              (spotlight instanceof Error
+                ? undefined
+                : {
+                    ...spotlight,
+                    description: item.description,
+                    frameColorHex: item.frameColorHex,
+                  }) as PassportClip,
+          )
+          .catch(() => undefined),
+      ) ?? [],
+    )
+      .then((items) => items.filter((items) => !!items))
+      .then((items) => (items.length ? items.slice(0, 3) : undefined))
+      .catch(() => undefined)
+  },
+)
 ---
 
 <Layout theme="auto" sTokenPayload={profile?.skins?.at(0)?.theme}>
@@ -250,6 +280,19 @@ const passportSkinClips = await whenDefined(
     <section
       class="grid justify-items-start max-w-screen-lg mx-auto px-4 gap-24 mb-10"
     >
+      {
+        passportSpotlight?.length && (
+          <div class:list={passportClass('spotlight-container')}>
+            <div class:list={passportClass('spotlight-container')}>
+              <PassportClips
+                client:only="vue"
+                clips={passportSpotlight}
+                id={id}
+              />
+            </div>
+          </div>
+        )
+      }
       {
         passportSkinClips?.length && (
           <div class:list={passportClass('clips-container')}>