Files
app.fellies.art/src/components/images/GlowingImageWithToggle.tsx
2025-06-29 01:56:19 +02:00

50 lines
1.4 KiB
TypeScript

"use client"
import { Color, ImageColor, ImageVariant } from "@/generated/prisma";
import { useState } from "react";
import { Label } from "../ui/label";
import { Switch } from "../ui/switch";
import GlowingImageBorder from "./GlowingImageBorder";
type Props = {
variant: ImageVariant;
colors: (ImageColor & { color: Color })[];
alt: string;
src: string;
nsfw: boolean;
}
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">
<GlowingImageBorder
alt={alt}
variant={variant}
colors={colors}
src={src}
animate={animate}
revealed={revealed}
/>
<div className="flex flex-col items-center gap-4 pt-8">
<div className="flex items-center gap-2">
<Switch id="animate" checked={animate} onCheckedChange={setAnimate} />
<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>
);
}