feat(frontend): user component

paulrobertlloyd · paulrobertlloyd · commit 68a4e2fe5abe · 2024-12-25T22:42:05.000Z
diff --git a/helpers/frontend/views/frontend-components.njk b/helpers/frontend/views/frontend-components.njk
@@ -505,6 +505,17 @@
   items: ["fee", "fi", "fo", "fum"]
 }) }}
 
+<h2><code>user</code></h2>
+
+{{ user({
+  avatar: {
+    src: "/assets/app-icon-180-any.png"
+  },
+  name: "Indiekit",
+  url: "https://getindiekit.com",
+  meta: "A Node.js server"
+}) }}
+
 <h2><code>warningText</code></h2>
 
 {{ warningText({
diff --git a/packages/frontend/components/user/macro.njk b/packages/frontend/components/user/macro.njk
@@ -0,0 +1,3 @@
+{% macro user(opts) %}
+  {%- include "./template.njk" -%}
+{% endmacro %}
diff --git a/packages/frontend/components/user/styles.css b/packages/frontend/components/user/styles.css
@@ -0,0 +1,20 @@
+.user {
+  align-items: center;
+  display: flex;
+  gap: var(--space-xs);
+}
+
+.user__body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2xs);
+}
+
+.user__name {
+  font: var(--user-name-font, var(--font-label));
+}
+
+.user__meta {
+  color: var(--color-on-offset);
+  font: var(--font-caption);
+}
diff --git a/packages/frontend/components/user/template.njk b/packages/frontend/components/user/template.njk
@@ -0,0 +1,15 @@
+{% from "../avatar/macro.njk" import avatar with context %}
+<div class="{{ classes("user", opts) }}">
+  {{ avatar(opts.avatar) if opts.avatar }}
+
+  <div class="user__body">
+  {% if opts.url %}
+    <a class="user__name" href="{{ opts.url }}">{{- opts.name | safe -}}</a>
+  {% else %}
+    <span class="user__name">{{- opts.name | safe -}}</span>
+  {% endif %}
+  {% if opts.meta %}
+    <span class="user__meta">{{ opts.meta | safe }}</span>
+  {% endif %}
+  </div>
+</div>
diff --git a/packages/frontend/layouts/default.njk b/packages/frontend/layouts/default.njk
@@ -28,6 +28,7 @@
 {% from "tag/macro.njk" import tag with context %}
 {% from "tag-input/macro.njk" import tagInput with context %}
 {% from "textarea/macro.njk" import textarea with context %}
+{% from "user/macro.njk" import user with context %}
 {% from "warning-text/macro.njk" import warningText with context %}
 {% from "widget/macro.njk" import widget with context %}
 {% set appClasses = "app" + (" " + appClasses if appClasses) + (" app--minimalui" if minimalui) %}
diff --git a/packages/frontend/styles/app.css b/packages/frontend/styles/app.css
@@ -58,6 +58,7 @@
 @import url("../components/tag/styles.css");
 @import url("../components/tag-input/styles.css");
 @import url("../components/textarea/styles.css");
+@import url("../components/user/styles.css");
 @import url("../components/warning-text/styles.css");
 @import url("../components/widget/styles.css");
 

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+{% macro user(opts) %}`
	`2`	`+ {%- include "./template.njk" -%}`
	`3`	`+{% endmacro %}`