feat: add HoverCard component and replace Popover usage in GitHubConfigForm and OrganizationStrategy

This commit is contained in:
Arunavo Ray
2025-06-20 10:58:46 +05:30
parent 7b58df375e
commit 83c924566c
5 changed files with 68 additions and 22 deletions

View File

@@ -14,10 +14,10 @@ import { Info } from "lucide-react";
import { GitHubMirrorSettings } from "./GitHubMirrorSettings";
import { Separator } from "../ui/separator";
import {
Popover,
PopoverContent,
PopoverTrigger,
} from "@/components/ui/popover";
HoverCard,
HoverCardContent,
HoverCardTrigger,
} from "@/components/ui/hover-card";
interface GitHubConfigFormProps {
config: GitHubConfig;
@@ -130,16 +130,16 @@ export function GitHubConfigForm({
>
GitHub Token
</label>
<Popover>
<PopoverTrigger asChild>
<HoverCard>
<HoverCardTrigger asChild>
<button
type="button"
className="p-0.5 hover:bg-muted rounded-sm transition-colors"
className="p-0.5 hover:bg-muted rounded-sm transition-colors cursor-help"
>
<Info className="h-3.5 w-3.5 text-muted-foreground" />
</button>
</PopoverTrigger>
<PopoverContent side="right" align="start" className="w-80">
</HoverCardTrigger>
<HoverCardContent side="right" align="start" className="w-80">
<div className="space-y-2">
<h4 className="font-medium text-sm">GitHub Token Requirements</h4>
<div className="text-sm space-y-2">
@@ -166,8 +166,8 @@ export function GitHubConfigForm({
</p>
</div>
</div>
</PopoverContent>
</Popover>
</HoverCardContent>
</HoverCard>
</div>
<Input
id="github-token"

View File

@@ -3,10 +3,10 @@ import { Card } from "@/components/ui/card";
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
import { Info, GitBranch, FolderTree, Star, Building2, User, Building } from "lucide-react";
import {
Popover,
PopoverContent,
PopoverTrigger,
} from "@/components/ui/popover";
HoverCard,
HoverCardContent,
HoverCardTrigger,
} from "@/components/ui/hover-card";
import { cn } from "@/lib/utils";
export type MirrorStrategy = "preserve" | "single-org" | "flat-user";
@@ -275,17 +275,17 @@ export const OrganizationStrategy: React.FC<OrganizationStrategyProps> = ({
</p>
</div>
<Popover>
<PopoverTrigger asChild>
<HoverCard>
<HoverCardTrigger asChild>
<button
type="button"
className="p-1.5 hover:bg-muted rounded-md transition-colors"
className="p-1.5 hover:bg-muted rounded-md transition-colors cursor-help"
onClick={(e) => e.stopPropagation()}
>
<Info className="h-4 w-4 text-muted-foreground" />
</button>
</PopoverTrigger>
<PopoverContent side="left" align="center" className="w-[500px]">
</HoverCardTrigger>
<HoverCardContent side="left" align="center" className="w-[500px]">
<div className="space-y-3">
<h4 className="font-medium text-sm">Repository Mapping Preview</h4>
<MappingPreview
@@ -297,8 +297,8 @@ export const OrganizationStrategy: React.FC<OrganizationStrategyProps> = ({
giteaUsername={giteaUsername}
/>
</div>
</PopoverContent>
</Popover>
</HoverCardContent>
</HoverCard>
</div>
</div>
</Card>