Vegvisr UI Kit

Reusable UI components used across Vegvisr apps.

Install

npm install vegvisr-ui-kit

LanguageSelector

Dropdown language selector used in vegvisr-connect.

Usage

import { useState } from 'react';
import { LanguageSelector } from 'vegvisr-ui-kit';

export default function Header() {
  const [language, setLanguage] = useState('en');

  return (
    <header>
      <LanguageSelector value={language} onChange={setLanguage} />
    </header>
  );
}

Expected placement

Place it in a header or top bar next to primary navigation (same as vegvisr-connect):

• Left: product/logo
• Right: language selector

Props

• value (string, required): current language code.
• onChange (function, required): callback receiving the new language code.
• options (array, optional): override language list.
• label (string, optional): accessible label.
• showLabel (boolean, optional): render the label text.
• showIcon (boolean, optional): render the globe icon.
• className (string, optional): extra classes for the wrapper.

Default languages:

• en English
• no Norsk
• nl Nederlands
• is Icelandic

Styling note

The component uses Tailwind CSS utility classes. For the intended styling, make sure Tailwind is set up in the consuming app.

AuthBar

Header auth badge with sign-in button. Intended for use across Vegvisr apps.

Usage

import { AuthBar } from 'vegvisr-ui-kit';

export default function Header({ userEmail, onSignIn }) {
  return (
    <AuthBar
      userEmail={userEmail}
      onSignIn={onSignIn}
      onLogout={() => {
        // clear local user state + cookie
      }}
    />
  );
}

Props

• userEmail (string, optional): when present, shows "Early access" + email.
• badgeLabel (string, optional): text for the authenticated badge.
• signInLabel (string, optional): label for the sign-in button.
• logoutLabel (string, optional): label for the log out button.
• onSignIn (function, optional): click handler for the sign-in button.
• onLogout (function, optional): click handler for the log out button.

BrandLogo

App logo that automatically resolves by subdomain name (e.g. photos.vegvisr.org → photos-logo).

Usage

import { BrandLogo } from 'vegvisr-ui-kit';

export default function Header() {
  return <BrandLogo size={40} />;
}

Props

• appKey (string, optional): override subdomain lookup (e.g. photos, aichat).
• label (string, optional): fallback label if no logo asset exists.
• size (number, optional): height in pixels.
• className (string, optional).

EcosystemNav

Quick links to other Vegvisr apps, rendered as a small icon row.

Usage

import { EcosystemNav } from 'vegvisr-ui-kit';

export default function NavRow() {
  return <EcosystemNav className=\"mt-4\" />;
}

Notes

• Active app is inferred from window.location.hostname.
• Icons/logos are resolved by subdomain key.

Auth Client

Helper utilities for magic-link auth flows.

Usage

import { authClient } from 'vegvisr-ui-kit';

const token = authClient.parseMagicToken(window.location.href);
const redirectUrl = window.location.origin;

await authClient.sendMagicLink({
  email: '[email protected]',
  redirectUrl,
  baseUrl: 'https://cookie.vegvisr.org'
});

const { email } = await authClient.verifyMagicLink({
  token,
  baseUrl: 'https://cookie.vegvisr.org'
});

Methods

• sendMagicLink({ email, redirectUrl, baseUrl })
• verifyMagicLink({ token, baseUrl })
• parseMagicToken(url)
• persistUser(user)

Favicons

The UI kit ships with the standard Vegvisr favicon set:

• favicon-16x16.png
• favicon-32x32.png
• favicon-512x512.png
• apple-touch-icon.png

Usage

In Vite/React apps, import the assets directly:

import favicon16 from 'vegvisr-ui-kit/assets/favicon-16x16.png';
import favicon32 from 'vegvisr-ui-kit/assets/favicon-32x32.png';
import favicon512 from 'vegvisr-ui-kit/assets/favicon-512x512.png';
import appleTouch from 'vegvisr-ui-kit/assets/apple-touch-icon.png';

Then wire them in index.html:

<link rel="icon" type="image/png" sizes="16x16" href="/path/from/bundler/favicon-16x16.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/path/from/bundler/favicon-32x32.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/path/from/bundler/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="512x512" href="/path/from/bundler/favicon-512x512.png" />

If you prefer static files, copy the assets from node_modules/vegvisr-ui-kit/assets/ into your app's public/.