frontend: design prototype

1 files changed, 62 insertions, 0 deletions

diff --git a/static/pages/settings/index.js b/static/pages/settings/index.js
new file mode 100644
index 0000000..da30ba7
--- /dev/null
+++ b/static/pages/settings/index.js
@@ -0,0 +1,62 @@
+import * as sfw from 'sfw';
+const { Div, Img } = sfw.element.native;
+
+import Editable from '../../widgets/editable/index.js';
+
+import icons from '../../icons/index.js';
+
+const css = await sfw.css(import.meta.url, './index.css');
+
+export default class SettingsView extends sfw.element.Container {
+	constructor() {
+		super({ css });
+		
+		this.onlogout = () => {};
+
+		this.body.append(
+			Div.new({
+				id: 'container',
+				children: [
+					Div.new({
+						id: 'profile-image',
+						children: [
+							Div.new({
+								id: 'image-container',
+								children: [
+									Img.new({
+										src: '/images/0010.jpg',
+									}),
+								]
+							}),
+							Div.new({
+								id: 'edit',
+								children: [ icons.edit ]
+							}),
+						]
+					}),
+					Editable.new({
+						title: 'Name',
+						value: 'Nathan Reiner'
+					}),
+					Editable.new({
+						title: 'Birthday',
+						type: 'date',
+						value: '2002-08-06',
+					}),
+					Div.new({
+						id: 'logout',
+						innerText: 'Log-out',
+						onclick: () => this.onlogout(),
+					}),
+					Div.new({
+						id: 'info-box',
+						children: [
+							Div.new({ id: 'name', innerText: 'Memora' }),
+							Div.new({ id: 'version', innerText: '0.0.1-unstable' }),
+						]
+					}),
+				]
+			})
+		)
+	}
+}