47 lines
1.4 KiB
TypeScript
47 lines
1.4 KiB
TypeScript
export const hoverCard=`import { CalendarDays } from "lucide-react"
|
|
|
|
import {
|
|
Avatar,
|
|
AvatarFallback,
|
|
AvatarImage,
|
|
} from "@/components/ui/avatar"
|
|
import { Button } from "@/components/ui/button"
|
|
import {
|
|
HoverCard,
|
|
HoverCardContent,
|
|
HoverCardTrigger,
|
|
} from "@/components/ui/hover-card"
|
|
|
|
const BasicCard = () => {
|
|
return (
|
|
<div className="flex justify-center">
|
|
<HoverCard>
|
|
<HoverCardTrigger asChild>
|
|
<Button variant="outline">Hover Me</Button>
|
|
</HoverCardTrigger>
|
|
<HoverCardContent className="w-80">
|
|
<div className="flex justify-between space-x-4">
|
|
<Avatar>
|
|
<AvatarImage src="https://github.com/vercel.png" />
|
|
<AvatarFallback>VC</AvatarFallback>
|
|
</Avatar>
|
|
<div className="space-y-1">
|
|
<h4 className="text-sm font-semibold">DashCode</h4>
|
|
<p className="text-sm">
|
|
Admin UI Kit - DashCode; Next.js, React, and Tailwind CSS
|
|
</p>
|
|
<div className="flex items-center pt-2">
|
|
<CalendarDays className="mr-2 h-4 w-4 opacity-70" />{" "}
|
|
<span className="text-xs text-muted-foreground">
|
|
Joined December 2021
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</HoverCardContent>
|
|
</HoverCard>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default BasicCard;` |