@sundaywong/launched-badges
Version:
Universal badges for your product launches — celebrate on Lovable, Reddit, X, Hacker News, and more, not just Product Hunt.
146 lines (134 loc) • 4.3 kB
text/typescript
import React from 'react';
interface SocialBadgeProps {
/**
* The count to display (likes, upvotes, etc)
* Can be a number or formatted string like "10.5k", "1.2k", "10+"
* Maximum 6 characters
*/
count?: number | string;
/**
* The theme of the badge
* @default "light"
*/
theme?: 'light' | 'dark' | string;
/**
* The width of the SVG
*/
width?: number;
/**
* The height of the SVG
*/
height?: number;
/**
* Custom text for the "featured on" line (max 15 characters)
* @default "FEATURED ON"
*/
featuredText?: string;
/**
* The platform name to display
* @default "Social"
*/
platformName?: string;
/**
* Custom SVG component to render the platform name (overrides platformName)
*/
platformNameComponent?: React.ReactNode;
/**
* Whether to wrap the badge in a link to the platform
* @default true
*/
linkEnabled?: boolean;
/**
* The URL to link to when clicked
*/
linkUrl?: string;
/**
* What to display in the badge (count, link icon, or nothing)
* @default "count"
*/
displayMode?: 'count' | 'link' | 'none';
/**
* The icon type to display with the count
* @default "upvote"
*/
iconType?: 'upvote' | 'upvote-arrow' | 'likes' | 'followers' | 'star';
/**
* Colors for the badge elements
*/
colors?: {
border?: string;
text?: string;
background?: string;
};
/**
* Custom component to use as the logo
*/
logoComponent?: React.ReactNode;
/**
* Override default SVG viewBox width
*/
viewBoxWidth?: number;
/**
* X position for the count/icon group
*/
countGroupX?: number;
}
/**
* A generic SVG badge component that can be extended for different social platforms
*/
declare const SocialBadge: React.FC<SocialBadgeProps>;
interface LovableBadgeProps extends Omit<SocialBadgeProps, 'platformName' | 'colors' | 'logoComponent'> {
}
/**
* Lovable-specific badge component
*/
declare const LovableBadge: React.FC<LovableBadgeProps>;
interface RedditBadgeProps extends Omit<SocialBadgeProps, 'platformName' | 'colors' | 'logoComponent'> {
}
/**
* Reddit-specific badge component
*/
declare const RedditBadge: React.FC<RedditBadgeProps>;
interface HackerNewsBadgeProps extends Omit<SocialBadgeProps, 'platformName' | 'colors' | 'logoComponent'> {
}
/**
* HackerNews-specific badge component
*/
declare const HackerNewsBadge: React.FC<HackerNewsBadgeProps>;
interface FacebookBadgeProps extends Omit<SocialBadgeProps, 'platformName' | 'colors' | 'logoComponent'> {
}
/**
* Facebook-specific badge component
*/
declare const FacebookBadge: React.FC<FacebookBadgeProps>;
interface InstagramBadgeProps extends Omit<SocialBadgeProps, 'platformName' | 'colors' | 'logoComponent'> {
}
/**
* Instagram-specific badge component
*/
declare const InstagramBadge: React.FC<InstagramBadgeProps>;
interface TwitterBadgeProps extends Omit<SocialBadgeProps, 'platformName' | 'colors' | 'logoComponent'> {
}
/**
* Twitter (X)-specific badge component
*/
declare const TwitterBadge: React.FC<TwitterBadgeProps>;
interface MicroLaunchBadgeProps extends Omit<SocialBadgeProps, 'platformName' | 'colors' | 'logoComponent'> {
}
/**
* MicroLaunch-specific badge component
*/
declare const MicroLaunchBadge: React.FC<MicroLaunchBadgeProps>;
interface LinkedInBadgeProps extends Omit<SocialBadgeProps, 'platformName' | 'colors' | 'logoComponent'> {
}
/**
* LinkedIn-specific badge component
*/
declare const LinkedInBadge: React.FC<LinkedInBadgeProps>;
interface GitHubBadgeProps extends Omit<SocialBadgeProps, 'platformName' | 'colors' | 'logoComponent'> {
}
/**
* GitHub-specific badge component
*/
declare const GitHubBadge: React.FC<GitHubBadgeProps>;
export { FacebookBadge, type FacebookBadgeProps, GitHubBadge, type GitHubBadgeProps, HackerNewsBadge, type HackerNewsBadgeProps, InstagramBadge, type InstagramBadgeProps, LinkedInBadge, type LinkedInBadgeProps, LovableBadge, type LovableBadgeProps, MicroLaunchBadge, type MicroLaunchBadgeProps, RedditBadge, type RedditBadgeProps, SocialBadge, type SocialBadgeProps, TwitterBadge, type TwitterBadgeProps };