import React, { useState, useMemo } from ‘react’; import { Search, MapPin, Award, ChevronDown, ChevronUp } from ‘lucide-react’; // — Data: Top 20 World Universities (QS World University Rankings 2024) — // Note: In a real-world application, this data would likely be fetched from an API. const universities = [ { rank: 1, name: ‘Massachusetts Institute of Technology (MIT)’, country: ‘United States’, country_code: ‘US’, description: ‘A world leader in science and technology, known for its innovative research and entrepreneurial culture.’, logo: ‘https://placehold.co/100×100/1e293b/ffffff?text=MIT’ }, { rank: 2, name: ‘University of Cambridge’, country: ‘United Kingdom’, country_code: ‘GB’, description: ‘One of the oldest and most prestigious universities, renowned for its excellence in humanities and sciences.’, logo: ‘https://placehold.co/100×100/1e293b/ffffff?text=Cambridge’ }, { rank: 3, name: ‘University of Oxford’, country: ‘United Kingdom’, country_code: ‘GB’, description: ‘The oldest university in the English-speaking world, with a rich history and a vast network of distinguished alumni.’, logo: ‘https://placehold.co/100×100/1e293b/ffffff?text=Oxford’ }, { rank: 4, name: ‘Harvard University’, country: ‘United States’, country_code: ‘US’, description: ‘A private Ivy League research university with a global reputation for academic excellence and influence.’, logo: ‘https://placehold.co/100×100/1e293b/ffffff?text=Harvard’ }, { rank: 5, name: ‘Stanford University’, country: ‘United States’, country_code: ‘US’, description: ‘Located in the heart of Silicon Valley, Stanford is a hub for innovation, technology, and entrepreneurship.’, logo: ‘https://placehold.co/100×100/1e293b/ffffff?text=Stanford’ }, { rank: 6, name: ‘Imperial College London’, country: ‘United Kingdom’, country_code: ‘GB’, description: ‘A public research university specializing in science, engineering, medicine, and business.’, logo: ‘https://placehold.co/100×100/1e293b/ffffff?text=Imperial’ }, { rank: 7, name: ‘ETH Zurich’, country: ‘Switzerland’, country_code: ‘CH’, description: ‘A leading university for science and technology, with numerous Nobel laureates among its faculty and alumni.’, logo: ‘https://placehold.co/100×100/1e293b/ffffff?text=ETH+Zurich’ }, { rank: 8, name: ‘National University of Singapore (NUS)’, country: ‘Singapore’, country_code: ‘SG’, description: ‘A comprehensive research university, considered one of the best in Asia and the world.’, logo: ‘https://placehold.co/100×100/1e293b/ffffff?text=NUS’ }, { rank: 9, name: ‘UCL (University College London)’, country: ‘United Kingdom’, country_code: ‘GB’, description: ‘A multidisciplinary university in London, known for its progressive approach to education and research.’, logo: ‘https://placehold.co/100×100/1e293b/ffffff?text=UCL’ }, { rank: 10, name: ‘University of California, Berkeley (UCB)’, country: ‘United States’, country_code: ‘US’, description: ‘A top public university known for its activism, research contributions, and strong academic programs.’, logo: ‘https://placehold.co/100×100/1e293b/ffffff?text=UCB’ }, { rank: 11, name: ‘University of Chicago’, country: ‘United States’, country_code: ‘US’, description: ‘A private research university known for its rigorous intellectual environment and influential schools of thought.’, logo: ‘https://placehold.co/100×100/1e293b/ffffff?text=UChicago’ }, { rank: 12, name: ‘University of Pennsylvania’, country: ‘United States’, country_code: ‘US’, description: ‘An Ivy League university with a strong focus on interdisciplinary education, home to the Wharton School.’, logo: ‘https://placehold.co/100×100/1e293b/ffffff?text=UPenn’ }, { rank: 13, name: ‘Cornell University’, country: ‘United States’, country_code: ‘US’, description: ‘An Ivy League university with a unique mission as a land-grant institution, excelling in various fields.’, logo: ‘https://placehold.co/100×100/1e293b/ffffff?text=Cornell’ }, { rank: 14, name: ‘The University of Melbourne’, country: ‘Australia’, country_code: ‘AU’, description: ‘A leading Australian university, highly regarded for its research, learning, and teaching quality.’, logo: ‘https://placehold.co/100×100/1e293b/ffffff?text=Melbourne’ }, { rank: 15, name: ‘California Institute of Technology (Caltech)’, country: ‘United States’, country_code: ‘US’, description: ‘A small but powerful private research university focused on science and engineering.’, logo: ‘https://placehold.co/100×100/1e293b/ffffff?text=Caltech’ }, { rank: 16, name: ‘Yale University’, country: ‘United States’, country_code: ‘US’, description: ‘A private Ivy League research university with a strong emphasis on liberal arts education.’, logo: ‘https://placehold.co/100×100/1e293b/ffffff?text=Yale’ }, { rank: 17, name: ‘Peking University’, country: ‘China’, country_code: ‘CN’, description: ‘A major Chinese research university and a member of the elite C9 League, often ranked as the best in China.’, logo: ‘https://placehold.co/100×100/1e293b/ffffff?text=Peking’ }, { rank: 17, name: ‘Princeton University’, country: ‘United States’, country_code: ‘US’, description: ‘An Ivy League university known for its commitment to undergraduate teaching and its beautiful campus.’, logo: ‘https://placehold.co/100×100/1e293b/ffffff?text=Princeton’ }, { rank: 19, name: ‘The University of New South Wales (UNSW Sydney)’, country: ‘Australia’, country_code: ‘AU’, description: ‘A leading Australian university with a strong focus on research and innovation.’, logo: ‘https://placehold.co/100×100/1e293b/ffffff?text=UNSW’ }, { rank: 19, name: ‘The University of Sydney’, country: ‘Australia’, country_code: ‘AU’, description: ‘Australia\’s first university, known for its beautiful campus and comprehensive range of disciplines.’, logo: ‘https://placehold.co/100×100/1e293b/ffffff?text=Sydney’ }, ]; // — Sub-Components — // Header Component const AppHeader = () => (

World’s Top Universities

QS World University Rankings 2024

); // Search and Filter Controls Component const FilterControls = ({ searchTerm, setSearchTerm, setSortConfig, sortConfig, countryFilter, setCountryFilter }) => { const countries = useMemo(() => […new Set(universities.map(u => u.country))].sort(), []); const handleSort = (key) => { let direction = ‘ascending’; if (sortConfig.key === key && sortConfig.direction === ‘ascending’) { direction = ‘descending’; } setSortConfig({ key, direction }); }; const SortIcon = ({ columnKey }) => { if (sortConfig.key !== columnKey) return null; return sortConfig.direction === ‘ascending’ ? : ; }; return (

{/* Search Input */}

setSearchTerm(e.target.value)} className=”w-full bg-slate-700/50 border border-slate-600 rounded-md pl-10 pr-4 py-2 text-white placeholder-slate-400 focus:ring-2 focus:ring-purple-500 focus:outline-none transition-all” />

{/* Country Filter Dropdown */}

setCountryFilter(e.target.value)} className=”w-full bg-slate-700/50 border border-slate-600 rounded-md pl-10 pr-4 py-2 text-white appearance-none focus:ring-2 focus:ring-purple-500 focus:outline-none transition-all” > All Countries {countries.map(country => ( {country} ))}

{/* Sorting Buttons */}

Sort by: handleSort(‘rank’)} className=”flex items-center px-3 py-1 bg-slate-700/60 hover:bg-slate-700 rounded-md text-sm text-slate-200 transition-colors”> Rank handleSort(‘name’)} className=”flex items-center px-3 py-1 bg-slate-700/60 hover:bg-slate-700 rounded-md text-sm text-slate-200 transition-colors”> Name

); }; // University Card Component const UniversityCard = ({ university }) => (

{ e.target.onerror = null; e.target.src=’https://placehold.co/100×100/1e293b/ffffff?text=Error’; }} />

{university.name}

{university.country}

#{university.rank}

{university.description}

); // Main App Component export default function App() { const [searchTerm, setSearchTerm] = useState(”); const [sortConfig, setSortConfig] = useState({ key: ‘rank’, direction: ‘ascending’ }); const [countryFilter, setCountryFilter] = useState(”); // Memoized filtering and sorting logic const filteredAndSortedUniversities = useMemo(() => { let filtered = universities.filter(uni => uni.name.toLowerCase().includes(searchTerm.toLowerCase()) && (countryFilter === ” || uni.country === countryFilter) ); filtered.sort((a, b) => { if (a[sortConfig.key] < b[sortConfig.key]) { return sortConfig.direction === 'ascending' ? -1 : 1; } if (a[sortConfig.key] > b[sortConfig.key]) { return sortConfig.direction === ‘ascending’ ? 1 : -1; } return 0; }); return filtered; }, [searchTerm, sortConfig, countryFilter]); return (

{filteredAndSortedUniversities.length > 0 ? (

{filteredAndSortedUniversities.map((uni) => ( ))}

) : (

No universities found matching your criteria.

)}

); }

Uncategorized