2 files changed, 37 insertions, 0 deletions
diff --git a/static/pages/image-viewer/index.css b/static/pages/image-viewer/index.css
new file mode 100644
index 0000000..6f53333
--- /dev/null
+++ b/static/pages/image-viewer/index.css
@@ -0,0 +1,17 @@
+
+#container {
+	width: 100%;
+	height: 100vh;
+	overflow-y: auto;
+	display: grid;
+	gap: 10px;
+	padding: 10px;
+}
+
+#container img {
+	margin: auto;
+	max-width: 700px;
+	width: 100%;
+	border-radius: var(--border-radius);
+	box-shadow: #223223aa 1px 1px 4px;
+}
diff --git a/static/pages/image-viewer/index.js b/static/pages/image-viewer/index.js
new file mode 100644
index 0000000..76d720f
--- /dev/null
+++ b/static/pages/image-viewer/index.js
@@ -0,0 +1,20 @@
+import * as sfw from 'sfw';
+const { Div, Img } = sfw.element.native;
+
+const css = await sfw.css(import.meta.url, './index.css')
+
+export default class ImageViewer extends sfw.element.Container {
+	#container
+
+	constructor() {
+		super({ css });
+
+		this.body.append(
+			this.#container = Div.new({ id: 'container' })
+		);
+	}
+
+	add(url) {
+		this.#container.append(Img.new({ src: url }));
+	}
+}