mirror of
https://github.com/Memo-2023/mana-monorepo.git
synced 2026-05-22 01:26:41 +02:00
7d426d57fd
NEW PACKAGE: @manacore/shared-branding - AppLogo: SVG logo component for any Mana app - AppLogoWithName: Logo with app name for headers - ManaIcon: Universal Mana drop icon for credits - Branding config: Centralized colors, names, taglines - Support for memoro, manacore, manadeck, maerchenzauber ENHANCED: @manacore/shared-utils - formatTimestamp: Relative day labels (Today/Yesterday) with i18n - Re-export isToday, isYesterday from date-fns App branding centralized: - memoro: Gold (#f8d62b), AI Voice Memos - manacore: Indigo (#6366f1), Central Hub - manadeck: Purple (#8b5cf6), AI Flashcards - maerchenzauber: Pink (#ec4899), AI Story Creator 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
59 lines
1.1 KiB
Svelte
59 lines
1.1 KiB
Svelte
<script lang="ts">
|
|
import type { AppId } from './types';
|
|
import { APP_BRANDING } from './config';
|
|
import AppLogo from './AppLogo.svelte';
|
|
|
|
interface Props {
|
|
/** App to show logo for */
|
|
app: AppId;
|
|
/** Logo size in pixels */
|
|
size?: number;
|
|
/** Override color */
|
|
color?: string;
|
|
/** Show app name */
|
|
showName?: boolean;
|
|
/** Name font size */
|
|
nameFontSize?: string;
|
|
/** Gap between logo and name */
|
|
gap?: string;
|
|
/** Additional CSS classes */
|
|
class?: string;
|
|
}
|
|
|
|
let {
|
|
app,
|
|
size = 28,
|
|
color,
|
|
showName = true,
|
|
nameFontSize = '1.25rem',
|
|
gap = '0.5rem',
|
|
class: className = ''
|
|
}: Props = $props();
|
|
|
|
const branding = $derived(APP_BRANDING[app]);
|
|
</script>
|
|
|
|
<a href="/" class="app-logo-with-name {className}" style="gap: {gap};">
|
|
<AppLogo {app} {size} {color} />
|
|
{#if showName}
|
|
<span
|
|
class="app-logo-with-name__text"
|
|
style="font-size: {nameFontSize}; color: {color ?? 'inherit'};"
|
|
>
|
|
{branding.name}
|
|
</span>
|
|
{/if}
|
|
</a>
|
|
|
|
<style>
|
|
.app-logo-with-name {
|
|
display: flex;
|
|
align-items: center;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.app-logo-with-name__text {
|
|
font-weight: 700;
|
|
white-space: nowrap;
|
|
}
|
|
</style>
|