Merge pull request #41 from neynarxyz/ds/neyn-3445-fix-profile-card-b…

…io-spacing

fix: ensure there is spacing between a channel mention and the rest of the span

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",

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>
     );