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

   1 <script lang="ts">
   2         import { FileText, Music, Video } from '@lucide/svelte';
   3         import { HorizontalScrollCarousel } from '$lib/components/app/misc';
   4         import { ICON_CLASS_DEFAULT } from '$lib/constants/css-classes';
   5
   6         interface PreviewItem {
   7                 id: string;
   8                 name: string;
   9                 isImage: boolean;
  10                 isAudio: boolean;
  11                 isVideo: boolean;
  12                 preview?: string;
  13         }
  14
  15         interface Props {
  16                 items: PreviewItem[];
  17                 currentIndex: number;
  18                 onNavigate: (index: number) => void;
  19         }
  20
  21         let { currentIndex, items, onNavigate }: Props = $props();
  22
  23         function getFileExtension(name: string): string {
  24                 const parts = name.split('.');
  25
  26                 if (parts.length > 1) {
  27                         return parts.pop()?.toUpperCase() ?? '';
  28                 }
  29
  30                 return '';
  31         }
  32 </script>
  33
  34 {#if items.length > 1}
  35         <div class="sticky bottom-0 z-10 mt-4 flex-shrink-0">
  36                 <HorizontalScrollCarousel class="max-w-full">
  37                         {#each items as item, index (item.id)}
  38                                 <button
  39                                         data-thumbnail-index={index}
  40                                         class={[
  41                                                 'relative flex-shrink-0 cursor-pointer overflow-hidden rounded border-2 bg-black/80 backdrop-blur-sm transition-all hover:opacity-90',
  42                                                 index === currentIndex ? 'border-white' : 'border-transparent opacity-60',
  43                                                 '[&:not(:first-child)]:last:mr-4 [&:not(:last-child)]:first:ml-4'
  44                                         ]}
  45                                         onclick={() => onNavigate(index)}
  46                                         aria-label={`Go to ${item.name}`}
  47                                 >
  48                                         {#if item.isImage && item.preview}
  49                                                 <img src={item.preview} alt={item.name} class="h-12 w-12 object-cover" />
  50                                         {:else}
  51                                                 <div
  52                                                         class="bg-foreground-muted/50 flex h-12 w-12 flex-col items-center justify-center gap-0.5 py-1"
  53                                                 >
  54                                                         {#if item.isAudio}
  55                                                                 <Music class="{ICON_CLASS_DEFAULT} text-white/70" />
  56                                                         {:else if item.isVideo}
  57                                                                 <Video class="{ICON_CLASS_DEFAULT} text-white/70" />
  58                                                         {:else}
  59                                                                 <FileText class="{ICON_CLASS_DEFAULT} text-white/70" />
  60                                                         {/if}
  61
  62                                                         <span class="font-mono text-[9px] text-white/60">{getFileExtension(item.name)}</span>
  63                                                 </div>
  64                                         {/if}
  65                                 </button>
  66                         {/each}
  67                 </HorizontalScrollCarousel>
  68         </div>
  69 {/if}