Initial version

src/components/AppGrid.ts

@@ -0,0 +1,67 @@
+import { css, html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators.js";
+
+import "@components/AppIcon";
+
+@customElement("arx-app-grid")
+export class AppGrid extends LitElement {
+  @property()
+  apps: {
+    icon: string | undefined;
+    color: string;
+    href: string;
+    name: string;
+  }[] = [];
+
+  static override styles = [
+    css`
+      .app-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
+        gap: 20px;
+        padding: 30px;
+        width: minmax(800px, 100cqw);
+        margin-top: 10px;
+      }
+
+      @media (min-width: 1024px) {
+        .app-grid {
+          width: 500px;
+        }
+      }
+
+      @media (max-width: 768px) {
+        .app-grid {
+          grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
+          gap: 15px;
+          padding: 20px;
+        }
+      }
+
+      @media (max-width: 480px) {
+        .app-grid {
+          grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
+          gap: 10px;
+          padding: 15px;
+        }
+      }
+    `,
+  ];
+
+  override render() {
+    return html`
+      <div class="app-grid">
+        ${this.apps.map(
+          (app) => html`
+            <arx-app-icon
+              .icon=${app.icon}
+              .color=${app.color}
+              .href=${app.href}
+              .name=${app.name}
+            ></arx-app-icon>
+          `
+        )}
+      </div>
+    `;
+  }
+}