diff --git a/README.md b/README.md index a4bfb3d..4243e61 100644 --- a/README.md +++ b/README.md @@ -79,6 +79,7 @@ This component displays a user's Farcaster profile information. Params: - `fid` (number): The FID of the user to display. - `viewerFid?` (number): The FID of the viewer. Default: undefined. +- `customStyles?` (CSSProperties): Custom styles for the profile card. Default: {} Usage: ```tsx @@ -98,6 +99,7 @@ Params: - `identifier` (string): The identifier (either URL or hash) for the cast. - `viewerFid?` (number): The FID of the viewer. Default: undefined. - `allowReactions?` (boolean, default = true): Whether to allow reactions on the cast, and when this is true the component default to using Neynar reactions +- `customStyles?` (CSSProperties): Custom styles for the cast card. Default: {} Usage: ```tsx diff --git a/package.json b/package.json index 557cfe6..f03215c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@neynar/react", - "version": "0.6.0", + "version": "0.6.1", "description": "Farcaster frontend component library powered by Neynar", "main": "dist/bundle.cjs.js", "module": "dist/bundle.es.js", diff --git a/src/components/molecules/ProfileCard.tsx b/src/components/molecules/ProfileCard.tsx index 33bde63..88841bb 100644 --- a/src/components/molecules/ProfileCard.tsx +++ b/src/components/molecules/ProfileCard.tsx @@ -1,4 +1,3 @@ -// src/components/molecules/ProfileCard.tsx import { useMemo, memo } from "react"; import { styled } from "@pigment-css/react"; @@ -79,6 +78,7 @@ export type ProfileCardProps = { isFollowing?: boolean; isOwnProfile?: boolean; onCast?: () => void; + customStyles?: React.CSSProperties; }; export const ProfileCard = memo( @@ -94,6 +94,7 @@ export const ProfileCard = memo( isFollowing, isOwnProfile, onCast, + customStyles, }: ProfileCardProps) => { const linkifiedBio = useLinkifyBio(bio); @@ -111,15 +112,19 @@ export const ProfileCard = memo( window.open("https://warpcast.com/~/settings", "_blank"); }; + const customNumberStyle = { + color: customStyles?.color, + }; + return ( - + {isOwnProfile && onCast && ( - @{username} + @{username} Cast )} @@ -143,13 +148,13 @@ export const ProfileCard = memo( )} - @{username} - {isFollowing && Follows you} + @{username} + {isFollowing && Follows you} {isOwnProfile && ( - + Edit Profile )} @@ -157,15 +162,15 @@ export const ProfileCard = memo( -
{linkifiedBio}
+
{linkifiedBio}
- {formattedFollowingCount} Following + {formattedFollowingCount} Following - {formattedFollowersCount} Followers + {formattedFollowersCount} Followers @@ -173,4 +178,4 @@ export const ProfileCard = memo(
); } -); +); \ No newline at end of file diff --git a/src/components/organisms/NeynarProfileCard/index.tsx b/src/components/organisms/NeynarProfileCard/index.tsx index 599b5c3..682117a 100644 --- a/src/components/organisms/NeynarProfileCard/index.tsx +++ b/src/components/organisms/NeynarProfileCard/index.tsx @@ -32,11 +32,13 @@ async function fetchUserByFid({ export type NeynarProfileCardProps = { fid: number; viewerFid?: number; + customStyles?: React.CSSProperties; }; export const NeynarProfileCard: React.FC = ({ fid, viewerFid, + customStyles }) => { const { client_id } = useNeynarContext(); @@ -89,6 +91,7 @@ export const NeynarProfileCard: React.FC = ({ isOwnProfile={isOwnProfile} isFollowing={userData.viewer_context?.followed_by} onCast={handleCast} + customStyles={customStyles} /> ); }; diff --git a/src/components/stories/NeynarProfileCard.stories.tsx b/src/components/stories/NeynarProfileCard.stories.tsx index e96a02a..b7cf704 100644 --- a/src/components/stories/NeynarProfileCard.stories.tsx +++ b/src/components/stories/NeynarProfileCard.stories.tsx @@ -18,7 +18,8 @@ const Template: StoryFn = (args) => ; const TemplateWithUser: StoryFn = ({ fid, viewerFid, -}) => ; + customStyles, +}) => ; export const Primary = Template.bind({}); Primary.args = { @@ -45,6 +46,13 @@ WithUser.args = { viewerFid: 1, }; +export const WithCustomStyling = TemplateWithUser.bind({}); +WithCustomStyling.args = { + fid: 1, + viewerFid: 1, + customStyles: { background: "black", color: "white" }, +}; + export const WithEmptyPFPUser = TemplateWithUser.bind({}); WithEmptyPFPUser.args = { fid: 512026,