1 files changed, 35 insertions, 11 deletions
diff --git a/src/view/screens/Storybook/Links.tsx b/src/view/screens/Storybook/Links.tsx
index c3b1c0e0f..245a61a05 100644
--- a/src/view/screens/Storybook/Links.tsx
+++ b/src/view/screens/Storybook/Links.tsx
@@ -1,38 +1,39 @@
 import React from 'react'
 import {View} from 'react-native'
 
-import {atoms as a} from '#/alf'
+import {useTheme, atoms as a} from '#/alf'
 import {ButtonText} from '#/components/Button'
-import {Link} from '#/components/Link'
-import {H1, H3} from '#/components/Typography'
+import {InlineLink, Link} from '#/components/Link'
+import {H1, H3, Text} from '#/components/Typography'
 
 export function Links() {
+  const t = useTheme()
   return (
     <View style={[a.gap_md, a.align_start]}>
       <H1>Links</H1>
 
       <View style={[a.gap_md, a.align_start]}>
-        <Link
+        <InlineLink
           to="https://blueskyweb.xyz"
           warnOnMismatchingTextChild
           style={[a.text_md]}>
           External
-        </Link>
-        <Link to="https://blueskyweb.xyz" style={[a.text_md]}>
+        </InlineLink>
+        <InlineLink to="https://blueskyweb.xyz" style={[a.text_md]}>
           <H3>External with custom children</H3>
-        </Link>
-        <Link
+        </InlineLink>
+        <InlineLink
           to="https://blueskyweb.xyz"
           warnOnMismatchingTextChild
           style={[a.text_lg]}>
           https://blueskyweb.xyz
-        </Link>
-        <Link
+        </InlineLink>
+        <InlineLink
           to="https://bsky.app/profile/bsky.app"
           warnOnMismatchingTextChild
           style={[a.text_md]}>
           Internal
-        </Link>
+        </InlineLink>
 
         <Link
           variant="solid"
@@ -42,6 +43,29 @@ export function Links() {
           to="https://bsky.app/profile/bsky.app">
           <ButtonText>Link as a button</ButtonText>
         </Link>
+
+        <Link
+          label="View @bsky.app's profile"
+          to="https://bsky.app/profile/bsky.app">
+          <View
+            style={[
+              a.flex_row,
+              a.align_center,
+              a.gap_md,
+              a.rounded_md,
+              a.p_md,
+              t.atoms.bg_contrast_25,
+            ]}>
+            <View
+              style={[
+                {width: 32, height: 32},
+                a.rounded_full,
+                t.atoms.bg_contrast_200,
+              ]}
+            />
+            <Text>View @bsky.app's profile</Text>
+          </View>
+        </Link>
       </View>
     </View>
   )