|
2 | 2 | import { Avatar } from '$lib/ui'; |
3 | 3 | import { cn } from '$lib/utils'; |
4 | 4 | import { |
| 5 | + ArrowLeftIcon, |
| 6 | + ArrowRightIcon, |
5 | 7 | Message02Icon, |
6 | 8 | MoreVerticalIcon, |
7 | 9 | RecordIcon, |
|
13 | 15 | interface IPostProps extends HTMLAttributes<HTMLElement> { |
14 | 16 | avatar: string; |
15 | 17 | username: string; |
16 | | - imgUri: string; |
| 18 | + imgUris: string[]; |
17 | 19 | postAlt?: string; |
18 | 20 | text: string; |
19 | 21 | count: { |
|
31 | 33 | const { |
32 | 34 | avatar, |
33 | 35 | username, |
34 | | - imgUri, |
| 36 | + imgUris, |
35 | 37 | text, |
36 | 38 | postAlt, |
37 | 39 | count, |
38 | 40 | callback, |
39 | 41 | time, |
40 | 42 | ...restProps |
41 | 43 | }: IPostProps = $props(); |
| 44 | +
|
| 45 | + let galleryRef: HTMLDivElement; |
| 46 | + let currentIndex = $state(0); |
| 47 | +
|
| 48 | + function scrollLeft() { |
| 49 | + if (!galleryRef) return; |
| 50 | + galleryRef.scrollBy({ left: -galleryRef.clientWidth, behavior: 'smooth' }); |
| 51 | + } |
| 52 | +
|
| 53 | + function scrollRight() { |
| 54 | + if (!galleryRef) return; |
| 55 | + galleryRef.scrollBy({ left: galleryRef.clientWidth, behavior: 'smooth' }); |
| 56 | + } |
| 57 | +
|
| 58 | + function handleScroll() { |
| 59 | + if (!galleryRef) return; |
| 60 | + const scrollLeft = galleryRef.scrollLeft; |
| 61 | + const galleryWidth = galleryRef.clientWidth; |
| 62 | + const newIndex = Math.round(scrollLeft / galleryWidth); |
| 63 | + currentIndex = newIndex; |
| 64 | + } |
42 | 65 | </script> |
43 | 66 |
|
44 | 67 | <article {...restProps} class={cn(['flex w-full flex-col gap-4', restProps.class])}> |
|
52 | 75 | <HugeiconsIcon icon={MoreVerticalIcon} size={24} color="var(--color-black-500)" /> |
53 | 76 | </button> |
54 | 77 | </div> |
55 | | - <div class="overflow-hidden rounded-4xl"> |
56 | | - <img |
57 | | - src={imgUri} |
58 | | - alt={postAlt ?? text} |
59 | | - class="aspect-[4/5] h-full w-full object-cover md:aspect-[16/9]" |
60 | | - /> |
| 78 | + <div class="relative"> |
| 79 | + {#if imgUris.length > 1} |
| 80 | + <button |
| 81 | + onclick={scrollLeft} |
| 82 | + class="absolute start-2 top-1/2 z-10 hidden -translate-y-1/2 rounded-full bg-white p-2 shadow hover:bg-gray-200 md:inline-block" |
| 83 | + > |
| 84 | + <HugeiconsIcon icon={ArrowLeftIcon} size={20} color="black" /> |
| 85 | + </button> |
| 86 | + {/if} |
| 87 | + <div |
| 88 | + bind:this={galleryRef} |
| 89 | + onscroll={handleScroll} |
| 90 | + class="hide-scrollbar flex aspect-[4/5] snap-x snap-mandatory flex-nowrap gap-2 overflow-hidden overflow-x-scroll rounded-4xl md:aspect-[16/9]" |
| 91 | + > |
| 92 | + {#each imgUris as img} |
| 93 | + <div class="aspect-[4/5] h-full w-full snap-center md:aspect-[16/9]"> |
| 94 | + <img |
| 95 | + src={img} |
| 96 | + alt={postAlt ?? text} |
| 97 | + class=" h-full w-full rounded-4xl object-cover" |
| 98 | + /> |
| 99 | + </div> |
| 100 | + {/each} |
| 101 | + </div> |
| 102 | + {#if imgUris.length > 1} |
| 103 | + <div |
| 104 | + class="absolute start-[50%] bottom-4 mt-2 flex translate-x-[-50%] items-center justify-center gap-1" |
| 105 | + > |
| 106 | + {#if imgUris.length > 1} |
| 107 | + <div class="mt-2 flex items-center justify-center gap-1"> |
| 108 | + {#each imgUris as _, i} |
| 109 | + <div |
| 110 | + class={`h-1.5 w-1.5 rounded-full ${currentIndex === i ? 'bg-white' : 'bg-black-600'}`} |
| 111 | + ></div> |
| 112 | + {/each} |
| 113 | + </div> |
| 114 | + {/if} |
| 115 | + </div> |
| 116 | + {/if} |
| 117 | + {#if imgUris.length > 1} |
| 118 | + <button |
| 119 | + onclick={scrollRight} |
| 120 | + class="absolute end-2 top-1/2 z-10 hidden -translate-y-1/2 rounded-full bg-white p-2 shadow hover:bg-gray-200 md:inline-block" |
| 121 | + > |
| 122 | + <HugeiconsIcon icon={ArrowRightIcon} size={20} color="black" /> |
| 123 | + </button> |
| 124 | + {/if} |
61 | 125 | </div> |
62 | 126 | <p class="text-black/80">{text}</p> |
63 | 127 | <p class="text-black/60">{time}</p> |
|
0 commit comments