feat: hover card component & storybook (#15)

lib/components/HoverCard/index.stories.tsx

@@ -0,0 +1,51 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { CalendarDays } from 'lucide-react'
+
+import { Avatar } from '@/components/Avatar'
+import { Button } from '@/components/Button'
+
+import { HoverCard, HoverCardContent, HoverCardTrigger } from '.'
+
+// Meta configuration for the story
+const meta: Meta = {
+  title: 'Components/HoverCard',
+  component: HoverCard,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+}
+
+// Default story for RadioGroup
+type Story = StoryObj<typeof meta>
+
+export default meta
+
+export const Default: Story = {
+  render: function Render() {
+    return (
+      <HoverCard>
+        <HoverCardTrigger asChild>
+          <Button variant='link'>@nextjs</Button>
+        </HoverCardTrigger>
+        <HoverCardContent className='w-80'>
+          <div className='flex justify-between space-x-4'>
+            <Avatar src='https://github.com/vercel.png' fallback='VC' />
+            <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'>
+                <CalendarDays className='mr-2 size-4 opacity-70' />{' '}
+                <span className='text-xs text-neutral-500'>
+                  Joined December 2021
+                </span>
+              </div>
+            </div>
+          </div>
+        </HoverCardContent>
+      </HoverCard>
+    )
+  },
+}

lib/components/HoverCard/index.tsx

@@ -0,0 +1,29 @@
+'use client'
+
+import * as HoverCardPrimitive from '@radix-ui/react-hover-card'
+import * as React from 'react'
+
+import { cn } from '@/utils'
+
+const HoverCard = HoverCardPrimitive.Root
+
+const HoverCardTrigger = HoverCardPrimitive.Trigger
+
+const HoverCardContent = React.forwardRef<
+  React.ElementRef<typeof HoverCardPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
+>(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (
+  <HoverCardPrimitive.Content
+    ref={ref}
+    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
+    )}
+    {...props}
+  />
+))
+HoverCardContent.displayName = HoverCardPrimitive.Content.displayName
+
+export { HoverCard, HoverCardTrigger, HoverCardContent }

package.json

@@ -38,6 +38,7 @@
     "@radix-ui/react-collapsible": "^1.1.1",
     "@radix-ui/react-context-menu": "^2.2.2",
     "@radix-ui/react-dropdown-menu": "^2.1.2",
+    "@radix-ui/react-hover-card": "^1.1.2",
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-menubar": "^1.1.2",
     "@radix-ui/react-navigation-menu": "^1.2.1",