frontend-svelte/src/shared/ui/Logo/Logo.svelte

<!--
    Component: Logo
    Project logo with apropriate styles
-->
<script lang="ts">
import { Badge } from '$shared/ui';
import clsx from 'clsx';

interface Props {
    /**
     * CSS classes
     */
    class?: string;
}

const { class: className }: Props = $props();

const title = 'GLYPHDIFF';
</script>

<div class={clsx('flex items-center gap-2 md:gap-3 select-none', className)}>
    <h1 class="font-logo font-extrabold text-base md:text-xl tracking-tight text-swiss-black dark:text-neutral-200">
        {title}
    </h1>
    <Badge variant="accent" size="xs">BETA</Badge>
</div>