Koko210/immich-folio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: visual polish & UX — fade-in, theme toggle, scroll-to-top, footer, cursor, badge

Browse Source 
- Add FadeIn component (IntersectionObserver scroll-reveal + load animation)
- Add dark/light theme toggle (useSyncExternalStore + localStorage)
- Add scroll-to-top button (appears after 300px scroll)
- Add configurable footer with social links (gallery.yaml)
- Add crosshair cursor on photo grid items
- Add 'X photos' count badge on subpage cover images
- Add light theme color palette in tokens.css
This commit is contained in:
ralksta
2026-02-14 11:47:26 +01:00
parent e26f091595
commit 52fa16c1c8
57 changed files with 4790 additions and 1984 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
components/HeroCarousel.tsx
View File

@@ -11,67 +11,65 @@ import { useState, useEffect, useCallback } from 'react';
import Image from 'next/image';
interface HeroImage {
src: string;
blurDataURL?: string;
src: string;
blurDataURL?: string;
}
interface HeroCarouselProps {
images: HeroImage[];
images: HeroImage[];
}
const INTERVAL_MS = 6000;
export function HeroCarousel({ images }: HeroCarouselProps) {
const [currentIndex, setCurrentIndex] = useState(0);
const [currentIndex, setCurrentIndex] = useState(0);
const advance = useCallback(() => {
setCurrentIndex((prev) => (prev + 1) % images.length);
}, [images.length]);
const advance = useCallback(() => {
setCurrentIndex((prev) => (prev + 1) % images.length);
}, [images.length]);
useEffect(() => {
if (images.length <= 1) return;
useEffect(() => {
if (images.length <= 1) return;
const timer = setInterval(advance, INTERVAL_MS);
return () => clearInterval(timer);
}, [images.length, advance]);
const timer = setInterval(advance, INTERVAL_MS);
return () => clearInterval(timer);
}, [images.length, advance]);
if (images.length === 0) {
return <div className="hero__image-placeholder" />;
}
if (images.length === 1) {
const img = images[0];
return (
<Image
src={img.src}
alt=""
className="hero__image"
fill
sizes="50vw"
priority
{...(img.blurDataURL
? { placeholder: 'blur' as const, blurDataURL: img.blurDataURL }
: {})}
/>
);
}
if (images.length === 0) {
return <div className="hero__image-placeholder" />;
}
if (images.length === 1) {
const img = images[0];
return (
<>
{images.map((img, i) => (
<Image
key={i}
src={img.src}
alt=""
className={`hero__carousel-image${i === currentIndex ? ' hero__carousel-image--active' : ''}`}
fill
sizes="50vw"
priority={i === 0}
{...(img.blurDataURL
? { placeholder: 'blur' as const, blurDataURL: img.blurDataURL }
: {})}
/>
))}
</>
<Image
src={img.src}
alt=""
className="hero__image"
fill
sizes="50vw"
priority
{...(img.blurDataURL ? { placeholder: 'blur' as const, blurDataURL: img.blurDataURL } : {})}
/>
);
}
return (
<>
{images.map((img, i) => (
<Image
key={i}
src={img.src}
alt=""
className={`hero__carousel-image${i === currentIndex ? ' hero__carousel-image--active' : ''}`}
fill
sizes="50vw"
priority={i === 0}
{...(img.blurDataURL
? { placeholder: 'blur' as const, blurDataURL: img.blurDataURL }
: {})}
/>
))}
</>
);
}