arifal/setrip
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add responsive mobile tablet laptop and desktop

Browse Source
This commit is contained in:
arifal
2026-04-16 16:49:32 +07:00
parent d0480df31a
commit 82c1da9951
9 changed files with 195 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files
features/trip/components/image-gallery.tsx
+8 -8
View File
@@ -14,8 +14,8 @@ export function ImageGallery({ images }: { images: TripImage[] }) {
if (images.length === 0) {
return (
<div className="flex h-56 items-center justify-center bg-linear-to-br from-primary-800 to-secondary-900 sm:h-72">
<span className="text-6xl">🏔️</span>
<div className="flex h-44 items-center justify-center bg-linear-to-br from-primary-800 to-secondary-900 sm:h-56 lg:h-72">
<span className="text-5xl sm:text-6xl">🏔️</span>
</div>
);
}
@@ -25,7 +25,7 @@ export function ImageGallery({ images }: { images: TripImage[] }) {
return (
<div>
{/* Main Image */}
<div className="relative h-56 bg-neutral-900 sm:h-72">
<div className="relative h-44 bg-neutral-900 sm:h-56 lg:h-72">
<Image
src={activeImage.url}
alt={activeImage.caption || "Foto trip"}
@@ -35,26 +35,26 @@ export function ImageGallery({ images }: { images: TripImage[] }) {
priority
/>
{activeImage.caption && (
<div className="absolute bottom-0 left-0 right-0 bg-linear-to-t from-black/60 to-transparent px-4 pb-3 pt-8">
<p className="text-sm font-medium text-white">
<div className="absolute bottom-0 left-0 right-0 bg-linear-to-t from-black/60 to-transparent px-3 pb-2.5 pt-6 sm:px-4 sm:pb-3 sm:pt-8">
<p className="text-xs font-medium text-white sm:text-sm">
{activeImage.caption}
</p>
</div>
)}
{/* Counter */}
<div className="absolute right-3 top-3 rounded-full bg-black/50 px-2.5 py-1 text-xs font-medium text-white backdrop-blur-sm">
<div className="absolute right-2 top-2 rounded-full bg-black/50 px-2 py-0.5 text-[10px] font-medium text-white backdrop-blur-sm sm:right-3 sm:top-3 sm:px-2.5 sm:py-1 sm:text-xs">
{activeIndex + 1} / {images.length}
</div>
</div>
{/* Thumbnails */}
{images.length > 1 && (
<div className="flex gap-1.5 overflow-x-auto bg-neutral-100 p-2">
<div className="flex gap-1 overflow-x-auto bg-neutral-100 p-1.5 sm:gap-1.5 sm:p-2">
{images.map((img, i) => (
<button
key={img.id}
onClick={() => setActiveIndex(i)}
className={`relative h-14 w-20 shrink-0 overflow-hidden rounded-lg transition-all ${
className={`relative h-11 w-16 shrink-0 overflow-hidden rounded-md transition-all sm:h-14 sm:w-20 sm:rounded-lg ${
i === activeIndex
? "ring-2 ring-primary-500 ring-offset-1"
: "opacity-60 hover:opacity-100"