scrum-poker-internal/resources/js/components/rooms/RoomHeader.vue

<script setup lang="ts">
import { Link } from '@inertiajs/vue3';
import { Check, Copy, LogOut } from '@lucide/vue';
import { ref } from 'vue';

import { Checkbox } from '@/components/ui/checkbox';
import { logout as embeddedLogout } from '@/routes/embedded';
import { favorite } from '@/routes/room';
import type { RoomHeaderEmits, RoomHeaderProps } from '@/types/room';

const props = defineProps<RoomHeaderProps>();
const emit = defineEmits<RoomHeaderEmits>();

const copied = ref(false);

async function copyInviteLink(): Promise<void> {
    const inviteUrl = new URL('/room/join', window.location.origin);
    inviteUrl.searchParams.set('join_code', props.join_code);

    await navigator.clipboard.writeText(inviteUrl.toString());
    copied.value = true;
    window.setTimeout(() => {
        copied.value = false;
    }, 1_800);
}
</script>

<template>
    <header
        class="mx-auto flex w-full max-w-6xl flex-col gap-4 sm:flex-row sm:items-center sm:justify-between"
    >
        <div>
            <h1 class="text-2xl font-bold sm:text-3xl">
                {{ title ?? 'Scrum Poker' }}
            </h1>

            <Link
                v-if="canFavorite"
                :href="favorite(id)"
                method="post"
                as="button"
                class="mt-2 inline-flex items-center gap-2"
            >
                <span>Favorit</span>
                <span class="material-icons" aria-hidden="true">
                    {{ is_favorite ? 'favorite' : 'favorite_border' }}
                </span>
            </Link>
        </div>

        <div class="flex flex-col items-end gap-2">
            <Link
                v-if="embedded"
                :href="
                    embeddedLogout({
                        query: {
                            join_code,
                            player_name: playerName,
                        },
                    })
                "
                method="post"
                as="button"
                class="inline-flex items-center gap-2 text-sm text-slate-300 transition hover:text-white"
            >
                <LogOut class="size-4" />
                Abmelden
            </Link>

            <button
                type="button"
                class="flex w-fit items-center gap-3 rounded-xl border border-slate-700 bg-slate-800 px-4 py-2.5 text-left transition hover:bg-slate-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-cyan-300"
                @click="copyInviteLink"
            >
                <span>
                    <span
                        class="block text-sm tracking-[0.18em] text-slate-400"
                    >
                        Raumcode
                    </span>
                    <strong class="font-mono text-lg tracking-[0.2em]">
                        {{ join_code }}
                    </strong>
                </span>
                <Check v-if="copied" class="size-5 text-emerald-300" />
                <Copy v-else class="size-5 text-slate-300" />
            </button>

            <label
                for="presenter-mode"
                class="flex cursor-pointer items-center gap-2 text-sm text-slate-300"
            >
                <Checkbox
                    id="presenter-mode"
                    :model-value="presenterMode"
                    @update:model-value="
                        emit('update:presenterMode', $event === true)
                    "
                />
                <span>Präsentatormodus</span>
            </label>
        </div>
    </header>
</template>