rebreak-monorepo/apps/rebreak-magic/app/components/UnknownIosDeviceCard.vue

65 lines
2.2 KiB
Vue

<template>
<div
class="relative overflow-hidden rounded-2xl bg-amber-50 dark:bg-amber-900/20 border border-amber-100 dark:border-amber-800 p-5"
>
<div class="flex items-start gap-4">
<div
class="shrink-0 w-12 h-12 rounded-xl bg-amber-100 dark:bg-amber-800/50 flex items-center justify-center"
>
<UIcon
name="i-heroicons-exclamation-triangle"
class="w-6 h-6 text-amber-600 dark:text-amber-400"
/>
</div>
<div class="flex-1 min-w-0">
<h3 class="text-base font-bold text-gray-900 dark:text-white">
Dieses iPhone ist nicht erkennbar
</h3>
<p class="text-sm text-gray-600 dark:text-gray-300 mt-1">
Mit keinem ReBreak-Konto verbunden.
</p>
<div class="mt-3 text-sm text-gray-700 dark:text-gray-200 space-y-1">
<p><span class="font-medium">Modell:</span> {{ displayModel(iphone.productType) }}</p>
<p><span class="font-medium">iOS:</span> {{ iphone.productVersion }}</p>
<p class="truncate"><span class="font-medium">UDID:</span> {{ iphone.udid }}</p>
</div>
<div class="mt-4 text-sm text-gray-600 dark:text-gray-300 bg-white/60 dark:bg-black/20 rounded-lg p-3">
<p class="font-medium mb-1">So kannst du es verwalten:</p>
<ol class="list-decimal list-inside space-y-0.5">
<li>ReBreak-App auf diesem Gerät installieren</li>
<li>Mit deinem Konto anmelden</li>
<li>Das Gerät in der App registrieren</li>
</ol>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import type { IphoneDeviceState } from "~/composables/useTauri";
const props = defineProps<{
iphone: IphoneDeviceState;
}>();
const productTypeMap: Record<string, string> = {
"iPhone18,4": "iPhone Air",
"iPhone17,1": "iPhone 16 Pro",
"iPhone17,2": "iPhone 16 Pro Max",
"iPhone17,3": "iPhone 16",
"iPhone17,4": "iPhone 16 Plus",
"iPhone16,1": "iPhone 15 Pro",
"iPhone16,2": "iPhone 15 Pro Max",
"iPhone15,4": "iPhone 15",
"iPhone15,5": "iPhone 15 Plus",
};
function displayModel(productType: string): string {
return productTypeMap[productType] ?? productType;
}
</script>