fosrl.pangolin/src/components/ui/info-popup.tsx

39 lines
1.1 KiB
TypeScript
Raw Normal View History

"use client";
import React from "react";
import { Info } from "lucide-react";
import {
Popover,
PopoverContent,
PopoverTrigger
} from "@/components/ui/popover";
import { Button } from "@/components/ui/button";
interface InfoPopupProps {
text: string;
info: string;
}
export function InfoPopup({ text, info }: InfoPopupProps) {
return (
<div className="flex items-center space-x-2">
<span>{text}</span>
<Popover>
<PopoverTrigger asChild>
<Button
variant="ghost"
size="icon"
className="h-6 w-6 rounded-full p-0"
>
<Info className="h-4 w-4" />
<span className="sr-only">Show info</span>
</Button>
</PopoverTrigger>
<PopoverContent className="w-80">
<p className="text-sm text-muted-foreground">{info}</p>
</PopoverContent>
</Popover>
</div>
);
}