1  import { Sidebar } from '@/components/Sidebar'
 2  import { ListItem } from '@/components/ListItem'
 3  import { CreateListForm } from '@/components/CreateListForm'
 4  
 5  export default function ListsPage() {
 6    const lists = [
 7      { id: '1', name: 'Tech News', description: 'Latest updates in technology', memberCount: 1250, isOwner: true },
 8      { id: '2', name: 'Funny Tweets', description: 'Tweets that make you laugh', memberCount: 3500, isOwner: false },
 9      { id: '3', name: 'Inspirational Quotes', description: 'Daily motivation', memberCount: 5000, isOwner: true },
10      { id: '4', name: 'Crypto Updates', description: 'Latest in cryptocurrency', memberCount: 2000, isOwner: false },
11    ]
12  
13    return (
14      <>
15        <aside className="md:col-span-1">
16          <Sidebar />
17        </aside>
18        <main className="md:col-span-2 border-x">
19          <div className="p-4 border-b flex justify-between items-center">
20            <h2 className="text-xl font-bold">Lists</h2>
21            <CreateListForm />
22          </div>
23          <div>
24            {lists.map((list) => (
25              <ListItem key={list.id} {...list} />
26            ))}
27          </div>
28        </main>
29        <aside className="hidden md:block md:col-span-1">
30          {/* You can add a "Who to follow" section or trending topics here */}
31        </aside>
32      </>
33    )
34  }
35