38 lines
1007 B
TypeScript
38 lines
1007 B
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;
|
|
};
|
|
|
|
export default function GlowingImageWithToggle({ variant, colors, alt, src }: Props) {
|
|
const [animate, setAnimate] = useState(true);
|
|
|
|
return (
|
|
<div className="relative w-full max-w-fit">
|
|
<GlowingImageBorder
|
|
alt={alt}
|
|
variant={variant}
|
|
colors={colors}
|
|
src={src}
|
|
animate={animate}
|
|
/>
|
|
|
|
<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>
|
|
</div>
|
|
);
|
|
}
|