git.djapps.eu Git - pkg/ggml/sources/llama.cpp/blob

   1 <script lang="ts">
   2         import { ActionIcon } from '$lib/components/app';
   3         import { X } from '@lucide/svelte';
   4
   5         interface Props {
   6                 class?: string;
   7                 height?: string;
   8                 id: string;
   9                 imageClass?: string;
  10                 onclick?: (event?: MouseEvent) => void;
  11                 onRemove?: (id: string) => void;
  12                 name: string;
  13                 preview: string;
  14                 readonly?: boolean;
  15                 width?: string;
  16         }
  17
  18         let {
  19                 class: className = '',
  20                 height = 'h-16',
  21                 id,
  22                 imageClass = '',
  23                 onclick,
  24                 onRemove,
  25                 name,
  26                 preview,
  27                 readonly = false,
  28                 width = 'w-auto'
  29         }: Props = $props();
  30 </script>
  31
  32 {#snippet image()}
  33         <img src={preview} alt={name} class="{height} {width} cursor-pointer object-cover {imageClass}" />
  34 {/snippet}
  35
  36 <div
  37         class="group relative overflow-hidden rounded-lg bg-muted shadow-lg dark:border dark:border-muted {className}"
  38 >
  39         {#if onclick}
  40                 <button
  41                         aria-label="Preview {name}"
  42                         class="block h-full w-full rounded-lg focus:ring-2 focus:ring-primary focus:ring-offset-2 focus:outline-none"
  43                         {onclick}
  44                         type="button"
  45                 >
  46                         {@render image()}
  47                 </button>
  48         {:else}
  49                 {@render image()}
  50         {/if}
  51
  52         {#if !readonly}
  53                 <div
  54                         class="absolute top-1 right-1 flex items-center justify-center opacity-0 transition-opacity group-focus-within:opacity-100 group-hover:opacity-100"
  55                 >
  56                         <ActionIcon
  57                                 class="text-white"
  58                                 icon={X}
  59                                 onclick={() => onRemove?.(id)}
  60                                 stopPropagationOnClick
  61                                 tooltip="Remove"
  62                         />
  63                 </div>
  64         {/if}
  65 </div>