update profile

frontend/src/components/ui/index.ts

@@ -5,6 +5,7 @@ import "./card";
 import "./data-table";
 import "./desc-list";
 import "./dialog";
+import "./link";
 import "./navigation";
 import "./tab-group";
 import "./tab-list";

frontend/src/components/ui/link.ts

@@ -0,0 +1,50 @@
+import clsx from "clsx";
+import { html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+
+import { BtrixElement } from "@/classes/BtrixElement";
+
+@customElement("btrix-link")
+export class Link extends BtrixElement {
+  @property({ type: String })
+  href?: HTMLAnchorElement["href"];
+
+  @property({ type: String })
+  target?: HTMLAnchorElement["target"];
+
+  @property({ type: String })
+  rel?: HTMLAnchorElement["rel"];
+
+  @property({ type: String })
+  variant: "primary" | "neutral" = "neutral";
+
+  render() {
+    if (!this.href) return;
+
+    return html`
+      <a
+        class=${clsx(
+          "group inline-flex items-center gap-1 transition-colors",
+          {
+            primary: "text-primary-500 hover:text-primary-600",
+            neutral: "text-blue-500 hover:text-blue-600",
+          }[this.variant],
+        )}
+        href=${this.href}
+        target=${ifDefined(this.target)}
+        rel=${ifDefined(this.rel)}
+        @click=${this.target === "_blank" || this.href.startsWith("http")
+          ? () => {}
+          : this.navigate.link}
+      >
+        <slot></slot>
+        <sl-icon
+          slot="suffix"
+          name="arrow-right"
+          class="size-4 transition-transform group-hover:translate-x-1"
+        ></sl-icon
+      ></a>
+    `;
+  }
+}

frontend/src/index.ts

@@ -796,6 +796,7 @@ export class App extends BtrixElement {
 
         return html`<btrix-org-profile
           class="w-full"
+          slug=${slug}
           ?inOrg=${this.isUserInCurrentOrg}
           ?preview=${orgTab && orgTab === OrgTab.ProfilePreview}
         ></btrix-org-profile>`;

frontend/src/pages/account-settings.ts

@@ -351,14 +351,13 @@ export class AccountSettings extends LiteElement {
         <footer class="flex items-center justify-start border-t px-4 py-3">
           <p class="text-neutral-600">
             ${msg("Help us translate Browsertrix.")}
-            <a
-              class="inline-flex items-center gap-1 text-blue-500 hover:text-blue-600"
+            <btrix-link
               href="https://docs.browsertrix.com/develop/localization/"
               target="_blank"
+              variant="primary"
             >
               ${msg("Contribute to translations")}
-              <sl-icon slot="suffix" name="arrow-right"></sl-icon
-            ></a>
+            </btrix-link>
           </p>
         </footer>
       </section>