diff --git a/src/app/u/[username]/page.tsx b/src/app/u/[username]/page.tsx new file mode 100644 index 00000000..a765d454 --- /dev/null +++ b/src/app/u/[username]/page.tsx @@ -0,0 +1,63 @@ +import { use } from 'react'; +import Link from 'next/link'; +import { CopyProfileLinkButton } from '@/components/profile/CopyProfileLinkButton'; +import { User } from 'lucide-react'; + +export default function CreatorProfilePage({ + params, +}: { + params: Promise<{ username: string }>; +}) { + const { username } = use(params); + + // TODO: Fetch creator profile data based on username + // This would typically come from an API or database query + + return ( +
+
+ + ← Back to home + + + {/* Profile Header Card */} +
+
+
+
+ +
+
+

+ {username} +

+

+ Creator Profile +

+
+
+
+ + {/* Copy Link Button */} +
+ +
+
+ + {/* Profile Content Placeholder */} +
+

+ Profile Details +

+

+ Creator profile content will be displayed here. +

+
+
+
+ ); +} diff --git a/src/components/profile/CopyProfileLinkButton.tsx b/src/components/profile/CopyProfileLinkButton.tsx new file mode 100644 index 00000000..5bd777b3 --- /dev/null +++ b/src/components/profile/CopyProfileLinkButton.tsx @@ -0,0 +1,66 @@ +'use client'; + +import React, { useState } from 'react'; +import { Link2, Check } from 'lucide-react'; +import { Button } from '@/components/ui/button'; +import { toast } from 'sonner'; +import { logger } from '@/utils/logger'; + +interface CopyProfileLinkButtonProps { + username: string; + variant?: 'default' | 'outline' | 'ghost'; + size?: 'default' | 'sm' | 'lg'; + className?: string; +} + +export const CopyProfileLinkButton: React.FC = ({ + username, + variant = 'outline', + size = 'default', + className = '', +}) => { + const [copied, setCopied] = useState(false); + + const handleCopyLink = async () => { + try { + // Check if clipboard API is available + if (!navigator.clipboard) { + throw new Error('Clipboard API not available'); + } + + const profileUrl = `${window.location.origin}/u/${username}`; + await navigator.clipboard.writeText(profileUrl); + + setCopied(true); + toast.success('Profile link copied to clipboard!'); + + // Reset copied state after 2 seconds + setTimeout(() => setCopied(false), 2000); + } catch (error) { + logger.error('Error copying profile link:', error); + toast.error('Failed to copy profile link'); + } + }; + + return ( + + ); +};