dify/web/app/components/app/app-access-control/access-control-item.tsx

'use client'
import type { FC, PropsWithChildren } from 'react'
import type { AccessMode } from '@/models/access-control'
import useAccessControlStore from '@/context/access-control-store'

type AccessControlItemProps = PropsWithChildren<{
  type: AccessMode
}>

const AccessControlItem: FC<AccessControlItemProps> = ({ type, children }) => {
  const currentMenu = useAccessControlStore(s => s.currentMenu)
  const setCurrentMenu = useAccessControlStore(s => s.setCurrentMenu)
  if (currentMenu !== type) {
    return (
      <div
        className="cursor-pointer radius-lg border
      border-components-option-card-option-border bg-components-option-card-option-bg
      hover:border-components-option-card-option-border-hover hover:bg-components-option-card-option-bg-hover"
        onClick={() => setCurrentMenu(type)}
      >
        {children}
      </div>
    )
  }

  return (
    <div className="radius-lg border-[1.5px]
  border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg shadow-sm"
    >
      {children}
    </div>
  )
}

AccessControlItem.displayName = 'AccessControlItem'

export default AccessControlItem