67 lines
1.4 KiB
TypeScript
67 lines
1.4 KiB
TypeScript
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>
|
|
`;
|
|
}
|
|
}
|