glimpse

1"use client";
2 
3import { cn } from "@repo/shadcn-ui/lib/utils";
4import type { ComponentProps } from "react";
5import {
6  HoverCard,
7  HoverCardContent,
8  HoverCardTrigger,
9} from "@/components/ui/hover-card";
10 
11export type GlimpseProps = ComponentProps<typeof HoverCard>;
12 
13export const Glimpse = (props: GlimpseProps) => {
14  return <HoverCard {...props} />;
15};
16 
17export type GlimpseContentProps = ComponentProps<typeof HoverCardContent>;
18 
19export const GlimpseContent = (props: GlimpseContentProps) => (
20  <HoverCardContent {...props} />
21);
22 
23export type GlimpseTriggerProps = ComponentProps<typeof HoverCardTrigger>;
24 
25export const GlimpseTrigger = (props: GlimpseTriggerProps) => (
26  <HoverCardTrigger {...props} />
27);
28 
29export type GlimpseTitleProps = ComponentProps<"p">;
30 
31export const GlimpseTitle = ({ className, ...props }: GlimpseTitleProps) => {
32  return (
33    <p className={cn("truncate font-semibold text-sm", className)} {...props} />
34  );
35};
36 
37export type GlimpseDescriptionProps = ComponentProps<"p">;
38 
39export const GlimpseDescription = ({
40  className,
41  ...props
42}: GlimpseDescriptionProps) => {
43  return (
44    <p
45      className={cn("line-clamp-2 text-muted-foreground text-sm", className)}
46      {...props}
47    />
48  );
49};
50 
51export type GlimpseImageProps = ComponentProps<"img">;
52 
53export const GlimpseImage = ({
54  className,
55  alt,
56  ...props
57}: GlimpseImageProps) => (
58  // biome-ignore lint/performance/noImgElement: "Kibo UI is framework agnostic"
59  <img
60    alt={alt ?? ""}
61    className={cn(
62      "mb-4 aspect-[120/63] w-full rounded-md border object-cover",
63      className
64    )}
65    {...props}
66  />
67);