Merge pull request #25 from sshdopey/drips-contributions

feat(common): add FollowerCountPill, BackHeader, and TruncatedAddress components

Author: Chucks1093

src/components/common/BackHeader.tsx

@@ -0,0 +1,44 @@
+import { useNavigate } from 'react-router';
+import { ArrowLeft } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+interface BackHeaderProps {
+	title: string;
+	subtitle?: string;
+	onBack?: () => void;
+	className?: string;
+}
+
+const BackHeader: React.FC<BackHeaderProps> = ({ title, subtitle, onBack, className }) => {
+	const navigate = useNavigate();
+
+	const handleBack = () => {
+		if (onBack) {
+			onBack();
+		} else {
+			navigate(-1);
+		}
+	};
+
+	return (
+		<div className={cn('flex items-center gap-3', className)}>
+			<button
+				onClick={handleBack}
+				aria-label="Go back"
+				className="flex items-center justify-center rounded-xl border border-white/10 bg-white/5 p-2 text-white/70 transition-all hover:border-amber-500/30 hover:bg-amber-500/10 hover:text-white"
+			>
+				<ArrowLeft className="size-4" />
+			</button>
+			<div className="min-w-0">
+				<h1 className="font-grotesque text-xl font-black tracking-tight text-white truncate">
+					{title}
+				</h1>
+				{subtitle && (
+					<p className="font-jakarta text-sm text-white/50 truncate">{subtitle}</p>
+				)}
+			</div>
+		</div>
+	);
+};
+
+export default BackHeader;

src/components/common/FollowerCountPill.tsx

@@ -0,0 +1,37 @@
+import { Users } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+interface FollowerCountPillProps {
+	count?: number | null;
+	className?: string;
+}
+
+function formatCount(count: number): string {
+	if (count >= 1_000_000) {
+		return `${(count / 1_000_000).toFixed(1).replace(/\.0$/, '')}M`;
+	}
+	if (count >= 1_000) {
+		return `${(count / 1_000).toFixed(1).replace(/\.0$/, '')}K`;
+	}
+	return count.toString();
+}
+
+const FollowerCountPill: React.FC<FollowerCountPillProps> = ({ count, className }) => {
+	if (count == null || count < 0) {
+		return null;
+	}
+
+	return (
+		<span
+			className={cn(
+				'inline-flex items-center gap-1 rounded-full border border-white/10 bg-white/5 px-2 py-0.5 text-xs font-medium text-white/70',
+				className
+			)}
+		>
+			<Users className="size-3 text-amber-500/70" />
+			{formatCount(count)}
+		</span>
+	);
+};
+
+export default FollowerCountPill;

src/components/common/TruncatedAddress.tsx

@@ -0,0 +1,57 @@
+import { useState } from 'react';
+import { Copy, Check } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+interface TruncatedAddressProps {
+	address: string;
+	prefixChars?: number;
+	suffixChars?: number;
+	copyable?: boolean;
+	className?: string;
+}
+
+function truncate(address: string, prefix: number, suffix: number): string {
+	if (address.length <= prefix + suffix + 3) {
+		return address;
+	}
+	return `${address.slice(0, prefix)}...${address.slice(-suffix)}`;
+}
+
+const TruncatedAddress: React.FC<TruncatedAddressProps> = ({
+	address,
+	prefixChars = 6,
+	suffixChars = 4,
+	copyable = false,
+	className,
+}) => {
+	const [copied, setCopied] = useState(false);
+
+	const handleCopy = async () => {
+		await navigator.clipboard.writeText(address);
+		setCopied(true);
+		setTimeout(() => setCopied(false), 2000);
+	};
+
+	return (
+		<span
+			className={cn(
+				'inline-flex items-center gap-1 font-mono text-sm text-white/70',
+				className
+			)}
+			title={address}
+		>
+			<span>{truncate(address, prefixChars, suffixChars)}</span>
+			{copyable && (
+				<button
+					onClick={handleCopy}
+					aria-label="Copy address"
+					className="text-white/40 transition-colors hover:text-amber-500"
+				>
+					{copied ? <Check className="size-3" /> : <Copy className="size-3" />}
+				</button>
+			)}
+		</span>
+	);
+};
+
+export default TruncatedAddress;