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 (
Install Extensions
@@ -21,6 +41,48 @@ export function Install() {
Featured Extensions
+
+
);
}
+
+function ExtensionList({ extensions }: { extensions: Extension[] }) {
+ return (
+ <>
+ {extensions.map(extension => )}
+ >
+ );
+}
+
+function ExtensionCard({ extension }: { extension: Extension }) {
+ const { name, version, downloads, description, author } = extension;
+
+ return (
+
+
+
+
+ {description}
+
+
+
+
+

{author}
+
+
+
+
+
+
+ );
+}