From 7d3105a2172dd82d46d7a243ae755c3b3f00588f Mon Sep 17 00:00:00 2001
From: Dylan Steck <dylancsteck@gmail.com>
Date: Mon, 21 Oct 2024 15:34:24 -0400
Subject: [PATCH] fix: ensure there is spacing between a channel mention and
 the rest of the span

---
 package.json                                        |  2 +-
 .../NeynarProfileCard/hooks/useLinkifyBio.tsx       | 13 ++++++++++---
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index a09a05c..12d92d7 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@neynar/react",
-  "version": "0.9.5",
+  "version": "0.9.6",
   "description": "Farcaster frontend component library powered by Neynar",
   "main": "dist/bundle.cjs.js",
   "module": "dist/bundle.es.js",
diff --git a/src/components/organisms/NeynarProfileCard/hooks/useLinkifyBio.tsx b/src/components/organisms/NeynarProfileCard/hooks/useLinkifyBio.tsx
index b1faf02..8714b3f 100644
--- a/src/components/organisms/NeynarProfileCard/hooks/useLinkifyBio.tsx
+++ b/src/components/organisms/NeynarProfileCard/hooks/useLinkifyBio.tsx
@@ -24,12 +24,12 @@ const generateUrl = (match: string): string => {
 
 const StyledLink = styled.a(({ theme }) => ({
   textDecoration: "underline",
-  color: theme.vars.colors.primary,
+  color: theme.vars.colors.primary
 }));
 
 export const useLinkifyBio = (text: string | undefined): React.ReactNode[] => {
   if (!text) return [];
-  
+
   const elements: React.ReactNode[] = [];
   let lastIndex = 0;
 
@@ -41,8 +41,15 @@ export const useLinkifyBio = (text: string | undefined): React.ReactNode[] => {
     }
 
     const url = generateUrl(match[0]);
+    const isChannel = (match[0].trim()).startsWith('/');
+
     elements.push(
-      <StyledLink key={matchIndex} href={url} target="_blank">
+      <StyledLink
+        key={matchIndex}
+        href={url}
+        target="_blank"
+        style={isChannel ? { marginLeft: 3.5 } : {}}
+      >
         {match[0].trim()}
       </StyledLink>
     );