Add better image styles

src/components/images/GlowingImageBorder.tsx

@@ -14,8 +14,9 @@ type Props = {
   alt: string,
   variant: ImageVariant,
   colors: Colors[],
-  src: string
-  className?: string
+  src: string,
+  revealed?: boolean,
+  className?: string,
   animate?: boolean
 }
 
@@ -25,6 +26,7 @@ export default function GlowingImageBorder({
   colors,
   src,
   className,
+  revealed = true,
   animate = true,
 }: Props) {
   const { resolvedTheme } = useTheme()
@@ -37,11 +39,11 @@ export default function GlowingImageBorder({
   const getColor = (type: string) =>
     colors.find((c) => c.type === type)?.color.hex
 
-  const vibrantLight = getColor("vibrant") || "#ff5ec4"
-  const mutedLight = getColor("muted") || "#5ecaff"
+  const vibrantLight = getColor("Vibrant") || "#ff5ec4"
+  const mutedLight = getColor("Muted") || "#5ecaff"
 
-  const darkVibrant = getColor("darkVibrant") || "#fc03a1"
-  const darkMuted = getColor("darkMuted") || "#035efc"
+  const darkVibrant = getColor("DarkVibrant") || "#fc03a1"
+  const darkMuted = getColor("DarkMuted") || "#035efc"
 
   const vibrant = resolvedTheme === "dark" ? darkVibrant : vibrantLight
   const muted = resolvedTheme === "dark" ? darkMuted : mutedLight
@@ -62,13 +64,16 @@ export default function GlowingImageBorder({
         } as React.CSSProperties
       }
     >
-      <div className="relative z-10 rounded-xl overflow-hidden">
+      <div className="relative z-10 rounded-xl overflow-hidden group">
         <NextImage
           src={src}
           alt={alt || "Image"}
           width={variant.width}
           height={variant.height}
-          className="rounded-xl"
+          className={clsx(
+            "rounded-xl transition duration-300",
+            !revealed && "blur-md scale-105"
+          )}
         />
       </div>
     </div>

src/components/images/GlowingImageWithToggle.tsx

@@ -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>
   );
 }