1  import Link from 'next/link'
 2  
 3  interface TrendingTopic {
 4    id: string
 5    name: string
 6    tweetCount: number
 7  }
 8  
 9  const trendingTopics: TrendingTopic[] = [
10    { id: '1', name: 'JavaScript', tweetCount: 340000 },
11    { id: '2', name: 'React', tweetCount: 275000 },
12    { id: '3', name: 'NextJS', tweetCount: 180000 },
13    { id: '4', name: 'TailwindCSS', tweetCount: 120000 },
14    { id: '5', name: 'TypeScript', tweetCount: 95000 },
15  ]
16  
17  export function TrendingTopics() {
18    return (
19      <div className="bg-gray-50 rounded-xl p-4">
20        <h2 className="text-xl font-bold mb-4">Trends for you</h2>
21        <ul>
22          {trendingTopics.map((topic) => (
23            <li key={topic.id} className="mb-4">
24              <Link href={`/search?q=${encodeURIComponent(topic.name)}`} className="block hover:bg-gray-100 rounded p-2">
25                <div className="font-bold">{topic.name}</div>
26                <div className="text-sm text-gray-500">{topic.tweetCount.toLocaleString()} Tweets</div>
27              </Link>
28            </li>
29          ))}
30        </ul>
31      </div>
32    )
33  }
34