Add Link component

[eric-net]

can create a single React component that integrates a command item with a link, using Headless UI's Menu component for a more customized approach. This example will include the Link, Cog6ToothIcon, and basic styling, all within one component.

import React from 'react';
import { Menu } from '@headlessui/react';
import Link from 'next/link'; // Assuming you're using Next.js
import { Cog6ToothIcon } from '@heroicons/react/outline';

const CommandLinkItem = () => {
  return (
    <Menu as="div" className="relative inline-block text-left">
      <Menu.Items className="absolute mt-2 w-56 origin-top-right bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
        <Menu.Item>
          {({ active }) => (
            <Link href="/settings">
              <a
                className={`${
                  active ? 'bg-blue-500 text-white' : 'text-gray-900'
                } group flex rounded-md items-center w-full px-2 py-2 text-sm`}
              >
                <Cog6ToothIcon className="w-5 h-5 mr-2" aria-hidden="true" />
                Settings
              </a>
            </Link>
          )}
        </Menu.Item>
        {/* Add more Menu.Item components as needed */}
      </Menu.Items>
    </Menu>
  );
};

export default CommandLinkItem;