@catalystsoftware/ui 1.0.5 → 1.0.7

package/components/catalyst-ui/x/hover-card-x.tsx

@@ -1,375 +0,0 @@
-import React from 'react'
-import * as HoverCardPrimitive from "@radix-ui/react-hover-card"
-import { cva, type VariantProps } from "class-variance-authority"
-import { cn } from "~/components/catalyst-ui"
-import { Avatar, AvatarImage, AvatarFallback, Badge, Button } from "~/components/catalyst-ui"
-import { InfoIcon, CalendarIcon, FileQuestionIcon, ChevronRightIcon } from "lucide-react"
-
-const hoverCardContentVariants = cva(
-  "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-  {
-    variants: {
-      variant: {
-        default: "bg-popover text-popover-foreground",
-        light: "bg-neutral-200 text-neutral-950 dark:bg-neutral-50",
-        error: "bg-destructive text-white border-destructive",
-        dark: "bg-neutral-900 text-white dark:bg-neutral-950 border-neutral-800",
-      },
-      rounded: {
-        default: "rounded-md",
-        full: "rounded-full",
-        none: "rounded-none",
-      },
-      arrow: {
-        true: "",
-        false: "[&_svg]:invisible",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      rounded: "default",
-      arrow: true,
-    },
-  }
-)
-
-type HoverCardType = 'default' | 'media' | 'stats' | 'project' | 'alert' | 'tasks'
-
-type HoverCardVariantContextValue = VariantProps<typeof hoverCardContentVariants> & {
-  align?: 'start' | 'center' | 'end'
-  sideOffset?: number
-}
-
-const HoverCardXContext = React.createContext<HoverCardType>('default')
-const HoverCardVariantContext = React.createContext<HoverCardVariantContextValue>({})
-
-export function HoverCardX({
-  children,
-  hovercard = 'default',
-  variant,
-  rounded,
-  arrow,
-  align = "center",
-  sideOffset = 4,
-  ...props
-}: HoverCardPrimitive.HoverCardProps & { hovercard?: HoverCardType } & HoverCardVariantContextValue) {
-  return (
-    <HoverCardXContext.Provider value={hovercard}>
-      <HoverCardVariantContext.Provider value={{ variant, rounded, arrow, align, sideOffset }}>
-        <HoverCardPrimitive.Root {...props}>
-          {children}
-        </HoverCardPrimitive.Root>
-      </HoverCardVariantContext.Provider>
-    </HoverCardXContext.Provider>
-  )
-}
-
-export function HoverCardXTrigger({ children, ...props }: any) {
-  const hovercardType = React.useContext(HoverCardXContext)
-
-  switch (hovercardType) {
-    default:
-      return (
-        <HoverCardPrimitive.Trigger {...props}>
-          {children}
-        </HoverCardPrimitive.Trigger>
-      )
-  }
-}
-
-export function HoverCardXContent({ children, className, ...props }: any) {
-  const hovercardType = React.useContext(HoverCardXContext)
-  const { variant, rounded, arrow, align, sideOffset } = React.useContext(HoverCardVariantContext)
-
-  switch (hovercardType) {
-    case 'media':
-      return (
-        <HoverCardPrimitive.Content
-          align={align}
-          sideOffset={sideOffset}
-          className={cn(
-            hoverCardContentVariants({ variant, rounded, arrow }),
-            className
-          )}
-          {...props}
-        >
-          <div className='space-y-2'>
-            <img
-              src={props.image}
-              alt={props.imageAlt || 'Content image'}
-              className='w-full rounded'
-            />
-            <div className='space-y-1'>
-              <p className='text-sm font-medium'>{props.title}</p>
-              <p className='text-muted-foreground text-xs'>
-                {children}
-                {props.link && (
-                  <a
-                    href={props.link}
-                    target='_blank'
-                    rel='noopener noreferrer'
-                    className='hover:text-foreground flex w-fit underline'
-                  >
-                    Read more
-                    <ChevronRightIcon className='size-4' />
-                  </a>
-                )}
-              </p>
-            </div>
-          </div>
-        </HoverCardPrimitive.Content>
-      )
-
-    case 'stats':
-      return (
-        <HoverCardPrimitive.Content
-          align={align}
-          sideOffset={sideOffset}
-          className={cn(
-            hoverCardContentVariants({ variant, rounded, arrow }),
-            'w-fit',
-            className
-          )}
-          {...props}
-        >
-          <div className='flex items-center gap-1.5'>
-            <div className='flex flex-col gap-1'>
-              <div className='text-sm font-medium'>{props.label}</div>
-              <div className='text-xl font-semibold'>{props.value}</div>
-              <div className='text-muted-foreground text-xs'>{props.subtitle}</div>
-            </div>
-            {props.avatar && (
-              <Avatar className='size-10'>
-                <AvatarImage src={props.avatar} alt={props.avatarAlt} />
-                <AvatarFallback className='text-xs'>{props.avatarFallback}</AvatarFallback>
-              </Avatar>
-            )}
-          </div>
-        </HoverCardPrimitive.Content>
-      )
-
-    case 'project':
-      return (
-        <HoverCardPrimitive.Content
-          align={align}
-          sideOffset={sideOffset}
-          className={cn(
-            hoverCardContentVariants({ variant, rounded, arrow }),
-            className
-          )}
-          {...props}
-        >
-          <div className='space-y-3'>
-            <div className='flex items-center justify-between gap-2 text-sm font-semibold'>
-              <span>{props.title}</span>
-              <span>{props.progress}%</span>
-            </div>
-            <div className='bg-secondary relative h-2 w-full overflow-hidden rounded-full'>
-              <div
-                className='bg-primary h-full transition-all'
-                style={{ width: `${props.progress}%` }}
-              />
-            </div>
-            <p className='text-sm'>{children}</p>
-            {props.startDate && (
-              <div className='text-muted-foreground flex items-center gap-2 text-xs'>
-                <CalendarIcon className='size-4' />
-                <span>{props.startDate}</span>
-              </div>
-            )}
-            {props.avatars && props.avatars.length > 0 && (
-              <div className='flex -space-x-2'>
-                {props.avatars.map((avatar: any, index: number) => (
-                  <Avatar key={index} className='ring-background ring-2'>
-                    <AvatarImage src={avatar.src} alt={avatar.name} />
-                    <AvatarFallback className='text-xs'>{avatar.fallback}</AvatarFallback>
-                  </Avatar>
-                ))}
-                {props.moreCount && (
-                  <Avatar className='ring-background ring-2'>
-                    <AvatarFallback className='text-xs'>+{props.moreCount}</AvatarFallback>
-                  </Avatar>
-                )}
-              </div>
-            )}
-          </div>
-        </HoverCardPrimitive.Content>
-      )
-
-    case 'alert':
-      return (
-        <HoverCardPrimitive.Content
-          align={align}
-          sideOffset={sideOffset}
-          className={cn(
-            hoverCardContentVariants({ variant, rounded, arrow }),
-            'w-72',
-            className
-          )}
-          {...props}
-        >
-          <div className='flex flex-col items-center text-center'>
-            <span className='bg-destructive/10 mb-2.5 flex size-12 items-center justify-center rounded-full'>
-              <FileQuestionIcon className='text-destructive size-6' />
-            </span>
-            <div className='mb-1 text-lg font-medium'>{props.title}</div>
-            <p className='text-sm'>{children}</p>
-          </div>
-        </HoverCardPrimitive.Content>
-      )
-
-    case 'tasks':
-      return (
-        <HoverCardPrimitive.Content
-          align={align}
-          sideOffset={sideOffset}
-          className={cn(
-            hoverCardContentVariants({ variant, rounded, arrow }),
-            'w-72',
-            className
-          )}
-          {...props}
-        >
-          <div className='space-y-4'>
-            <p className='text-lg font-semibold'>{props.title}</p>
-            <ul className='space-y-2.5'>
-              {props.tasks && props.tasks.map((task: any, index: number) => (
-                <li key={index} className='flex items-start gap-4'>
-                  <Avatar>
-                    <AvatarImage src={task.image} alt={task.name} />
-                    <AvatarFallback>{task.fallback}</AvatarFallback>
-                  </Avatar>
-                  <div className='flex flex-1 flex-col'>
-                    <div className='text-sm font-medium'>{task.name}</div>
-                    <p className='text-muted-foreground text-xs'>{task.designation}</p>
-                  </div>
-                  <span className='text-muted-foreground text-sm'>{task.percentage}%</span>
-                </li>
-              ))}
-            </ul>
-          </div>
-        </HoverCardPrimitive.Content>
-      )
-
-    default:
-      return (
-        <HoverCardPrimitive.Content
-          align={align}
-          sideOffset={sideOffset}
-          className={cn(
-            hoverCardContentVariants({ variant, rounded, arrow }),
-            className
-          )}
-          {...props}
-        >
-          {children}
-        </HoverCardPrimitive.Content>
-      )
-  }
-}
-
-export function HoverCardXDemo() {
-  const avatars = [
-    { src: 'https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-1.png', name: 'John Doe', fallback: 'JD' },
-    { src: 'https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-2.png', name: 'Jane Smith', fallback: 'JS' },
-    { src: 'https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-3.png', name: 'Bob Johnson', fallback: 'BJ' }
-  ]
-
-  const tasks = [
-    { name: 'John Doe', designation: 'Frontend Developer', image: 'https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-1.png', fallback: 'JD', percentage: 85 },
-    { name: 'Jane Smith', designation: 'Backend Developer', image: 'https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-2.png', fallback: 'JS', percentage: 92 },
-    { name: 'Bob Johnson', designation: 'UI Designer', image: 'https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-3.png', fallback: 'BJ', percentage: 78 }
-  ]
-
-  return (
-    <div className='space-y-12 p-6 max-w-3xl mx-auto'>
-      <div>
-        <h3 className='text-lg font-semibold mb-4'>Default</h3>
-        <HoverCardX openDelay={0} closeDelay={0}>
-          <HoverCardXTrigger asChild>
-            <Button variant='link'>Hover Card Default</Button>
-          </HoverCardXTrigger>
-          <HoverCardXContent>
-            <p>This is a default hover card with simple content.</p>
-          </HoverCardXContent>
-        </HoverCardX>
-      </div>
-
-      <div>
-        <h3 className='text-lg font-semibold mb-4'>Media</h3>
-        <HoverCardX hovercard='media' openDelay={0} closeDelay={0}>
-          <HoverCardXTrigger asChild>
-            <Button variant='link'>Hover Card Media</Button>
-          </HoverCardXTrigger>
-          <HoverCardXContent
-            image='https://lp-cms-production.imgix.net/2021-01/GettyRF_450207051.jpg?width=232'
-            title='About Himalayas'
-            link='https://en.wikipedia.org/wiki/Himalayas'
-          >
-            The Great Himalayan mountain ranges in the Indian sub-continent region.
-          </HoverCardXContent>
-        </HoverCardX>
-      </div>
-
-      <div>
-        <h3 className='text-lg font-semibold mb-4'>Stats</h3>
-        <HoverCardX hovercard='stats' openDelay={0} closeDelay={0}>
-          <HoverCardXTrigger asChild>
-            <Button variant='link'>Hover Card Stats</Button>
-          </HoverCardXTrigger>
-          <HoverCardXContent
-            label='Total page views'
-            value='89,400'
-            subtitle='21% ↗︎ than last month'
-            avatar='https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-5.png'
-            avatarAlt='Hallie Richards'
-            avatarFallback='HR'
-          />
-        </HoverCardX>
-      </div>
-
-      <div>
-        <h3 className='text-lg font-semibold mb-4'>Project</h3>
-        <HoverCardX hovercard='project' openDelay={0} closeDelay={0}>
-          <HoverCardXTrigger asChild>
-            <Button variant='link'>Hover Card Project</Button>
-          </HoverCardXTrigger>
-          <HoverCardXContent
-            title='Resume project completion'
-            progress={25}
-            startDate='Started in December 2024'
-            avatars={avatars}
-            moreCount={6}
-          >
-            Developing platform where ai will generate resume automatically Ai
-          </HoverCardXContent>
-        </HoverCardX>
-      </div>
-
-      <div>
-        <h3 className='text-lg font-semibold mb-4'>Alert</h3>
-        <HoverCardX hovercard='alert' openDelay={0} closeDelay={0}>
-          <HoverCardXTrigger asChild>
-            <Button variant='link'>Hover Card Alert</Button>
-          </HoverCardXTrigger>
-          <HoverCardXContent title='File is corrupted'>
-            It might have some virus or something that might be harmful for your device.
-          </HoverCardXContent>
-        </HoverCardX>
-      </div>
-
-      <div>
-        <h3 className='text-lg font-semibold mb-4'>Tasks</h3>
-        <HoverCardX hovercard='tasks' openDelay={0} closeDelay={0}>
-          <HoverCardXTrigger asChild>
-            <Button variant='link'>Hover Card Tasks</Button>
-          </HoverCardXTrigger>
-          <HoverCardXContent
-            title="Today's task completion"
-            tasks={tasks}
-          />
-        </HoverCardX>
-      </div>
-    </div>
-  )
-}