Hover Card

"use client";

import {
	Avatar,
	AvatarFallback,
	AvatarImage,
} from "@/components/ui/avatar";
import { Button } from "@/components/ui/button";
import {
	HoverCard,
	HoverCardContent,
	HoverCardTrigger,
} from "@/components/ui/hover-card";

export function HoverCardDemo() {
	return (
		<HoverCard>
			<HoverCardTrigger
				delay={10}
				closeDelay={100}
				render={<Button variant="link" />}
			>
				@nextjs
			</HoverCardTrigger>
			<HoverCardContent className="w-64">
				<div className="flex items-center gap-3">
					<Avatar>
						<AvatarImage src="https://github.com/vercel.png" />
						<AvatarFallback>VC</AvatarFallback>
					</Avatar>
					<div className="flex flex-col gap-0.5">
						<div className="font-semibold">@nextjs</div>
						<div className="text-muted-foreground text-xs">
							The React Framework
						</div>
					</div>
				</div>
				<div className="text-muted-foreground text-xs">
					Created and maintained by @vercel.
				</div>
				<div className="text-muted-foreground text-xs">
					Joined December 2021
				</div>
			</HoverCardContent>
		</HoverCard>
	);
}

"use client";

import { Button } from "@/components/ui/button";
import {
	HoverCard,
	HoverCardContent,
	HoverCardTrigger,
} from "@/components/ui/hover-card";

export function HoverCardSides() {
	return (
		<div className="flex flex-wrap gap-2">
			{(["left", "top", "bottom", "right"] as const).map((side) => (
				<HoverCard key={side}>
					<HoverCardTrigger
						delay={100}
						closeDelay={100}
						render={<Button variant="tertiary" className="w-fit capitalize" />}
					>
						{side}
					</HoverCardTrigger>
					<HoverCardContent side={side}>
						<div className="flex flex-col gap-1">
							<h4 className="font-medium">Hover Card</h4>
							<p className="text-muted-foreground text-sm">
								This hover card appears on the {side} side of the trigger.
							</p>
						</div>
					</HoverCardContent>
				</HoverCard>
			))}
		</div>
	);
}

"use client";

import { Button } from "@/components/ui/button";
import {
	HoverCard,
	HoverCardContent,
	HoverCardTrigger,
} from "@/components/ui/hover-card";

export function HoverCardWithArrow() {
	return (
		<div className="flex flex-wrap gap-2">
			{(["left", "top", "bottom", "right"] as const).map((side) => (
				<HoverCard key={side}>
					<HoverCardTrigger
						delay={100}
						closeDelay={100}
						render={<Button variant="tertiary" className="w-fit capitalize" />}
					>
						{side}
					</HoverCardTrigger>
					<HoverCardContent withArrow side={side}>
						<div className="flex flex-col gap-1">
							<h4 className="font-medium">Hover Card</h4>
							<p className="text-muted-foreground text-sm">
								This hover card has an arrow pointing at the trigger.
							</p>
						</div>
					</HoverCardContent>
				</HoverCard>
			))}
		</div>
	);
}

"use client";

import {
	type Translations,
	useTranslation,
} from "@/components/language-selector";
import { Button } from "@/components/ui/button";
import {
	HoverCard,
	HoverCardContent,
	HoverCardTrigger,
} from "@/components/ui/hover-card";

const translations: Translations = {
	en: {
		dir: "ltr",
		values: {
			content: "The React Framework – created and maintained by @vercel.",
			"inline-start": "Inline Start",
			left: "Left",
			top: "Top",
			bottom: "Bottom",
			right: "Right",
			"inline-end": "Inline End",
		},
	},
	ar: {
		dir: "rtl",
		values: {
			content: "إطار عمل React - تم إنشاؤه وصيانته بواسطة @vercel.",
			"inline-start": "بداية السطر",
			left: "يسار",
			top: "أعلى",
			bottom: "أسفل",
			right: "يمين",
			"inline-end": "نهاية السطر",
		},
	},
	he: {
		dir: "rtl",
		values: {
			content: "React Framework - נוצר ומתוחזק על ידי @vercel.",
			"inline-start": "תחילת השורה",
			left: "שמאל",
			top: "למעלה",
			bottom: "למטה",
			right: "ימין",
			"inline-end": "סוף השורה",
		},
	},
};

const physicalSides = ["left", "top", "bottom", "right"] as const;
const logicalSides = ["inline-start", "inline-end"] as const;

export function HoverCardRtl() {
	const { dir, language, t } = useTranslation(translations, "ar");

	return (
		<div lang={language} dir={dir} className="grid gap-4">
			<div className="flex flex-wrap justify-center gap-2">
				{physicalSides.map((side) => (
					<HoverCard key={side}>
						<HoverCardTrigger
							delay={10}
							closeDelay={100}
							render={<Button variant="tertiary" />}
						>
							{t[side]}
						</HoverCardTrigger>
						<HoverCardContent side={side} dir={dir} className="w-64">
							<div className="font-semibold">@nextjs</div>
							<div className="text-muted-foreground text-sm">{t.content}</div>
						</HoverCardContent>
					</HoverCard>
				))}
			</div>
			<div className="flex flex-wrap justify-center gap-2">
				{logicalSides.map((side) => (
					<HoverCard key={side}>
						<HoverCardTrigger
							delay={10}
							closeDelay={100}
							render={<Button variant="tertiary" />}
						>
							{t[side]}
						</HoverCardTrigger>
						<HoverCardContent side={side} dir={dir} className="w-64">
							<div className="font-semibold">@nextjs</div>
							<div className="text-muted-foreground text-sm">{t.content}</div>
						</HoverCardContent>
					</HoverCard>
				))}
			</div>
		</div>
	);
}