feat: generic items list (#1035)

app/assets/javascripts/Components/ContentListView/ListItemFlagIcons.tsx

@@ -0,0 +1,45 @@
+import { FunctionComponent } from 'preact'
+import { Icon } from '@/Components/Icon/Icon'
+import { ListableContentItem } from './Types/ListableContentItem'
+
+type Props = {
+  item: {
+    locked: ListableContentItem['locked']
+    trashed: ListableContentItem['trashed']
+    archived: ListableContentItem['archived']
+    pinned: ListableContentItem['pinned']
+  }
+  hasFiles?: boolean
+}
+
+export const ListItemFlagIcons: FunctionComponent<Props> = ({ item, hasFiles = false }) => {
+  return (
+    <div className="flex items-start p-4 pl-0 border-0 border-b-1 border-solid border-main">
+      {item.locked && (
+        <span className="flex items-center" title="Editing Disabled">
+          <Icon ariaLabel="Editing Disabled" type="pencil-off" className="sn-icon--small color-info" />
+        </span>
+      )}
+      {item.trashed && (
+        <span className="flex items-center ml-1.5" title="Trashed">
+          <Icon ariaLabel="Trashed" type="trash-filled" className="sn-icon--small color-danger" />
+        </span>
+      )}
+      {item.archived && (
+        <span className="flex items-center ml-1.5" title="Archived">
+          <Icon ariaLabel="Archived" type="archive" className="sn-icon--mid color-accessory-tint-3" />
+        </span>
+      )}
+      {item.pinned && (
+        <span className="flex items-center ml-1.5" title="Pinned">
+          <Icon ariaLabel="Pinned" type="pin-filled" className="sn-icon--small color-info" />
+        </span>
+      )}
+      {hasFiles && (
+        <span className="flex items-center ml-1.5" title="Files">
+          <Icon ariaLabel="Files" type="attachment-file" className="sn-icon--small color-info" />
+        </span>
+      )}
+    </div>
+  )
+}