2919ce45b8
Include recent Magic app work: Tauri native shell, iOS device detection via supervise-magic sidecar, MDM client, local HTTP server, new pages (detect, enroll, supervise, sideload, pair, preflight, configure, done), and updated device section/status UI.
47 lines
1.3 KiB
Vue
47 lines
1.3 KiB
Vue
<template>
|
|
<button
|
|
class="w-full text-left p-4 rounded-xl transition-colors flex items-center justify-between"
|
|
:class="buttonClass"
|
|
:disabled="loading"
|
|
@click="$emit('click')"
|
|
>
|
|
<div class="flex items-center gap-3">
|
|
<UIcon
|
|
:name="icon"
|
|
class="w-6 h-6"
|
|
/>
|
|
<div>
|
|
<div class="font-bold">{{ title }}</div>
|
|
<div v-if="error" class="text-xs text-red-600 mt-0.5">{{ error }}</div>
|
|
<div v-else-if="done" class="text-xs text-green-700 mt-0.5">Abgeschlossen</div>
|
|
</div>
|
|
</div>
|
|
<UIcon v-if="loading" name="i-heroicons-arrow-path" class="w-5 h-5 animate-spin" />
|
|
</button>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const props = defineProps<{
|
|
title: string;
|
|
done: boolean;
|
|
loading: boolean;
|
|
error?: string | null;
|
|
}>();
|
|
|
|
defineEmits<{
|
|
(e: "click"): void;
|
|
}>();
|
|
|
|
const icon = computed(() => {
|
|
if (props.error) return "i-heroicons-x-circle";
|
|
if (props.done) return "i-heroicons-check-circle-solid";
|
|
return "i-heroicons-circle";
|
|
});
|
|
|
|
const buttonClass = computed(() => {
|
|
if (props.error) return "bg-red-50 text-red-700 ring-1 ring-red-100";
|
|
if (props.done) return "bg-green-50 text-green-700 ring-1 ring-green-100";
|
|
return "bg-white ring-1 ring-gray-200 hover:ring-[var(--rebreak-primary)]/30";
|
|
});
|
|
</script>
|