draupnir4all-web

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

blurred-text.tsx (943B)

      1 "use client"
      2 
      3 import { useState } from "react"
      4 import { Eye, EyeOff } from "lucide-react"
      5 import { Button } from "@/components/ui/button"
      6 
      7 interface BlurredTextProps {
      8   text: string
      9 }
     10 
     11 export function BlurredText({ text }: BlurredTextProps) {
     12   const [isBlurred, setIsBlurred] = useState(true)
     13 
     14   return (
     15     <div className="relative">
     16       <div
     17         className={`p-3 rounded-md bg-gray-800 font-mono text-sm ${
     18           isBlurred ? "text-transparent blur-sm select-none" : "text-white"
     19         }`}
     20       >
     21         {text}
     22       </div>
     23       <Button
     24         variant="ghost"
     25         size="sm"
     26         className="absolute top-2 right-2 h-7 w-7 p-0 text-gray-400 hover:text-white"
     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 content" : "Hide content"}</span>
     31       </Button>
     32     </div>
     33   )
     34 }