diff --git a/bskyogcard/src/components/PostEmbed.tsx b/bskyogcard/src/components/PostEmbed.tsx
index fde6aa0496..068f83f893 100644
--- a/bskyogcard/src/components/PostEmbed.tsx
+++ b/bskyogcard/src/components/PostEmbed.tsx
@@ -6,16 +6,19 @@ import {
import {ModeratorData} from '../data/getModeratorData.js'
import {Image as ImageSource, PostData} from '../data/getPostData.js'
-import {atoms as a} from '../theme/index.js'
+import {atoms as a, theme as t} from '../theme/index.js'
import {getStarterPackImageUri} from '../util/getStarterPackImageUri.js'
import {Embed, EmbedType, parseEmbed} from '../util/parseEmbed.js'
+import {sanitizeHandle} from '../util/sanitizeHandle.js'
import {Box} from './Box.js'
import {FeedCard} from './FeedCard.js'
import * as Grid from './Grid.js'
+import {StarterPack} from './icons/StarterPack.js'
import {Image, SquareImage} from './Image.js'
import {LinkCard} from './LinkCard.js'
import {ListCard} from './ListCard.js'
import {NotQuotePost, QuotePost} from './PostEmbed/QuotePost.js'
+import {Text} from './Text.js'
type CommonProps = {
data: PostData
@@ -134,7 +137,59 @@ export function StarterPackEmbed({
if (!AppBskyGraphStarterpack.isValidRecord(embed.view.record)) return null
const {name, description} = embed.view.record
const image = rest.data.images.get(uri)
- return
+ return (
+
+ {image && (
+
+
+
+ )}
+
+
+
+
+
+ {name}
+
+ Starter pack by {sanitizeHandle(embed.view.creator.handle, '@')}
+
+
+
+ {description ? (
+ {description}
+ ) : null}
+ {embed.view.joinedAllTimeCount >= 50 && (
+
+ {embed.view.joinedAllTimeCount} users have joined!
+
+ )}
+
+
+
+ )
}
export function ListEmbed({
diff --git a/bskyogcard/src/components/icons/StarterPack.tsx b/bskyogcard/src/components/icons/StarterPack.tsx
new file mode 100644
index 0000000000..a2c50f1dcf
--- /dev/null
+++ b/bskyogcard/src/components/icons/StarterPack.tsx
@@ -0,0 +1,22 @@
+import React from 'react'
+
+import {IconProps} from './types.js'
+
+export function StarterPack({size, fill}: IconProps) {
+ return (
+
+ )
+}