Move common layout to separate component

sleepyfran · Sep 24, 2024 · 1b6b00a · 1b6b00a
1 parent 6859612
commit 1b6b00a
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 33 deletions.
diff --git a/packages/components/albums/src/album-detail.ts b/packages/components/albums/src/album-detail.ts
@@ -5,6 +5,7 @@ import { LitElement, html, css, nothing } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { type RouterLocation } from "@echo/components-router/index.routing";
 import { map } from "lit/directives/map.js";
+import "@echo/components-ui-atoms";
 import "./playable-album-cover";
 
 /**
@@ -16,16 +17,6 @@ export class AlbumDetail extends LitElement {
   album!: Album;
 
   static styles = css`
-    div.album-container {
-      display: flex;
-      height: 100vh;
-    }
-
-    div.track-list-container {
-      margin: 0 1rem;
-      width: 100%;
-    }
-
     ol.track-list {
       display: flex;
       flex-direction: column;
@@ -41,9 +32,7 @@ export class AlbumDetail extends LitElement {
     div.album-info {
       display: flex;
       flex-direction: column;
-      padding: 1rem 5rem;
       box-sizing: border-box;
-      max-width: 30rem;
     }
 
     div.album-info:after {
@@ -78,8 +67,8 @@ export class AlbumDetail extends LitElement {
 
   render() {
     return html`
-      <div key=${String(this.album.id)} class="album-container">
-        <div class="album-info">
+      <two-column-layout>
+        <div class="album-info" slot="left-column">
           <playable-album-cover
             .album=${this.album}
             detailsAlwaysVisible
@@ -95,13 +84,13 @@ export class AlbumDetail extends LitElement {
           </h5>
         </div>
 
-        <div class="track-list-container">
+        <div class="track-list-container" slot="right-column">
           <h2>Tracks</h2>
           <ol class="track-list">
             ${map(this.album.tracks, (track) => html`<li>${track.name}</li>`)}
           </ol>
         </div>
-      </div>
+      </two-column-layout>
     `;
   }
 }

diff --git a/packages/components/artists/src/artist-detail.ts b/packages/components/artists/src/artist-detail.ts
@@ -8,8 +8,9 @@ import { Option } from "effect";
 import { LitElement, html, css, nothing } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { type RouterLocation } from "@echo/components-router/index.routing";
-import "@echo/components-albums";
 import { map } from "lit/directives/map.js";
+import "@echo/components-albums";
+import "@echo/components-ui-atoms";
 
 /**
  * Component that displays the details of an artist.
@@ -20,16 +21,6 @@ export class ArtistDetail extends LitElement {
   details!: IArtistDetail;
 
   static styles = css`
-    div.artist-container {
-      display: flex;
-      height: 100vh;
-    }
-
-    div.album-grid-container {
-      margin: 0 1rem;
-      width: 100%;
-    }
-
     div.album-grid {
       display: grid;
       grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
@@ -45,9 +36,8 @@ export class ArtistDetail extends LitElement {
     div.artist-info {
       display: flex;
       flex-direction: column;
-      padding: 1rem 5rem;
       box-sizing: border-box;
-      max-width: 30rem;
+      width: 100%;
     }
 
     div.artist-info:after {
@@ -76,8 +66,8 @@ export class ArtistDetail extends LitElement {
 
   render() {
     return html`
-      <div key=${String(this.details.artist.id)} class="artist-container">
-        <div class="artist-info">
+      <two-column-layout>
+        <div class="artist-info" slot="left-column">
           ${Option.isSome(this.details.artist.image)
             ? html`
                 <img
@@ -90,7 +80,7 @@ export class ArtistDetail extends LitElement {
           <h1>${this.details.artist.name}</h1>
         </div>
 
-        <div class="album-grid-container">
+        <div class="album-grid-container" slot="right-column">
           <h2>Albums</h2>
           <div class="album-grid">
             ${map(
@@ -99,7 +89,7 @@ export class ArtistDetail extends LitElement {
             )}
           </div>
         </div>
-      </div>
+      </two-column-layout>
     `;
   }
 }

diff --git a/packages/components/ui-atoms/index.ts b/packages/components/ui-atoms/index.ts
@@ -1,4 +1,5 @@
 export * from "./src/button";
 export * from "./src/dialog";
 export * from "./src/hoverable";
+export * from "./src/layouts";
 export * from "./src/select";
diff --git a/packages/components/ui-atoms/src/layouts/index.ts b/packages/components/ui-atoms/src/layouts/index.ts
@@ -0,0 +1 @@
+export * from "./two-column.layout";
diff --git a/packages/components/ui-atoms/src/layouts/two-column.layout.ts b/packages/components/ui-atoms/src/layouts/two-column.layout.ts
@@ -0,0 +1,47 @@
+import { LitElement, css, html } from "lit";
+import { customElement } from "lit/decorators.js";
+
+/**
+ * Component that encapsulates a two-column layout.
+ */
+@customElement("two-column-layout")
+export class TwoColumnLayout extends LitElement {
+  static styles = css`
+    div.container {
+      display: flex;
+      height: 100vh;
+    }
+
+    .left-column {
+      display: flex;
+      flex-direction: column;
+      padding: 1rem 5rem;
+      box-sizing: border-box;
+      width: 40%;
+    }
+
+    .right-column {
+      padding-right: 5rem;
+      width: 80%;
+    }
+  `;
+
+  render() {
+    return html`
+      <div class="container">
+        <div class="left-column">
+          <slot name="left-column"></slot>
+        </div>
+        <div class="right-column">
+          <slot name="right-column"></slot>
+        </div>
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "two-column-layout": TwoColumnLayout;
+  }
+}