added sparke

eleven-labs · Oct 27, 2023 · 19d1945 · 19d1945
1 parent ca147ff
commit 19d1945
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 2 deletions.
diff --git a/src/components/PostPreview/PostPreview.scss b/src/components/PostPreview/PostPreview.scss
@@ -56,6 +56,7 @@ $border-radius: 4px;
     @include post-preview-card;
     display: flex;
     flex-direction: column;
+    position: relative;
 
     img {
       max-width: 100%;
@@ -66,7 +67,11 @@ $border-radius: 4px;
       padding: var(--spacing-s);
     }
 
-    @include create-media-queries('md') {
+    .sparkle {
+      display: none;
+    }
+
+    @include create-media-queries("md") {
       flex-direction: row;
       align-items: center;
       justify-content: center;
@@ -87,6 +92,17 @@ $border-radius: 4px;
       article {
         width: 70%;
       }
+
+      .sparkle {
+        display: block;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        left: 7rem;
+        width: 47px;
+        height: 108px;
+        position: absolute;
+        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><line x1="33.1063" y1="3.06202" x2="44.1118" y2="14.4606" stroke="%23F3C93D" stroke-width="5" stroke-linecap="round"/><line x1="2.5" y1="-2.5" x2="18.3445" y2="-2.5" transform="matrix(0.694595 -0.719401 -0.719401 -0.694595 29.5713 105.469)" stroke="%23F3C93D" stroke-width="5" stroke-linecap="round"/><line x1="3" y1="50.8906" x2="41.0134" y2="50.8906" stroke="%23F3C93D" stroke-width="6" stroke-linecap="round"/></svg>');
+      }
     }
   }
 

diff --git a/src/components/PostPreview/PostPreview.tsx b/src/components/PostPreview/PostPreview.tsx
@@ -37,7 +37,12 @@ export const PostPreview: React.FC<PostPreviewProps> = ({
   ...boxProps
 }) => (
   <Box className={classNames({ 'post-preview--highlighted': isHighlighted })}>
-    <div>{isHighlighted && <img src={image?.source} alt={image?.alt} />}</div>
+    {isHighlighted && (
+      <>
+        <div className="sparkle" />
+        <div>{isHighlighted && <img src={image?.source} alt={image?.alt} />}</div>
+      </>
+    )}
     <Box
       as="article"
       className={classNames('post-preview', { 'post-preview--mask': hasMask }, { 'post-preview--related': isRelated })}