diff --git a/fix.ts b/fix.ts new file mode 100644 index 0000000..ec0861b --- /dev/null +++ b/fix.ts @@ -0,0 +1,269 @@ +export default function OpenCollaboratorAward() { + const [activeTab, setActiveTab] = useState<'all' | 'voted' | 'nominated'>('all'); + const [isNominatedModalOpen, setIsNominatedModalOpen] = useState(false); + + // Types based on Feishu Base structure + type Nominee = { + id: string; + name: string; + role: string; + project: string; + avatar: string; + votes: number; + description: string; + link: string; + status: 'active' | 'voted' | 'selected'; + }; + + const nominees: Nominee[] = [ + { + id: '1', + name: 'Alice Chen', + role: 'Ecosystem Architect', + project: 'Bazaar Core', + avatar: 'https://images.unsplash.com/photo-1573496691428-5e5478a7376b', + votes: 84, + description: 'Driven the backend expansion for the Open Source Bazaar, connecting disparate microservices seamlessly.', + link: 'https://github.com/alice-chen', + status: 'active', + }, + { + id: '2', + name: 'Marcus Volt', + role: 'UX Visionary', + project: 'Bazaar UI Kit', + avatar: 'https://images.unsplash.com/photo-1618044738323-d4931484280b', + votes: 62, + description: 'Redesigned the navigation logic to ensure fluid transitions between the main marketplace and specific articles.', + link: 'https://dribbble.com/marcusv', + status: 'voted', + }, + { + id: '3', + name: 'Sarah Code', + role: 'TypeScript Guru', + project: 'TypeScript Utils', + avatar: 'https://images.unsplash.com/photo-1494790108378-c18394e5f2ba', + votes: 91, + description: 'Created the utility functions that power the award voting mechanism itself, ensuring high performance.', + link: 'https://sarahcode.io', + status: 'active', + }, + ]; + + // Handler for the "Nominate" interaction + const handleNominate = (nominee: Nominee) => { + setSelectedNominee(nominee); + setIsNominatedModalOpen(true); + }; + + const handleVote = () => { + if (isNominatedModalOpen && selectedNominee) { + // Simulate API call to Feishu/Backend + console.log(`Nomined: ${selectedNominee.name}`); + setIsNominatedModalOpen(false); + } + }; + + return ( +
+ + {/* Header Section - Inspired by Hackathon Page */} +
+
+
+
+ +
+
+

Open Collaborator

+

Ecosystem Awards

+
+
+ + + + +
+
+ + {/* Main Content Area */} +
+ + {/* Intro Section */} +
+
+

+ Recognizing the Invisible Hands +

+

+ The Open Source Bazaar runs on the shoulders of giants. From backend refactors to UI polish, this year we honor the dedicated collaborators who make the ecosystem breathe. +

+
+ + {/* Stats Bar */} +
+
+ + 128 Active Nominees +
+
+ + 3 Categories +
+
+
+ + {/* Grid Layout */} +
+ {nominees.map((nominee) => ( +
{ e.currentTarget.classList.add('hover:-translate-y-2', 'hover:shadow-xl'); }} + onMouseLeave={(e) => { e.currentTarget.classList.remove('hover:-translate-y-2', 'hover:shadow-xl'); }} + className="group relative bg-white rounded-3xl p-8 border border-slate-100 shadow-sm hover:border-indigo-200 transition-all duration-300 cursor-pointer" + > +
+ +
+
+ {nominee.name} +
+
+ + {nominee.status} + +
+
+ +

{nominee.name}

+

{nominee.role}

+ +

+ {nominee.description} +

+ +
+
+ + {nominee.project} +
+ +
+
+ ))} +
+ + {/* "Nominate" Modal Overlay */} + {isNominatedModalOpen && selectedNominee && ( +
+
setIsNominatedModalOpen(false)} + /> +
+ + {/* Modal Header */} +
+
+

Nominating

+

{selectedNominee.name}

+
+ +
+ + {/* Modal Body */} +
+
+
+ {selectedNominee.name} +
+

{selectedNominee.name}

+

{selectedNominee.role}

+ +
+
+ +
+

{selectedNominee.description}

+
+ + {/* Form Inputs for specific Feishu fields if needed */} +
+
+ + +
+
+ +
+ +
+
+
+
+
+ )} + +
+ + {/* Footer - Subtle touch */} + +
+ ); +} \ No newline at end of file