Merge pull request #971 from tszhong0411/pack-30-add-hover-card

Add Hover Card

.changeset/big-mayflies-smile.md

@@ -0,0 +1,5 @@
+---
+'@tszhong0411/ui': patch
+---
+
+Add Hover Card

apps/docs/src/app/ui/components/hover-card.mdx

@@ -0,0 +1,19 @@
+---
+title: Hover Card
+description: For sighted users to preview content available behind a link.
+---
+
+<ComponentPreview name='hover-card/hover-card' />
+
+## Usage
+
+```tsx
+import { HoverCard, HoverCardContent, HoverCardTrigger } from '@tszhong0411/ui'
+```
+
+```tsx
+<HoverCard>
+  <HoverCardTrigger>Hover</HoverCardTrigger>
+  <HoverCardContent>The React Framework – created and maintained by @vercel.</HoverCardContent>
+</HoverCard>
+```

apps/docs/src/components/demos/hover-card/hover-card.tsx

@@ -0,0 +1,38 @@
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+  Button,
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger
+} from '@tszhong0411/ui'
+import { CalendarDaysIcon } from 'lucide-react'
+
+const HoverCardDemo = () => {
+  return (
+    <HoverCard>
+      <HoverCardTrigger asChild>
+        <Button variant='link'>@nextjs</Button>
+      </HoverCardTrigger>
+      <HoverCardContent className='w-80'>
+        <div className='flex justify-between space-x-4'>
+          <Avatar>
+            <AvatarImage src='https://github.com/vercel.png' />
+            <AvatarFallback>VC</AvatarFallback>
+          </Avatar>
+          <div className='space-y-1'>
+            <h4 className='text-sm font-semibold'>@nextjs</h4>
+            <p className='text-sm'>The React Framework – created and maintained by @vercel.</p>
+            <div className='flex items-center pt-2'>
+              <CalendarDaysIcon className='mr-2 size-4 opacity-70' />{' '}
+              <span className='text-muted-foreground text-xs'>Joined December 2021</span>
+            </div>
+          </div>
+        </div>
+      </HoverCardContent>
+    </HoverCard>
+  )
+}
+
+export default HoverCardDemo

apps/docs/src/config/links.ts

@@ -102,6 +102,10 @@ const COMPONENT_LINKS = [
     href: '/ui/components/form',
     text: 'Form'
   },
+  {
+    href: '/ui/components/hover-card',
+    text: 'Hover Card'
+  },
   {
     href: '/ui/components/input',
     text: 'Input'

packages/ui/package.json

@@ -40,6 +40,7 @@
     "@radix-ui/react-context-menu": "^2.2.4",
     "@radix-ui/react-dialog": "^1.1.4",
     "@radix-ui/react-dropdown-menu": "^2.1.4",
+    "@radix-ui/react-hover-card": "^1.1.4",
     "@radix-ui/react-label": "^2.1.1",
     "@radix-ui/react-menubar": "^1.1.4",
     "@radix-ui/react-navigation-menu": "^1.2.3",

packages/ui/src/hover-card.tsx

@@ -0,0 +1,25 @@
+'use client'
+
+import * as HoverCardPrimitive from '@radix-ui/react-hover-card'
+import { cn } from '@tszhong0411/utils'
+
+export const HoverCard = HoverCardPrimitive.Root
+export const HoverCardTrigger = HoverCardPrimitive.Trigger
+
+type HoverCardProps = React.ComponentProps<typeof HoverCardPrimitive.Content>
+
+export const HoverCardContent = (props: HoverCardProps) => {
+  const { className, align = 'center', sideOffset = 4, ...rest } = props
+
+  return (
+    <HoverCardPrimitive.Content
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        'bg-popover text-popover-foreground 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 z-50 w-64 rounded-md border p-4 shadow-md outline-none',
+        className
+      )}
+      {...rest}
+    />
+  )
+}

packages/ui/src/index.ts

@@ -20,6 +20,7 @@ export * from './drawer'
 export * from './dropdown-menu'
 export * from './files'
 export * from './form'
+export * from './hover-card'
 export * from './input'
 export * from './kbd'
 export * from './label'