Basic layout finished

src/components/images/GlowingImageWithToggle.tsx

@@ -0,0 +1,37 @@
+"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>
+  );
+}