I want to implement the above screenshot. When I click on the country dropdown, the default country name above plus the flag changes . So far I have I have been using headless UI. The problem is that I dont know how to implement the logic in menu-item to change the default country and flag when dropdown is clicked, also the selectedactive country should be checked .Below is my code ,someone help`
import { Fragment, useState, useMemo, useEffect } from "react";
import Sidebar from "./sidebar";
import Image from "next/image";
import Link from "next/link";
import { Menu, Transition ,RadioGroup} from "@headlessui/react";
import { ChevronDownIcon } from "@heroicons/react/20/solid";
import { signOut, useSession } from "next-auth/react";
function classNames(...classes: any[]) {
return classes.filter(Boolean).join(" ");
}
const logout = () => {
signOut();
};
const LayoutContent = ({
children,
sidebar,
}: {
children: any;
sidebar: any;
}) => {
const { data: Session } = useSession();
const [active,setActive] = useState(' ')
return (
<>
<main
className={`max-w-screen-3xl mx-auto flex flex-col ${
sidebar ? "lg:pl-20" : "lg:pl-80"
}`}
>
<div className="pl-0 lg:mx-1">
<nav className="mx-1 lg:mx-1 relative w-full flex flex-wrap items-center justify-end py-1 text-gray-800 ">
<Menu as="div" className="relative inline-block text-left mr-5">
<div>
<Menu.Button className="inline-flex w-full items-center bg-white px-4 py-2 text-sm font-medium text-gray-700 ">
<Image
width={35}
height={35}
className="px-8 py-2.5"
src="/KE.svg"
alt="actions"
/>
<span className="ml-4 text-gray-700 text-[13px]">Kenya</span>
<ChevronDownIcon
className="-mr-1 ml-2 h-7 w-7"
aria-hidden="true"
/>
</Menu.Button>
</div>
<Transition
as={Fragment}
enter="transition ease-out duration-100"
enterFrom="transform opacity-0 scale-95"
enterTo="transform opacity-100 scale-100"
leave="transition ease-in duration-75"
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
>
<Menu.Items className="absolute right-0 z-10 mt-2 w-56 h-48 bg-white origin-top-right rounded-lg shadow-[0px_0px_28px_rgba(0,0,0,0.08)] ring-opacity-5 focus:outline-none">
<div className="py-1">
<span className="text-gray-500 ml-4 ">
Select Country
</span>
<Menu.Item>
{({ active}) => (
<a
href="#"
className={classNames(
active
? " flex items-center text-gray bg-[#FDE6D4] rounded mb-3 ml-4 mr-4 mt-2"
: "flex items-center text-gray-500 bg-gray-100 rounded mb-3 ml-4 mr-4 mt-2 ",
"block px-4 py-2 text-sm"
)}
>
<Image
width={25}
height={25}
className="px-8 py-2.5"
src="/KE.svg"
alt="actions"
/>
<span className="ml-4 text-[13px] ">Kenya</span>
</a>
)}
</Menu.Item>
<Menu.Item>
{({ active }) => (
<a
href="#"
className={classNames(
active
? " flex items-center text-gray bg-[#FDE6D4] rounded mb-3 ml-4 mr-4"
: "flex items-center text-gray-500 bg-gray-100 rounded mb-3 ml-4 mr-4 ",
"block px-4 py-2 text-sm"
)}
>
<Image
width={25}
height={25}
className="px-8 py-2.5"
src="/TZ (2).svg"
alt="actions"
/>
<span className="ml-4 text-[13px]">Tanzania</span>
</a>
)}
</Menu.Item>
<Menu.Item>
{({ active}) => (
<a
href="#"
className={classNames(
active
? " flex items-center text-gray bg-[#FDE6D4] rounded ml-4 mr-4"
: " flex items-center text-gray-500 bg-gray-100 rounded ml-4 mr-4",
"block px-4 py-2 text-sm"
)}
>
<Image
width={25}
height={25}
className="px-8 py-2.5"
src="/MZ.svg"
alt="actions"
/>
<span className="ml-4 text-[13px]">Mozambique</span>
</a>
)}
</Menu.Item>
</div>
</Menu.Items>
</Transition>
</Menu>
<p>
<span className="px-0 py-2 text-gray-700 font-medium text-xs focus:outline-none focus:ring-0 active:shadow-lg transition duration-150 ease-in-out flex items-center">
<Image
width={25}
height={25}
className="p-2 rounded-full"
src="/rectangle.svg"
alt="Profile"
/>
</span>
</p>
<p>
<span className="px-1 py-2 text-gray-700 font-medium text-xs focus:outline-none focus:ring-0 active:shadow-lg transition duration-150 ease-in-out flex items-center">
{Session ? <p>{Session!.user!.name}</p> : "..."}
</span>
</p>
<p>
<span className="px-0 py-2 text-gray-700 font-medium text-xs focus:outline-none focus:ring-0 active:shadow-lg transition duration-150 ease-in-out flex items-center mr-12">
<Image
width={13}
height={13}
className="p-2 rounded-full"
src="/dropdown.svg"
alt="Profile"
/>
</span>
</p>
</nav>
{children}
</div>
</main>
</>
);
};
export default LayoutContent;
`
I just implement headless UI without logic for updating the country and flag.What other options do I have ?
