Cluster Dropdown

1'use client';
2 
3import * as React from 'react';
4import { SolanaClusterId, useWalletUi, useWalletUiCluster } from '@wallet-ui/react';
5import { Button } from "@/registry/wallet-ui/ui/button"
6import {
7  DropdownMenu,
8  DropdownMenuContent,
9  DropdownMenuRadioGroup,
10  DropdownMenuRadioItem,
11  DropdownMenuTrigger,
12} from '@/registry/wallet-ui/ui/dropdown-menu';
13 
14export function ClusterDropdown() {
15  const { cluster } = useWalletUi();
16  const { clusters, setCluster } = useWalletUiCluster();
17 
18  return (
19    <DropdownMenu>
20      <DropdownMenuTrigger asChild>
21        <Button variant="outline">{cluster.label}</Button>
22      </DropdownMenuTrigger>
23      <DropdownMenuContent className="w-56">
24        <DropdownMenuRadioGroup
25          value={cluster.id}
26          onValueChange={cluster => setCluster(cluster as SolanaClusterId)}
27        >
28          {clusters.map(cluster => {
29            return (
30              <DropdownMenuRadioItem key={cluster.id} value={cluster.id}>
31                {cluster.label}
32              </DropdownMenuRadioItem>
33            );
34          })}
35        </DropdownMenuRadioGroup>
36      </DropdownMenuContent>
37    </DropdownMenu>
38  );
39}