render list

public/app/features/plugins/PluginList.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import classNames from 'classnames/bind';
+import PluginListItem from './PluginListItem';
+
+export default function PluginList({ plugins, layout }) {
+  const listStyle = classNames({
+    'card-section': true,
+    'card-list-layout-grid': layout === 'grid',
+    'card-list-layout-list': layout === 'list',
+  });
+
+  return (
+    <section className={listStyle}>
+      <ol className="card-list">
+        {plugins.map((plugin, index) => {
+          return <PluginListItem plugin={plugin} key={`${plugin.name}-${index}`} />;
+        })}
+      </ol>
+    </section>
+  );
+}