76 lines
2.6 KiB
Svelte
76 lines
2.6 KiB
Svelte
<script lang="ts">
|
|
interface Props {
|
|
status?: "online" | "offline" | "ausente" | "externo" | "em_reuniao";
|
|
size?: "sm" | "md" | "lg";
|
|
}
|
|
|
|
let { status = "offline", size = "md" }: Props = $props();
|
|
|
|
const sizeClasses = {
|
|
sm: "w-3 h-3",
|
|
md: "w-4 h-4",
|
|
lg: "w-5 h-5",
|
|
};
|
|
|
|
const statusConfig = {
|
|
online: {
|
|
color: "bg-success",
|
|
borderColor: "border-success",
|
|
icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-full h-full">
|
|
<circle cx="12" cy="12" r="10" fill="#10b981"/>
|
|
<path d="M9 12l2 2 4-4" stroke="white" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>`,
|
|
label: "🟢 Online",
|
|
},
|
|
offline: {
|
|
color: "bg-base-300",
|
|
borderColor: "border-base-300",
|
|
icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-full h-full">
|
|
<circle cx="12" cy="12" r="10" fill="#9ca3af"/>
|
|
<path d="M8 8l8 8M16 8l-8 8" stroke="white" stroke-width="2" stroke-linecap="round"/>
|
|
</svg>`,
|
|
label: "⚫ Offline",
|
|
},
|
|
ausente: {
|
|
color: "bg-warning",
|
|
borderColor: "border-warning",
|
|
icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-full h-full">
|
|
<circle cx="12" cy="12" r="10" fill="#f59e0b"/>
|
|
<circle cx="12" cy="6" r="1.5" fill="white"/>
|
|
<path d="M12 10v4" stroke="white" stroke-width="2" stroke-linecap="round"/>
|
|
</svg>`,
|
|
label: "🟡 Ausente",
|
|
},
|
|
externo: {
|
|
color: "bg-info",
|
|
borderColor: "border-info",
|
|
icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-full h-full">
|
|
<circle cx="12" cy="12" r="10" fill="#3b82f6"/>
|
|
<path d="M8 12h8M12 8v8" stroke="white" stroke-width="2" stroke-linecap="round"/>
|
|
</svg>`,
|
|
label: "🔵 Externo",
|
|
},
|
|
em_reuniao: {
|
|
color: "bg-error",
|
|
borderColor: "border-error",
|
|
icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-full h-full">
|
|
<circle cx="12" cy="12" r="10" fill="#ef4444"/>
|
|
<rect x="8" y="8" width="8" height="8" fill="white" rx="1"/>
|
|
</svg>`,
|
|
label: "🔴 Em Reunião",
|
|
},
|
|
};
|
|
|
|
const config = $derived(statusConfig[status]);
|
|
</script>
|
|
|
|
<div
|
|
class={`${sizeClasses[size]} rounded-full relative flex items-center justify-center`}
|
|
style="box-shadow: 0 2px 8px rgba(0,0,0,0.15); border: 2px solid white;"
|
|
title={config.label}
|
|
aria-label={config.label}
|
|
>
|
|
{@html config.icon}
|
|
</div>
|
|
|