From a509f72c40647a2a46ace63ec5f5f8b35a3c2c2c Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Mon, 1 Aug 2022 17:35:04 -0500
Subject: [PATCH] Create Ad component

---
 app/soapbox/features/ads/components/ad.tsx | 55 ++++++++++++++++++++++
 1 file changed, 55 insertions(+)
 create mode 100644 app/soapbox/features/ads/components/ad.tsx

diff --git a/app/soapbox/features/ads/components/ad.tsx b/app/soapbox/features/ads/components/ad.tsx
new file mode 100644
index 000000000..aee9c374a
--- /dev/null
+++ b/app/soapbox/features/ads/components/ad.tsx
@@ -0,0 +1,55 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import { Stack, HStack, Card, Avatar, Text, Icon } from 'soapbox/components/ui';
+import { useAppSelector } from 'soapbox/hooks';
+
+import type { Card as CardEntity } from 'soapbox/types/entities';
+
+interface IAd {
+  card: CardEntity,
+}
+
+/** Displays an ad in sponsored post format. */
+const Ad: React.FC<IAd> = ({ card }) => {
+  const instance = useAppSelector(state => state.instance);
+
+  return (
+    <Card className='p-5' variant='rounded'>
+      <Stack space={4}>
+        <HStack alignItems='center' space={3}>
+          <Avatar src={instance.thumbnail} size={42} />
+
+          <Stack>
+            <HStack space={1}>
+              <Text size='sm' weight='semibold' truncate>
+                {instance.title}
+              </Text>
+
+              <Icon
+                className='w-5 h-5 stroke-accent-500'
+                src={require('@tabler/icons/timeline.svg')}
+              />
+            </HStack>
+
+            <Stack>
+              <HStack alignItems='center' space={1}>
+                <Text theme='muted' size='sm' truncate>
+                  <FormattedMessage id='sponsored.subtitle' defaultMessage='Sponsored post' />
+                </Text>
+              </HStack>
+            </Stack>
+          </Stack>
+        </HStack>
+
+        {card.image && (
+          <a href={card.url} className='rounded-[10px] overflow-hidden' target='_blank'>
+            <img className='w-full' src={card.image} alt='' />
+          </a>
+        )}
+      </Stack>
+    </Card>
+  );
+};
+
+export default Ad;