From 133c534469dcd93956179b2cd9f0018c3b635645 Mon Sep 17 00:00:00 2001
From: Alex Andreev <alex.andreev.email@gmail.com>
Date: Wed, 2 Feb 2022 16:12:26 +0300
Subject: [PATCH] Add ExtensionCard component

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
---
 .../components/+preferences/install.tsx       | 62 +++++++++++++++++++
 1 file changed, 62 insertions(+)

diff --git a/src/renderer/components/+preferences/install.tsx b/src/renderer/components/+preferences/install.tsx
index 27510b8b2a..3a388abe8d 100644
--- a/src/renderer/components/+preferences/install.tsx
+++ b/src/renderer/components/+preferences/install.tsx
@@ -4,10 +4,30 @@
  */
 
 import React from "react";
+import { Button } from "../button";
 import { Icon } from "../icon";
 import { SearchInput } from "../input";
 
+interface Extension {
+  id: string;
+  name: string;
+  description: string;
+  version: string;
+  downloads: number;
+  author: string;
+  iconUrl?: string;
+}
+
 export function Install() {
+  const extension: Extension = {
+    id: "resourcemap",
+    name: "Lens Resource Map",
+    description: "Lens Resource Map is an extension for Lens - The Kubernetes IDE that displays Kubernetes resources and their relations as a real-time force-directed graph.",
+    version: "1.0.1",
+    downloads: 12400,
+    author: "nevalla",
+  };
+
   return (
     <section>
       <h2><Icon material="add"/> Install Extensions</h2>
@@ -21,6 +41,48 @@ export function Install() {
       </div>
 
       <h2><Icon material="star"/> Featured Extensions</h2>
+
+      <ExtensionList extensions={[extension]}/>
     </section>
   );
 }
+
+function ExtensionList({ extensions }: { extensions: Extension[] }) {
+  return (
+    <>
+      {extensions.map(extension => <ExtensionCard key={extension.id} extension={extension}/>)}
+    </>
+  );
+}
+
+function ExtensionCard({ extension }: { extension: Extension }) {
+  const { name, version, downloads, description, author } = extension;
+
+  return (
+    <div className="ExtensionCard">
+      <div className="head">
+        <div className="nameAndVersion">
+          <div className="name">{name}</div>
+          <div className="version">{version}</div>
+        </div>
+
+        <div className="downloads">
+          <Icon material="cloud_download"/> {downloads}
+        </div>
+      </div>
+
+      <div className="description">
+        {description}
+      </div>
+
+      <div className="footer">
+        <div className="author">
+          <img src="https://avatars.githubusercontent.com/u/455844?v=4"/> {author}
+        </div>
+        <div className="install">
+          <Button primary><Icon material="cloud_download"/> Install</Button>
+        </div>
+      </div>
+    </div>
+  );
+}