index.tsx 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107
  1. 'use client'
  2. import { Fragment } from 'react'
  3. import { ChevronDownIcon, PlusIcon } from '@heroicons/react/24/solid'
  4. import { Menu, Transition } from '@headlessui/react'
  5. import { useRouter } from 'next/navigation'
  6. import Indicator from '../../indicator'
  7. import AppIcon from '@/app/components/base/app-icon'
  8. type NavItem = {
  9. id: string
  10. name: string
  11. link: string
  12. icon: string
  13. icon_background: string
  14. }
  15. export interface INavSelectorProps {
  16. navs: NavItem[]
  17. curNav?: Omit<NavItem, 'link'>
  18. createText: string
  19. onCreate: () => void
  20. }
  21. const itemClassName = `
  22. flex items-center w-full h-10 px-3 text-gray-700 text-[14px]
  23. rounded-lg font-normal hover:bg-gray-100 cursor-pointer
  24. `
  25. const NavSelector = ({ curNav, navs, createText, onCreate }: INavSelectorProps) => {
  26. const router = useRouter()
  27. return (
  28. <div className="">
  29. <Menu as="div" className="relative inline-block text-left">
  30. <div>
  31. <Menu.Button
  32. className="
  33. inline-flex items-center w-full h-7 justify-center
  34. rounded-[10px] pl-2 pr-2.5 text-[14px] font-semibold
  35. text-[#1C64F2] hover:bg-[#EBF5FF]
  36. "
  37. >
  38. {curNav?.name}
  39. <ChevronDownIcon
  40. className="w-3 h-3 ml-1"
  41. aria-hidden="true"
  42. />
  43. </Menu.Button>
  44. </div>
  45. <Transition
  46. as={Fragment}
  47. enter="transition ease-out duration-100"
  48. enterFrom="transform opacity-0 scale-95"
  49. enterTo="transform opacity-100 scale-100"
  50. leave="transition ease-in duration-75"
  51. leaveFrom="transform opacity-100 scale-100"
  52. leaveTo="transform opacity-0 scale-95"
  53. >
  54. <Menu.Items
  55. className="
  56. absolute -left-11 right-0 mt-1.5 w-60 max-w-80
  57. divide-y divide-gray-100 origin-top-right rounded-lg bg-white
  58. shadow-[0_10px_15px_-3px_rgba(0,0,0,0.1),0_4px_6px_rgba(0,0,0,0.05)]
  59. "
  60. >
  61. <div className="px-1 py-1 overflow-auto" style={{ maxHeight: '50vh' }}>
  62. {
  63. navs.map((nav) => (
  64. <Menu.Item key={nav.id}>
  65. <div className={itemClassName} onClick={() => router.push(nav.link)}>
  66. <div className='relative w-6 h-6 mr-2 bg-[#D5F5F6] rounded-[6px]'>
  67. <AppIcon size='tiny' icon={nav.icon} background={nav.icon_background}/>
  68. <div className='flex justify-center items-center absolute -right-0.5 -bottom-0.5 w-2.5 h-2.5 bg-white rounded'>
  69. <Indicator />
  70. </div>
  71. </div>
  72. {nav.name}
  73. </div>
  74. </Menu.Item>
  75. ))
  76. }
  77. </div>
  78. <Menu.Item>
  79. <div className='p-1' onClick={onCreate}>
  80. <div
  81. className='flex items-center h-12 rounded-lg cursor-pointer hover:bg-gray-100'
  82. >
  83. <div
  84. className='
  85. flex justify-center items-center
  86. ml-4 mr-2 w-6 h-6 bg-gray-100 rounded-[6px]
  87. border-[0.5px] border-gray-200 border-dashed
  88. '
  89. >
  90. <PlusIcon className='w-4 h-4 text-gray-500' />
  91. </div>
  92. <div className='font-normal text-[14px] text-gray-700'>{createText}</div>
  93. </div>
  94. </div>
  95. </Menu.Item>
  96. </Menu.Items>
  97. </Transition>
  98. </Menu>
  99. </div>
  100. )
  101. }
  102. export default NavSelector