List Layout

import {
  ListLayout,
  ListLayoutHeader,
  ListLayoutNavigation,
  ListLayoutFilters,
  ListLayoutContent,
  ListLayoutFooter,
} from "@/components/ui/list-layout"

<ListLayout>
  <ListLayoutHeader
    title="Resource Name"
    description="Description of the resource or page"
    actions={<Button>Action</Button>}
  />
  <ListLayoutNavigation>
    <Tabs defaultValue="tab1">
      <TabsList>
        <TabsTrigger value="tab1">Tab 1</TabsTrigger>
        <TabsTrigger value="tab2">Tab 2</TabsTrigger>
      </TabsList>
    </Tabs>
  </ListLayoutNavigation>
  <ListLayoutFilters
    actions={<Button>Create</Button>}
  >
    <Input placeholder="Search..." />
    <Button variant="outline">Filter</Button>
  </ListLayoutFilters>
  <ListLayoutContent>
    {/* Your data table or content here */}
  </ListLayoutContent>
  <ListLayoutFooter>
    {/* Pagination or other footer content */}
  </ListLayoutFooter>
</ListLayout>

<ListLayout>
  <ListLayoutHeader
    title="Clusters"
    description="Manage your Redpanda clusters"
  />
  <ListLayoutContent>
    <div>Your content here</div>
  </ListLayoutContent>
</ListLayout>

<ListLayout>
  <ListLayoutHeader
    title="Resource Group"
    description="Manage your clusters and networks"
    actions={
      <>
        <Button variant="outline">Copy ID</Button>
        <Button>Edit</Button>
      </>
    }
  />
  <ListLayoutFilters
    actions={<Button>Create Cluster</Button>}
  >
    <Input placeholder="Filter clusters..." />
    <Button variant="outline">Status</Button>
    <Button variant="outline">Cloud</Button>
  </ListLayoutFilters>
  <ListLayoutContent>
    <DataTable />
  </ListLayoutContent>
</ListLayout>

<ListLayout>
  <ListLayoutHeader
    title="Resource Management"
    description="Manage your resources"
  />
  <ListLayoutNavigation>
    <Tabs defaultValue="clusters">
      <TabsList>
        <TabsTrigger value="clusters">Clusters</TabsTrigger>
        <TabsTrigger value="networks">Networks</TabsTrigger>
        <TabsTrigger value="settings">Settings</TabsTrigger>
      </TabsList>
    </Tabs>
  </ListLayoutNavigation>
  <ListLayoutContent>
    <TabsContent value="clusters">
      <ClustersTable />
    </TabsContent>
    <TabsContent value="networks">
      <NetworksTable />
    </TabsContent>
  </ListLayoutContent>
</ListLayout>