-
Notifications
You must be signed in to change notification settings - Fork 268
/
ProviderCard.svelte
34 lines (31 loc) · 1.2 KB
/
ProviderCard.svelte
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<script lang="ts">
import type { ProviderInfo } from '../../../../main/src/plugin/api/provider-info';
import ProviderStatus from '../ui/ProviderStatus.svelte';
import ProviderLinks from './ProviderLinks.svelte';
import ProviderLogo from './ProviderLogo.svelte';
export let provider: ProviderInfo;
</script>
<div class="bg-charcoal-800 mb-5 rounded-md p-3 flex-nowrap" role="region" aria-label="{provider.name} Provider">
<div class="flex flex-row">
<div class="flex flex-row">
<ProviderLogo provider="{provider}" />
<div class="flex flex-col text-gray-400 ml-3 whitespace-nowrap" aria-label="context-name">
<div class="flex flex-row items-center">
{provider.name}
{#if provider.version}
<div class="text-gray-800 text-sm pl-1" aria-label="Provider Version">
v{provider.version}
</div>
{/if}
</div>
<div class="flex flex-row pt-1" aria-label="Actual State">
<ProviderStatus status="{provider.status}" />
</div>
</div>
</div>
<div class="flex flex-col items-center text-center flex-grow">
<slot name="content" />
</div>
</div>
<ProviderLinks provider="{provider}" />
</div>