draupnir4all-web

git clone git://archive.git.mtrnord.blog/MTRNord/draupnir4all-web.git
Log | Files | Refs | README | LICENSE

blurred-image.tsx (1086B)

      1 "use client"
      2 
      3 import { useState } from "react"
      4 import Image from "next/image"
      5 import { Eye, EyeOff } from "lucide-react"
      6 import { Button } from "@/components/ui/button"
      7 
      8 interface BlurredImageProps {
      9   src: string
     10   alt: string
     11   width: number
     12   height: number
     13 }
     14 
     15 export function BlurredImage({ src, alt, width, height }: BlurredImageProps) {
     16   const [isBlurred, setIsBlurred] = useState(true)
     17 
     18   return (
     19     <div className="relative inline-block">
     20       <div className={`overflow-hidden rounded-md ${isBlurred ? "filter grayscale blur-md" : ""}`}>
     21         <Image src={src || "/placeholder.svg"} alt={alt} width={width} height={height} className="object-cover" />
     22       </div>
     23       <Button
     24         variant="ghost"
     25         size="sm"
     26         className="absolute top-2 right-2 h-7 w-7 p-0 bg-black/50 text-white hover:bg-black/70"
     27         onClick={() => setIsBlurred(!isBlurred)}
     28       >
     29         {isBlurred ? <Eye className="h-4 w-4" /> : <EyeOff className="h-4 w-4" />}
     30         <span className="sr-only">{isBlurred ? "Show image" : "Blur image"}</span>
     31       </Button>
     32     </div>
     33   )
     34 }