⚡ Adds basic fetch

- 🐛 cors
- 🐛 `.env.js`/`ENV`

src/components/c-episode-list-card/index.css.ts

@@ -0,0 +1,28 @@
+import { css } from "lit";
+
+export const styles = css`
+	:host {
+		list-style: none;
+		padding: 1rem;
+		border-bottom: 1px solid #eee;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+	}
+
+	.info {
+		display: flex;
+		flex-direction: column;
+	}
+
+	.title {
+		font-weight: bold;
+		text-decoration: none;
+		color: var(--primary-color, #007bff);
+	}
+
+	time {
+		font-size: 0.85rem;
+		color: #666;
+	}
+`;

src/components/c-episode-list-card/index.test.ts

@@ -0,0 +1,30 @@
+import { html } from "lit";
+import { fixture, expect } from "@open-wc/testing";
+import { type Episode } from "@/api/episodes.js";
+import "./index.js";
+
+describe("EpisodeListItem", () => {
+	const mockEpisode: Episode = {
+		id: "1",
+		title: "Test Episode",
+		published: "2023-01-01T00:00:00Z",
+		audio_url: "http://example.com/audio.mp3",
+	};
+
+	it("renders correctly with episode data", async () => {
+		const el = await fixture(html`<episode-list-card .episode=${mockEpisode}></episode-list-card>`);
+		const title = el.shadowRoot!.querySelector(".title");
+		const time = el.shadowRoot!.querySelector("time");
+		const audioLink = el.shadowRoot!.querySelector(".audio-link");
+
+		expect(title?.textContent).to.equal("Test Episode");
+		expect(time?.textContent).to.contain("2023");
+		expect(audioLink).to.exist;
+		expect(audioLink?.getAttribute("href")).to.equal("http://example.com/audio.mp3");
+	});
+
+	it("renders empty when no episode is provided", async () => {
+		const el = await fixture(html`<episode-list-card></episode-list-card>`);
+		expect(el.shadowRoot!.innerHTML.trim()).to.equal("");
+	});
+});

src/components/c-episode-list-card/index.ts

@@ -0,0 +1,23 @@
+import { LitElement, html } from "lit";
+import { property, customElement } from "lit/decorators.js";
+import { type Episode } from "@/api/episodes.js";
+import { styles } from "./index.css.js";
+
+@customElement("c-episode-list-card")
+export class EpisodeListCard extends LitElement {
+	static override styles = styles;
+
+	@property({ type: Object }) episode!: Episode;
+
+	override render() {
+		if (!this.episode) return html``;
+		return html`
+			<a href="/episodes/${this.episode.id}">
+				<div class="info">
+					${this.episode.title}
+					<time datetime="${this.episode.published}">${new Date(this.episode.published).toLocaleDateString()}</time>
+				</div>
+			</a>
+		`;
+	}
+}