chore add party hat SVG image for creators' avatars

UXCorpRangel · Sep 11, 2024 · b9d2d41 · b9d2d41
1 parent b9211a4
commit b9d2d41
Show file tree

Hide file tree

Showing 2 changed files with 89 additions and 1 deletion.
diff --git a/public/assets/images/party-hat.svg b/public/assets/images/party-hat.svg
diff --git a/src/components/Creator/Creator.astro b/src/components/Creator/Creator.astro
@@ -25,7 +25,16 @@ const { name, description, avatar, direction, links } = Astro.props;
 
 <article class=`creator ${direction}`>
   <header>
-    <img src={`${BASE_URL}/assets/images/creators/${avatar}`} alt={name} class="avatar" />
+    <div
+      class:list={[
+        'avatar-wrapper',
+        {
+          party: avatar.includes('odracirdev')
+        }
+      ]}
+    >
+      <img src={`${BASE_URL}/assets/images/creators/${avatar}`} alt={name} class="avatar" />
+    </div>
 
     <div class="creator-card">
       <h2>{name}</h2>
@@ -60,6 +69,25 @@ const { name, description, avatar, direction, links } = Astro.props;
       align-items: center;
       gap: 2rem;
 
+      & .avatar-wrapper {
+        position: relative;
+
+        &.party::after {
+          content: '';
+          width: 50%;
+          height: 50%;
+          position: absolute;
+          background-image: url('/ana-cards-web/assets/images/party-hat.svg');
+          background-size: contain;
+          background-position: center;
+          background-repeat: no-repeat;
+          rotate: 45deg;
+          z-index: 1;
+          inset-block-start: -4rem;
+          inset-inline-end: -4rem;
+        }
+      }
+
       & .avatar {
         object-fit: cover;
         aspect-ratio: 1 / 1;