mirror of
https://github.com/khoaliber/dockhand.git
synced 2026-03-02 21:19:05 +00:00
47 lines
1.3 KiB
Svelte
47 lines
1.3 KiB
Svelte
<script lang="ts">
|
|
import { Box } from 'lucide-svelte';
|
|
|
|
interface Props {
|
|
containerId: string;
|
|
containerName: string;
|
|
ipv4Address?: string;
|
|
ipv6Address?: string;
|
|
macAddress?: string;
|
|
onclick?: () => void;
|
|
}
|
|
|
|
let { containerId, containerName, ipv4Address, ipv6Address, macAddress, onclick }: Props = $props();
|
|
</script>
|
|
|
|
<button
|
|
type="button"
|
|
class="w-full p-3 bg-muted rounded-lg space-y-2 text-left hover:bg-muted/80 hover:ring-1 hover:ring-border transition-all cursor-pointer"
|
|
onclick={onclick}
|
|
>
|
|
<div class="flex items-center gap-2">
|
|
<Box class="w-4 h-4 text-muted-foreground shrink-0" />
|
|
<span class="font-medium text-sm truncate" title={containerName}>{containerName}</span>
|
|
</div>
|
|
<div class="text-xs space-y-1">
|
|
{#if ipv4Address}
|
|
<div>
|
|
<span class="text-muted-foreground">IPv4: </span>
|
|
<code class="text-foreground">{ipv4Address}</code>
|
|
</div>
|
|
{/if}
|
|
{#if ipv6Address}
|
|
<div>
|
|
<span class="text-muted-foreground">IPv6: </span>
|
|
<code class="text-foreground">{ipv6Address}</code>
|
|
</div>
|
|
{/if}
|
|
{#if macAddress}
|
|
<div>
|
|
<span class="text-muted-foreground">MAC: </span>
|
|
<code class="text-foreground">{macAddress}</code>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
<code class="text-2xs text-muted-foreground">{containerId.slice(0, 12)}</code>
|
|
</button>
|