Toplist 2021 ✦ Official & Deluxe
if (loading) return <div>Loading toplist...</div>;
const query = SELECT items.id, items.name, items.category, items.thumbnail, COUNT(interactions.id) as score, '$metric' as metric_label FROM items LEFT JOIN interactions ON items.id = interactions.item_id AND interactions.type = $1 $timeCondition GROUP BY items.id ORDER BY score DESC LIMIT $2 ;
return ( <div className="max-w-2xl mx-auto p-4 bg-white rounded-xl shadow-md"> <div className="flex justify-between items-center mb-4"> <h2 className="text-2xl font-bold"></h2> <select value=timeframe onChange=(e) => setTimeframe(e.target.value) className="border rounded px-2 py-1" > <option value="day">Today</option> <option value="week">This Week</option> <option value="month">This Month</option> <option value="all">All Time</option> </select> </div> toplist
const timeCondition = interval ? AND i.created_at > NOW() - INTERVAL '$interval' : '';
<ol className="space-y-2"> items.map((item, index) => ( <li key=item.id className="flex items-center gap-4 p-2 hover:bg-gray-50 rounded"> <span className="font-bold text-lg w-8 text-center"> index === 0 ? '🥇' : index === 1 ? '🥈' : index === 2 ? '🥉' : `#$index + 1` </span> <img src=item.thumbnail alt=item.name className="w-12 h-12 object-cover rounded" /> <div className="flex-1"> <div className="font-semibold">item.name</div> <div className="text-sm text-gray-500">item.category</div> </div> <div className="text-right"> <div className="font-bold text-lg">item.score</div> <div className="text-xs text-gray-400">item.metricLabel</div> </div> </li> )) </ol> </div> ); ; if (loading) return <div>Loading toplist
export default Toplist; Database Schema (PostgreSQL example) CREATE TABLE items ( id SERIAL PRIMARY KEY, name VARCHAR(255) NOT NULL, category VARCHAR(100), thumbnail TEXT, created_at TIMESTAMP DEFAULT NOW() ); CREATE TABLE interactions ( id SERIAL PRIMARY KEY, item_id INT REFERENCES items(id) ON DELETE CASCADE, type VARCHAR(50) CHECK (type IN ('view', 'like', 'vote', 'purchase')), created_at TIMESTAMP DEFAULT NOW() ); API Endpoint app.get('/api/toplist', async (req, res) => const limit = 10, timeframe = 'week', metric = 'views' = req.query; let interval; switch(timeframe) case 'day': interval = '1 day'; break; case 'week': interval = '7 days'; break; case 'month': interval = '30 days'; break; default: interval = null;
A toplist displays ranked items based on a specific metric (e.g., most popular, highest rated, most viewed). 1. Frontend Component (React + Tailwind) import useState, useEffect from 'react'; const Toplist = ( endpoint, limit = 10, title ) => const [items, setItems] = useState([]); const [loading, setLoading] = useState(true); const [timeframe, setTimeframe] = useState('week'); '🥈' : index === 2
try const result = await db.query(query, [metric, parseInt(limit)]); res.json(result.rows); catch (err) res.status(500).json( error: err.message );