diff --git a/src/components/common/ProfileTabPill.tsx b/src/components/common/ProfileTabPill.tsx new file mode 100644 index 00000000..d2799279 --- /dev/null +++ b/src/components/common/ProfileTabPill.tsx @@ -0,0 +1,97 @@ +import React from 'react'; +import { cva, type VariantProps } from 'class-variance-authority'; +import { cn } from '@/lib/utils'; + +const profileTabPillVariants = cva( + 'inline-flex items-center gap-1.5 rounded-full border px-3.5 py-1.5 text-xs font-semibold font-jakarta tracking-wide transition-all duration-200 outline-none focus-visible:ring-2 focus-visible:ring-amber-400/50 focus-visible:ring-offset-1 focus-visible:ring-offset-transparent', + { + variants: { + state: { + active: 'border-amber-400/30 bg-amber-400/15 text-white', + inactive: + 'border-white/10 bg-white/[0.06] text-white/60 hover:border-white/20 hover:bg-white/10 hover:text-white/80', + }, + }, + defaultVariants: { + state: 'inactive', + }, + } +); + +export interface ProfileTabPillProps + extends React.ButtonHTMLAttributes, + VariantProps { + isActive?: boolean; + icon?: React.ReactNode; +} + +const ProfileTabPill: React.FC = ({ + isActive = false, + icon, + className, + children, + ...props +}) => { + return ( + + ); +}; + +export default ProfileTabPill; + +export interface ProfileTabPillGroupTab { + label: string; + value: string; + icon?: React.ReactNode; +} + +export interface ProfileTabPillGroupProps { + tabs: ProfileTabPillGroupTab[]; + activeTab: string; + onTabChange: (value: string) => void; + className?: string; +} + +export const ProfileTabPillGroup: React.FC = ({ + tabs, + activeTab, + onTabChange, + className, +}) => { + return ( + + ); +}; diff --git a/src/pages/LandingPage.tsx b/src/pages/LandingPage.tsx index 4c690815..4c7f1cbc 100644 --- a/src/pages/LandingPage.tsx +++ b/src/pages/LandingPage.tsx @@ -13,6 +13,7 @@ import CompactSectionSubtitle from '@/components/common/CompactSectionSubtitle'; import CreatorProfileInfoGrid from '@/components/common/CreatorProfileInfoGrid'; import MiniStatChip from '@/components/common/MiniStatChip'; import MarketplaceSection from '@/components/common/MarketplaceSection'; +import { ProfileTabPillGroup } from '@/components/common/ProfileTabPill'; const FEATURED_CREATOR_FACTS = [ { label: 'Membership', value: 'Collectors Circle' }, @@ -101,6 +102,7 @@ function LandingPage() { const [creators, setCreators] = useState([]); const [isLoading, setIsLoading] = useState(true); const [searchQuery, setSearchQuery] = useState(''); + const [activeProfileTab, setActiveProfileTab] = useState('overview'); const trimmedSearchQuery = searchQuery.trim(); const hasInvalidSearchInput = /[^a-zA-Z0-9_\s-]/.test(trimmedSearchQuery); @@ -230,12 +232,23 @@ function LandingPage() { className="grid gap-8 rounded-[2rem] border border-white/10 bg-white/[0.045] p-6 shadow-[0_24px_80px_-60px_rgba(8,17,31,0.95)] backdrop-blur-sm md:p-8 lg:grid-cols-[1.1fr_0.9fr] lg:items-start" >
- - + + + Use the same subtitle pattern beneath headings, then drop repeated creator facts into one responsive grid that stays tidy on mobile and desktop.