dify

dify/web/app/components/datasets/settings/permission-selector/permission-item.tsx

@@ -0,0 +1,31 @@
+import React from 'react'
+import { RiCheckLine } from '@remixicon/react'
+
+type PermissionItemProps = {
+  leftIcon: React.ReactNode
+  text: string
+  onClick: () => void
+  isSelected: boolean
+}
+
+const PermissionItem = ({
+  leftIcon,
+  text,
+  onClick,
+  isSelected,
+}: PermissionItemProps) => {
+  return (
+    <div
+      className='flex cursor-pointer items-center gap-x-1 rounded-lg px-2 py-1 hover:bg-state-base-hover'
+      onClick={onClick}
+    >
+      {leftIcon}
+      <div className='system-md-regular grow px-1 text-text-secondary'>
+        {text}
+      </div>
+      {isSelected && <RiCheckLine className='size-4 text-text-accent' />}
+    </div>
+  )
+}
+
+export default React.memo(PermissionItem)