Add ExtensionPage

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

src/common/routes/preferences.ts

@@ -42,6 +42,10 @@ export const installRoute: RouteProps = {
   path: `${preferencesRoute.path}/install`,
 };
 
+export const extensionPageRoute: RouteProps = {
+  path: `${preferencesRoute.path}/extension/:extensionId?`,
+};
+
 export const preferencesURL = buildURL(preferencesRoute.path);
 export const appURL = buildURL(appRoute.path);
 export const proxyURL = buildURL(proxyRoute.path);
@@ -51,3 +55,4 @@ export const telemetryURL = buildURL(telemetryRoute.path);
 export const extensionURL = buildURL(extensionRoute.path);
 export const terminalURL = buildURL(terminalRoute.path);
 export const installURL = buildURL(installRoute.path);
+export const extensionPageURL = buildURL<{ extensionId?: string }>(extensionPageRoute.path);

src/renderer/components/+preferences/extension-page.module.scss

@@ -0,0 +1,32 @@
+.contents {
+  display: grid;
+  grid-template-columns: 1fr 30%;
+}
+
+.metadata {
+  h3 {
+    font-size: 1.5rem;
+    margin: 0;
+    padding: 0;
+  }
+
+  .links {
+    display: flex;
+    gap: 8px;
+    flex-wrap: wrap;
+
+    a {
+      border: 1px solid rgb(72, 72, 72);
+      padding: 4px 6px;
+      border-radius: 3px;
+      font-size: 13px;
+      color: #333;
+      margin: 0 6px 4px 0;
+      display: inline-block;
+
+      &:hover {
+        background-color: var(--blue);
+      }
+    }
+  }
+}

src/renderer/components/+preferences/extension-page.tsx

@@ -0,0 +1,63 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import styles from "./extension-page.module.scss";
+
+import React, { useEffect, useState } from "react";
+import { Extension, getExtensionById } from "./extension-list";
+import { Spinner } from "../spinner";
+import { ExtensionCard } from "./extension-card";
+import { useParams } from "react-router";
+
+export function ExtensionPage() {
+  const [extension, setExtension] = useState<Extension>(null);
+  const { id } = useParams<{ id?: string }>();
+
+  useEffect(() => {
+    async function fetchExtension() {
+      try {
+        const response = await getExtensionById(id);
+
+        setExtension(response);
+      } catch (error) {
+        console.error(error);
+      }
+    }
+
+    fetchExtension();
+  }, []);
+
+  if (!extension) {
+    return <Spinner/>;
+  }
+
+  return (
+    <section className="page">
+      <ExtensionCard extension={extension}/>
+      <hr />
+      <div className={styles.contents}>
+        <div className="github">
+          GitHub description
+        </div>
+        <div className="metadata">
+          <h3 className="mb-5">Categories</h3>
+          <div className="links">
+            {extension.category.map(category => (
+              <a key={`category-${category.id}`} href="#">{category.name}</a>
+            ))}
+          </div>
+          <h3 className="mb-5 mtp-5">Tags</h3>
+          <div className="links">
+            {extension.tags.map(tag => (
+              <a key={`tag-${tag.id}`} href="#">{tag.name}</a>
+            ))}
+          </div>
+          <h3 className="mb-5 mtp-5">More Info</h3>
+          <div className="moreInfo"></div>
+        </div>
+      </div>
+    </section>
+  );
+}