Citali/app.fellies.art
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add better image styles

Browse Source
This commit is contained in:
Citali
2025-06-29 01:56:19 +02:00
parent ee79f75668
commit ac3b19a1f2
16 changed files with 378 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/images/GlowingImageWithToggle.tsx
View File

@ -11,10 +11,12 @@ type Props = {
colors: (ImageColor & { color: Color })[];
alt: string;
src: string;
};
nsfw: boolean;
}
export default function GlowingImageWithToggle({ variant, colors, alt, src }: Props) {
export default function GlowingImageWithToggle({ variant, colors, alt, src, nsfw }: Props) {
const [animate, setAnimate] = useState(true);
const [revealed, setRevealed] = useState(!nsfw)
return (
<div className="relative w-full max-w-fit">
@ -24,6 +26,7 @@ export default function GlowingImageWithToggle({ variant, colors, alt, src }: Pr
colors={colors}
src={src}
animate={animate}
revealed={revealed}
/>
<div className="flex flex-col items-center gap-4 pt-8">
@ -32,6 +35,15 @@ export default function GlowingImageWithToggle({ variant, colors, alt, src }: Pr
<Label htmlFor="animate">Animate glow</Label>
</div>
</div>
{nsfw && (
<div className="flex flex-col items-center gap-4 pt-8">
<div className="flex items-center gap-2">
<Switch id="animate" checked={revealed} onCheckedChange={setRevealed} />
<Label htmlFor="animate">Reveal NSFW</Label>
</div>
</div>
)}
</div>
);
}