Make ads horizontal cards

app/soapbox/features/ads/components/ad.tsx

@@ -2,6 +2,7 @@ import React, { useEffect } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { Stack, HStack, Card, Avatar, Text, Icon } from 'soapbox/components/ui';
+import StatusCard from 'soapbox/features/status/components/card';
 import { useAppSelector } from 'soapbox/hooks';
 
 import type { Card as CardEntity } from 'soapbox/types/entities';
@@ -53,17 +54,7 @@ const Ad: React.FC<IAd> = ({ card, impression }) => {
           </Stack>
         </HStack>
 
-        {card.image && (
-          <a href={card.url} className='rounded-[10px] overflow-hidden' target='_blank'>
-            <img
-              className='w-full'
-              width={card.width}
-              height={card.height}
-              src={card.image}
-              alt=''
-            />
-          </a>
-        )}
+        <StatusCard card={card} onOpenMedia={() => {}} horizontal />
       </Stack>
     </Card>
   );

app/soapbox/features/ads/providers/rumble.ts

@@ -31,7 +31,8 @@ const RumbleAdProvider: AdProvider = {
       return data.ads.map(item => ({
         impression: item.impression,
         card: normalizeCard({
-          type: item.type === 1 ? 'Link' : 'Rich',
+          type: item.type === 1 ? 'link' : 'rich',
+          title: 'Sponsored post',
           image: item.asset,
           url: item.click,
         }),

app/soapbox/features/status/components/card.tsx

@@ -51,6 +51,7 @@ interface ICard {
   compact?: boolean,
   defaultWidth?: number,
   cacheWidth?: (width: number) => void,
+  horizontal?: boolean,
 }
 
 const Card: React.FC<ICard> = ({
@@ -61,6 +62,7 @@ const Card: React.FC<ICard> = ({
   compact = false,
   cacheWidth,
   onOpenMedia,
+  horizontal,
 }): JSX.Element => {
   const [width, setWidth] = useState(defaultWidth);
   const [embedded, setEmbedded] = useState(false);
@@ -132,7 +134,7 @@ const Card: React.FC<ICard> = ({
   };
 
   const interactive = card.type !== 'link';
-  const horizontal  = interactive || embedded;
+  horizontal        = typeof horizontal === 'boolean' ? horizontal : interactive || embedded;
   const className   = classnames('status-card', { horizontal, compact, interactive }, `status-card--${card.type}`);
   const ratio       = getRatio(card);
   const height      = (compact && !embedded) ? (width / (16 / 9)) : (width / ratio);