1 files changed, 93 insertions, 0 deletions
diff --git a/src/view/com/util/PostEmbeds.tsx b/src/view/com/util/PostEmbeds.tsx
new file mode 100644
index 000000000..ca02aba84
--- /dev/null
+++ b/src/view/com/util/PostEmbeds.tsx
@@ -0,0 +1,93 @@
+import React, {useEffect, useState} from 'react'
+import {
+  ActivityIndicator,
+  StyleSheet,
+  StyleProp,
+  Text,
+  View,
+  ViewStyle,
+} from 'react-native'
+import {Entity} from '../../../third-party/api/src/client/types/app/bsky/feed/post'
+import {Link} from '../util/Link'
+import {
+  LinkMeta,
+  getLinkMeta,
+  getLikelyType,
+  LikelyType,
+} from '../../../lib/link-meta'
+import {colors} from '../../lib/styles'
+import {useStores} from '../../../state'
+
+export function PostEmbeds({
+  entities,
+  style,
+}: {
+  entities?: Entity[]
+  style?: StyleProp<ViewStyle>
+}) {
+  const store = useStores()
+  const [linkMeta, setLinkMeta] = useState<LinkMeta | undefined>(undefined)
+  const link = entities?.find(
+    ent =>
+      ent.type === 'link' && getLikelyType(ent.value || '') === LikelyType.HTML,
+  )
+
+  useEffect(() => {
+    let aborted = false
+    store.linkMetas.getLinkMeta(link?.value || '').then(linkMeta => {
+      if (!aborted) {
+        setLinkMeta(linkMeta)
+      }
+    })
+
+    return () => {
+      aborted = true
+    }
+  }, [link])
+
+  if (!link) {
+    return <View />
+  }
+
+  return (
+    <Link style={[styles.outer, style]} href={link.value}>
+      {linkMeta ? (
+        <>
+          <Text numberOfLines={1} style={styles.title}>
+            {linkMeta.title || linkMeta.url}
+          </Text>
+          <Text numberOfLines={1} style={styles.url}>
+            {linkMeta.url}
+          </Text>
+          {linkMeta.description ? (
+            <Text numberOfLines={2} style={styles.description}>
+              {linkMeta.description}
+            </Text>
+          ) : undefined}
+        </>
+      ) : (
+        <ActivityIndicator />
+      )}
+    </Link>
+  )
+}
+
+const styles = StyleSheet.create({
+  outer: {
+    borderWidth: 1,
+    borderColor: colors.gray2,
+    borderRadius: 8,
+    padding: 10,
+  },
+  title: {
+    fontSize: 16,
+    fontWeight: 'bold',
+  },
+  description: {
+    marginTop: 4,
+    fontSize: 15,
+  },
+  url: {
+    color: colors.gray4,
+  },
+})