add adPlaceholder

Author: medyo

src/assets/App.css

@@ -921,6 +921,7 @@ Producthunt item
   animation-duration: 1.5s;
   animation-name: cardPlaceholderPulse;
   animation-iteration-count: infinite;
+  scroll-snap-align: start;
 }
 .mediaCardPlaceholder {
   display: flex;
@@ -936,6 +937,7 @@ Producthunt item
 }
 .cardPlaceholder .cardContent {
   display: flex;
+  flex: auto;
   flex-direction: column;
 }
 .cardPlaceholder .cardUpvote {
@@ -970,6 +972,17 @@ Producthunt item
   margin-right: 16px;
   border-radius: 4px;
 }
+.adCardPlaceholder {
+  max-width: 300px;
+  column-gap: 16px;
+  display: flex;
+  flex-direction: row;
+}
+.adCardPlaceholder .image {
+  background: var(--placeholder-background-color);
+  flex: 0 0 120px;
+  height: 90px 
+}
 
 .floatingFilter {
   background: rgb(44, 128, 232);

src/components/placeholders/AdPlaceholder.tsx

@@ -0,0 +1,13 @@
+export const AdPlaceholder = ({ className = '' }: { className?: string }) => {
+  return (
+    <div className={'cardPlaceholder adCardPlaceholder'}>
+      <span className="image" />
+      <div className="cardContent">
+        <span className="line" />
+        <span className="smallLine" />
+        <span className="smallLine" />
+        <span className="smallLine" />
+      </div>
+    </div>
+  )
+}

src/components/placeholders/index.ts

@@ -1,2 +1,3 @@
 export * from "./Placeholder"
-export * from "./ProductHuntPlaceholder"
+export * from "./ProductHuntPlaceholder"
+export * from "./AdPlaceholder"