import { Ban } from "lucide-react"

import {

HoverCard,

HoverCardContent,

HoverCardTrigger,

} from "@/components/ui/hover-card"

export default function HoverCardDemo() {

return (

<div className="w-full min-h-[400px] flex items-center justify-center p-8">

<HoverCard>

<HoverCardTrigger asChild>

<button className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-[13px] font-matter font-medium bg-black/5 dark:bg-gradient-to-b dark:from-[#2C2C2E] dark:to-[#1C1C1E] border border-black/10 dark:border-white/10 text-zinc-900 dark:text-[#F5F5F7] hover:border-black/20 dark:hover:border-white/25 shadow-sm transition-all cursor-pointer">

@pratikpandey

</button>

</HoverCardTrigger>

<HoverCardContent className="w-[300px] p-5">

<div className="flex flex-col gap-4 font-matter">

<div className="flex items-start justify-between">

<div className="h-12 w-12 rounded-full overflow-hidden border border-black/10 dark:border-white/10 ring-1 ring-black/5 dark:ring-white/10">

<img

src="https://avatars.githubusercontent.com/u/124599?v=4"

alt="Pratik Pandey"

className="h-full w-full object-cover grayscale-[30%]"

/>

</div>

<button className="inline-flex h-7.5 items-center justify-center rounded-full bg-zinc-950 px-4 text-[12.5px] font-matter font-medium text-white transition-all hover:bg-zinc-800 dark:bg-white dark:text-black dark:hover:bg-zinc-200 shadow-sm">

Follow

</button>

</div>

<div className="flex flex-col gap-0.5">

<div className="flex items-center gap-1.5">

<span className="text-[15px] font-medium font-matter text-zinc-900 dark:text-[#F5F5F7]">Pratik Pandey</span>

<div className="flex h-3.5 w-3.5 items-center justify-center rounded-full bg-[#1DA1F2]">

<svg className="h-2 w-2 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={3}>

<path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />

</svg>

</div>

</div>

<span className="text-[12.5px] font-mono text-zinc-500 dark:text-[#86868B]">@pratikpandey</span>

</div>

<div className="flex items-center gap-4 text-[12.5px] font-matter">

<div className="flex items-center gap-1">

<span className="font-semibold text-zinc-900 dark:text-[#F5F5F7]">69</span>

<span className="text-zinc-500 dark:text-[#86868B]">Following</span>

</div>

<div className="flex items-center gap-1">

<span className="font-semibold text-zinc-900 dark:text-[#F5F5F7]">6,869</span>

<span className="text-zinc-500 dark:text-[#86868B]">Followers</span>

</div>

</div>

<button className="mt-1 inline-flex h-8.5 w-full items-center justify-center rounded-full border border-black/10 bg-black/[0.02] text-[12.5px] font-matter font-medium text-zinc-900 transition-colors hover:bg-black/5 dark:border-white/10 dark:bg-white/5 dark:text-[#F5F5F7] dark:hover:bg-white/10 dark:hover:border-white/20 shadow-sm">

<Ban className="mr-2 h-3.5 w-3.5 text-zinc-500 dark:text-[#86868B]" />

Profile summary

</button>

</div>

</HoverCardContent>

</HoverCard>

</div>

)

}