@@ -318,6 +318,61 @@ onMount(() => {
318318 >{loading ? " Processing..." : image === 1 ? " Take Photo" : " Take Back Photo" }</ButtonAction
319319 >
320320 {/if }
321+ <div class =" mt-4 w-full" >
322+ <!-- Preview thumbnails -->
323+ {#if $documentType === " passport" }
324+ <!-- Passport needs no preview -->
325+ {:else }
326+ <!-- Other documents need front and back -->
327+ <div class =" flex w-full justify-center gap-3 mb-6" >
328+ {#if $DocFront }
329+ <div class =" relative h-[120px] w-full max-w-[177px] rounded-lg overflow-hidden border-2 border-purple-500 shadow-lg" >
330+ <img
331+ class =" h-full w-full object-cover"
332+ src ={$DocFront }
333+ alt =" Document Front"
334+ />
335+ <div class =" absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/60 to-transparent px-2 py-1" >
336+ <p class =" text-xs text-white font-medium" >Front</p >
337+ </div >
338+ </div >
339+ {:else }
340+ <div
341+ class =" flex h-[120px] w-full max-w-[177px] flex-col items-center justify-center rounded-lg border-2 border-dashed border-purple-500 transition-colors hover:border-purple-400"
342+ >
343+ <svg class =" w-8 h-8 text-purple-500 mb-2" fill =" none" stroke =" currentColor" viewBox =" 0 0 24 24" >
344+ <path stroke-linecap =" round" stroke-linejoin =" round" stroke-width =" 2" d =" M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" />
345+ <path stroke-linecap =" round" stroke-linejoin =" round" stroke-width =" 2" d =" M15 13a3 3 0 11-6 0 3 3 0 016 0z" />
346+ </svg >
347+ <p class =" text-sm text-gray-400 font-medium" >Front</p >
348+ </div >
349+ {/if }
350+
351+ {#if $DocBack }
352+ <div class =" relative h-[120px] w-full max-w-[177px] rounded-lg overflow-hidden border-2 border-purple-500 shadow-lg" >
353+ <img
354+ class =" h-full w-full object-cover"
355+ src ={$DocBack }
356+ alt =" Document Back"
357+ />
358+ <div class =" absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/60 to-transparent px-2 py-1" >
359+ <p class =" text-xs text-white font-medium" >Back</p >
360+ </div >
361+ </div >
362+ {:else }
363+ <div
364+ class =" flex h-[120px] w-full max-w-[177px] flex-col items-center justify-center rounded-lg border-2 border-dashed border-purple-500 transition-colors hover:border-purple-400"
365+ >
366+ <svg class =" w-8 h-8 text-purple-500 mb-2" fill =" none" stroke =" currentColor" viewBox =" 0 0 24 24" >
367+ <path stroke-linecap =" round" stroke-linejoin =" round" stroke-width =" 2" d =" M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" />
368+ <path stroke-linecap =" round" stroke-linejoin =" round" stroke-width =" 2" d =" M15 13a3 3 0 11-6 0 3 3 0 016 0z" />
369+ </svg >
370+ <p class =" text-sm text-gray-400 font-medium" >Back</p >
371+ </div >
372+ {/if }
373+ </div >
374+ {/if }
375+ </div >
321376 </div >
322377 </div >
323378</div >
0 commit comments