@postxl/generators 1.1.0 → 1.2.0

package/dist/frontend-core/template/src/components/ui/command-palette/command-palette.stories.tsx

@@ -1,160 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite'
-
-import {
-  CommandPalette,
-  CommandPaletteEmpty,
-  CommandPaletteDialog,
-  CommandPaletteGroup,
-  CommandPaletteInput,
-  CommandPaletteItem,
-  CommandPaletteList,
-  CommandPaletteSeparator,
-  CommandPaletteShortcut,
-} from './command-palette'
-import { CalendarIcon, EnvelopeClosedIcon, FaceIcon, GearIcon, PersonIcon, RocketIcon } from '@radix-ui/react-icons'
-import { useEffect, useState } from 'react'
-
-const meta = {
-  title: 'Command Palette',
-  component: CommandPalette,
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      description: {
-        component:
-          'The Command Palette component is used to display a list of commands or actions that can be triggered by the user.',
-      },
-    },
-  },
-} satisfies Meta<typeof CommandPalette>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
-  parameters: {
-    docs: {
-      description: {
-        story: 'A basic command palette with grouped items and keyboard shortcuts.',
-      },
-    },
-  },
-  render: () => (
-    <div className="flex items-center justify-center">
-      <CommandPalette className="rounded-lg border shadow-md md:min-w-[450px]">
-        <CommandPaletteInput placeholder="Type a command or search..." />
-        <CommandPaletteList>
-          <CommandPaletteEmpty>No results found.</CommandPaletteEmpty>
-          <CommandPaletteGroup heading="Suggestions">
-            <CommandPaletteItem>
-              <CalendarIcon className="mr-2 h-4 w-4" />
-              <span>Calendar</span>
-            </CommandPaletteItem>
-            <CommandPaletteItem>
-              <FaceIcon className="mr-2 h-4 w-4" />
-              <span>Search Emoji</span>
-            </CommandPaletteItem>
-            <CommandPaletteItem disabled>
-              <RocketIcon className="mr-2 h-4 w-4" />
-              <span>Launch</span>
-            </CommandPaletteItem>
-          </CommandPaletteGroup>
-          <CommandPaletteSeparator />
-          <CommandPaletteGroup heading="Settings">
-            <CommandPaletteItem>
-              <PersonIcon className="mr-2 h-4 w-4" />
-              <span>Profile</span>
-              <CommandPaletteShortcut>⌘P</CommandPaletteShortcut>
-            </CommandPaletteItem>
-            <CommandPaletteItem>
-              <EnvelopeClosedIcon className="mr-2 h-4 w-4" />
-              <span>Mail</span>
-              <CommandPaletteShortcut>⌘B</CommandPaletteShortcut>
-            </CommandPaletteItem>
-            <CommandPaletteItem>
-              <GearIcon className="mr-2 h-4 w-4" />
-              <span>Settings</span>
-              <CommandPaletteShortcut>⌘S</CommandPaletteShortcut>
-            </CommandPaletteItem>
-          </CommandPaletteGroup>
-        </CommandPaletteList>
-      </CommandPalette>
-    </div>
-  ),
-}
-
-const CommandPaletteDialogExample = () => {
-  const [open, setOpen] = useState(false)
-
-  useEffect(() => {
-    const down = (e: KeyboardEvent) => {
-      if (e.key === 'j' && (e.metaKey || e.ctrlKey)) {
-        e.preventDefault()
-        setOpen((open) => !open)
-      }
-    }
-
-    document.addEventListener('keydown', down)
-    return () => document.removeEventListener('keydown', down)
-  }, [])
-
-  return (
-    <div className="flex items-center justify-center">
-      <p className="text-sm text-muted-foreground">
-        Press{' '}
-        <kbd className="pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100">
-          <span className="text-xs">⌘</span>J
-        </kbd>
-      </p>
-      <CommandPaletteDialog open={open} onOpenChange={setOpen}>
-        <CommandPaletteInput placeholder="Type a command or search..." />
-        <CommandPaletteList>
-          <CommandPaletteEmpty>No results found.</CommandPaletteEmpty>
-          <CommandPaletteGroup heading="Suggestions">
-            <CommandPaletteItem>
-              <CalendarIcon className="mr-2 h-4 w-4" />
-              <span>Calendar</span>
-            </CommandPaletteItem>
-            <CommandPaletteItem>
-              <FaceIcon className="mr-2 h-4 w-4" />
-              <span>Search Emoji</span>
-            </CommandPaletteItem>
-            <CommandPaletteItem>
-              <RocketIcon className="mr-2 h-4 w-4" />
-              <span>Launch</span>
-            </CommandPaletteItem>
-          </CommandPaletteGroup>
-          <CommandPaletteSeparator />
-          <CommandPaletteGroup heading="Settings">
-            <CommandPaletteItem>
-              <PersonIcon className="mr-2 h-4 w-4" />
-              <span>Profile</span>
-              <CommandPaletteShortcut>⌘P</CommandPaletteShortcut>
-            </CommandPaletteItem>
-            <CommandPaletteItem>
-              <EnvelopeClosedIcon className="mr-2 h-4 w-4" />
-              <span>Mail</span>
-              <CommandPaletteShortcut>⌘B</CommandPaletteShortcut>
-            </CommandPaletteItem>
-            <CommandPaletteItem>
-              <GearIcon className="mr-2 h-4 w-4" />
-              <span>Settings</span>
-              <CommandPaletteShortcut>⌘S</CommandPaletteShortcut>
-            </CommandPaletteItem>
-          </CommandPaletteGroup>
-        </CommandPaletteList>
-      </CommandPaletteDialog>
-    </div>
-  )
-}
-
-export const Dialog: Story = {
-  parameters: {
-    docs: {
-      description: {
-        story: 'Command palette displayed in a dialog that can be opened with ⌘J keyboard shortcut.',
-      },
-    },
-  },
-  render: () => <CommandPaletteDialogExample />,
-}

package/dist/frontend-core/template/src/components/ui/command-palette/command-palette.tsx

@@ -1,134 +0,0 @@
-import { type DialogProps } from '@radix-ui/react-dialog'
-import { MagnifyingGlassIcon } from '@radix-ui/react-icons'
-
-import { Command as CommandPalettePrimitive } from 'cmdk'
-import * as React from 'react'
-
-import { Dialog, DialogContent } from '@components/ui/dialog/dialog'
-import { cn } from '@lib/utils'
-
-const CommandPalette = React.forwardRef<
-  React.ElementRef<typeof CommandPalettePrimitive>,
-  React.ComponentPropsWithoutRef<typeof CommandPalettePrimitive>
->(({ className, ...props }, ref) => (
-  <CommandPalettePrimitive
-    ref={ref}
-    className={cn(
-      'flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground',
-      className,
-    )}
-    {...props}
-  />
-))
-CommandPalette.displayName = CommandPalettePrimitive.displayName
-
-type CommandPaletteDialogProps = DialogProps
-
-const CommandPaletteDialog = ({ children, ...props }: CommandPaletteDialogProps) => {
-  return (
-    <Dialog {...props}>
-      <DialogContent className="overflow-hidden p-0">
-        <CommandPalette className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
-          {children}
-        </CommandPalette>
-      </DialogContent>
-    </Dialog>
-  )
-}
-
-const CommandPaletteInput = React.forwardRef<
-  React.ElementRef<typeof CommandPalettePrimitive.Input>,
-  React.ComponentPropsWithoutRef<typeof CommandPalettePrimitive.Input>
->(({ className, ...props }, ref) => (
-  // eslint-disable-next-line react/no-unknown-property
-  <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
-    <MagnifyingGlassIcon className="mr-2 h-4 w-4 shrink-0 opacity-50" />
-    <CommandPalettePrimitive.Input
-      ref={ref}
-      className={cn(
-        'flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',
-        className,
-      )}
-      {...props}
-    />
-  </div>
-))
-
-CommandPaletteInput.displayName = CommandPalettePrimitive.Input.displayName
-
-const CommandPaletteList = React.forwardRef<
-  React.ElementRef<typeof CommandPalettePrimitive.List>,
-  React.ComponentPropsWithoutRef<typeof CommandPalettePrimitive.List>
->(({ className, ...props }, ref) => (
-  <CommandPalettePrimitive.List
-    ref={ref}
-    className={cn('max-h-[300px] overflow-y-auto overflow-x-hidden', className)}
-    {...props}
-  />
-))
-
-CommandPaletteList.displayName = CommandPalettePrimitive.List.displayName
-
-const CommandPaletteEmpty = React.forwardRef<
-  React.ElementRef<typeof CommandPalettePrimitive.Empty>,
-  React.ComponentPropsWithoutRef<typeof CommandPalettePrimitive.Empty>
->((props, ref) => <CommandPalettePrimitive.Empty ref={ref} className="py-6 text-center text-sm" {...props} />)
-
-CommandPaletteEmpty.displayName = CommandPalettePrimitive.Empty.displayName
-
-const CommandPaletteGroup = React.forwardRef<
-  React.ElementRef<typeof CommandPalettePrimitive.Group>,
-  React.ComponentPropsWithoutRef<typeof CommandPalettePrimitive.Group>
->(({ className, ...props }, ref) => (
-  <CommandPalettePrimitive.Group
-    ref={ref}
-    className={cn(
-      'overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground',
-      className,
-    )}
-    {...props}
-  />
-))
-
-CommandPaletteGroup.displayName = CommandPalettePrimitive.Group.displayName
-
-const CommandPaletteSeparator = React.forwardRef<
-  React.ElementRef<typeof CommandPalettePrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof CommandPalettePrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <CommandPalettePrimitive.Separator ref={ref} className={cn('-mx-1 h-px bg-border', className)} {...props} />
-))
-CommandPaletteSeparator.displayName = CommandPalettePrimitive.Separator.displayName
-
-const CommandPaletteItem = React.forwardRef<
-  React.ElementRef<typeof CommandPalettePrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof CommandPalettePrimitive.Item>
->(({ className, ...props }, ref) => (
-  <CommandPalettePrimitive.Item
-    ref={ref}
-    className={cn(
-      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50',
-      className,
-    )}
-    {...props}
-  />
-))
-
-CommandPaletteItem.displayName = CommandPalettePrimitive.Item.displayName
-
-const CommandPaletteShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
-  return <span className={cn('ml-auto text-xs tracking-widest text-muted-foreground', className)} {...props} />
-}
-CommandPaletteShortcut.displayName = 'CommandPaletteShortcut'
-
-export {
-  CommandPalette,
-  CommandPaletteDialog,
-  CommandPaletteInput,
-  CommandPaletteList,
-  CommandPaletteEmpty,
-  CommandPaletteGroup,
-  CommandPaletteItem,
-  CommandPaletteShortcut,
-  CommandPaletteSeparator,
-}

package/dist/frontend-core/template/src/components/ui/content-frame/content-frame.stories.tsx

@@ -1,198 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite'
-import { ChevronLeftIcon, ChevronRightIcon } from '@radix-ui/react-icons'
-import { cn } from '@lib/utils'
-
-import { Button } from '@components/ui/button/button'
-
-import { ContentFrame } from './content-frame'
-import { expect, userEvent, screen } from 'storybook/test'
-import { useState } from 'react'
-import { Modal } from '@components/ui/modal/modal'
-import { Badge } from '@components/ui/badge/badge'
-
-const meta = {
-  title: 'ContentFrame',
-  component: ContentFrame,
-  tags: ['autodocs'],
-  parameters: {
-    layout: 'centered',
-  },
-  argTypes: {
-    title: {
-      control: 'text',
-    },
-    variant: {
-      control: 'select',
-      options: ['default', 'inverted'],
-    },
-  },
-} satisfies Meta<typeof ContentFrame>
-export default meta
-
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
-  args: {
-    title: 'Title',
-    variant: 'default',
-  },
-  render: (args) => (
-    <div className="w-[350px]">
-      <ContentFrame {...args}>
-        <div className="p-2">Content inside the frame</div>
-      </ContentFrame>
-    </div>
-  ),
-  play: async () => {
-    expect(screen.getByText('Title')).toBeVisible()
-    expect(screen.getByText('Content inside the frame')).toBeVisible()
-    const frame = screen.getByText('Content inside the frame').closest('div')
-  },
-}
-
-export const Variants: Story = {
-  args: { title: '' },
-  render: () => (
-    <div className="flex gap-2">
-      <div className="w-[200px]">
-        <ContentFrame title="default" variant="default">
-          <div className="p-2">Content</div>
-        </ContentFrame>
-      </div>
-      <div className="w-[200px]">
-        <ContentFrame title="inverted" variant="inverted">
-          <div className="p-2">Content</div>
-        </ContentFrame>
-      </div>
-    </div>
-  ),
-}
-
-export const WithTitleLink: Story = {
-  args: {
-    title: '',
-    titleLink: (
-      <a href="https://example.com/" target="_blank" rel="noopener noreferrer">
-        <h2 className="text-xl overflow-hidden text-ellipsis whitespace-nowrap">Title with Link</h2>
-      </a>
-    ),
-  },
-  render: (args) => (
-    <div className="w-[350px]">
-      <ContentFrame {...args}>
-        <div className="p-2">Content inside the frame</div>
-      </ContentFrame>
-    </div>
-  ),
-  play: async () => {
-    // Check that the title link exists and is correct
-    const link = screen.getByRole('link', { name: /title with link/i })
-    expect(link).toHaveAttribute('href', 'https://example.com/')
-  },
-}
-
-export const CollapsibleAndExpandable: Story = {
-  args: { title: '' },
-  render: () => {
-    const dummyText =
-      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam rutrum laoreet erat ac sodales. Pellentesque nec nunc in ipsum tincidunt congue sit amet in augue. Sed interdum consequat arcu, ac tempor nisl eleifend sed. Mauris gravida ipsum orci, sed vestibulum nisl commodo in. Aliquam ut dolor dui. Donec fermentum viverra faucibus. In aliquet erat et quam ornare, et accumsan magna ornare. Suspendisse potenti. Etiam a elit dui. Mauris et lectus vel metus lobortis luctus. Vestibulum elementum sit amet augue vel rutrum. Aenean sem turpis, viverra hendrerit consequat eget, vulputate sed nunc. Pellentesque sollicitudin diam nunc, vel pretium massa mattis at. Curabitur fringilla convallis mollis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam rutrum laoreet erat ac sodales. Pellentesque nec nunc in ipsum tincidunt congue sit amet in augue. Sed interdum consequat arcu, ac tempor nisl eleifend sed. Mauris gravida ipsum orci, sed vestibulum nisl commodo in. Aliquam ut dolor dui. Donec fermentum viverra faucibus. In aliquet erat et quam ornare, et accumsan magna ornare. Suspendisse potenti. Etiam a elit dui. Mauris et lectus vel metus lobortis luctus. Vestibulum elementum sit amet augue vel rutrum. Aenean sem turpis, viverra hendrerit consequat eget, vulputate sed nunc. Pellentesque sollicitudin diam nunc, vel pretium massa mattis at. Curabitur fringilla convallis mollis. '
-
-    const [isCollapsed, setIsCollapsed] = useState(false)
-    const [isExpanded, setIsExpanded] = useState(false)
-    return (
-      <>
-        <div className="w-[350px]">
-          <div
-            className={cn(
-              'relative h-[250px]',
-              isCollapsed ? 'min-w-[60px] max-w-[60px]' : 'min-w-[350px] max-w-[350px]',
-            )}
-          >
-            <ContentFrame
-              title="Collapsible and Expandable"
-              variant="inverted"
-              collapsed={isCollapsed}
-              onExpand={() => setIsExpanded(true)}
-            >
-              <div className="p-2">{dummyText}</div>
-            </ContentFrame>
-            <Button
-              title={isCollapsed ? 'Show normal' : 'Collapse'}
-              variant="neutral"
-              size="iconSm"
-              className="absolute top-1/2 right-0 transform -translate-y-1/2 translate-x-1/4 z-10 rounded-full bg-muted-foreground text-background"
-              onClick={() => setIsCollapsed(!isCollapsed)}
-            >
-              {isCollapsed ? <ChevronRightIcon /> : <ChevronLeftIcon />}
-            </Button>
-          </div>
-        </div>
-        <Modal isOpen={isExpanded} setIsOpen={setIsExpanded} title="Collapsible and Expandable">
-          <div className="p-2">{dummyText}</div>
-        </Modal>
-      </>
-    )
-  },
-  play: async () => {
-    // Collapse the frame
-    const collapseBtn = screen.getByRole('button', { name: /collapse/i })
-    await userEvent.click(collapseBtn)
-    // After collapse, check that the ChevronRightIcon is rendered (collapsed state)
-    expect(screen.getByRole('button', { name: /show normal/i })).toBeVisible()
-    const expandModal = screen.getByText('Collapsible and Expandable')
-    expect(expandModal).toBeVisible()
-  },
-}
-
-export const WithControlsAndIndicators: Story = {
-  args: {
-    title: '',
-  },
-  render: (args) => {
-    const [newsUnread, setNewsUnread] = useState(true)
-    return (
-      <div className="w-[350px]">
-        <ContentFrame
-          {...args}
-          title={newsUnread ? 'Unread News' : 'No unread News'}
-          controls={[
-            <Button key="c1" variant="outline" size="sm" onClick={() => setNewsUnread(!newsUnread)}>
-              {newsUnread ? 'Read all' : 'Unread all'}
-            </Button>,
-          ]}
-          indicators={
-            newsUnread
-              ? [
-                  <Badge
-                    data-testid="pill-label"
-                    key="i1"
-                    className="self-center bg-(--ring) rounded-full h-5 text-background font-bold px-2"
-                  >
-                    3
-                  </Badge>,
-                ]
-              : []
-          }
-        >
-          <div className="p-2">
-            {newsUnread ? (
-              <>
-                News 1<br />
-                News 2<br />
-                News 3
-              </>
-            ) : (
-              'No new content'
-            )}
-          </div>
-        </ContentFrame>
-      </div>
-    )
-  },
-  play: async () => {
-    // Check for control button
-    expect(screen.getByRole('button', { name: /read all|unread all/i })).toBeVisible()
-    // Check for indicator badge
-    expect(screen.getByTestId('pill-label')).toBeVisible()
-  },
-}

package/dist/frontend-core/template/src/components/ui/content-frame/content-frame.tsx

@@ -1,100 +0,0 @@
-import { EnterFullScreenIcon } from '@radix-ui/react-icons'
-
-import { cva, type VariantProps } from 'class-variance-authority'
-import { type PropsWithChildren, type ReactNode } from 'react'
-
-import { Button } from '@components/ui/button/button'
-import { Loader } from '@components/ui/loader/loader'
-import { cn } from '@lib/utils'
-
-const gridContentFrameVariants = cva('flex flex-col border-1 border-(--discreet-border) h-full w-full', {
-  variants: {
-    variant: {
-      default: '',
-      inverted: 'bg-sidebar-border border-background border-e-transparent border-t-0',
-    },
-  },
-  defaultVariants: {
-    variant: 'default',
-  },
-})
-
-const gridContentFrameHeaderVariants = cva('flex items-center overflow-hidden p-3 min-h-10 border-b-1', {
-  variants: {
-    variant: {
-      default: 'border-(--discreet-border)',
-      inverted: 'border-t-0 border-t-sidebar-border border-b-background',
-    },
-  },
-  defaultVariants: {
-    variant: 'default',
-  },
-})
-
-type Props = PropsWithChildren<{
-  title: string
-  controls?: ReactNode[]
-  indicators?: ReactNode[]
-  onExpand?: () => void
-  collapsed?: boolean
-  titleLink?: ReactNode
-  isLoading?: boolean
-}> &
-  VariantProps<typeof gridContentFrameVariants>
-
-export const ContentFrame = ({
-  title = '',
-  controls = [],
-  indicators = [],
-  children,
-  onExpand,
-  variant,
-  collapsed,
-  titleLink,
-  isLoading = false,
-}: Props) => {
-  return (
-    <div className={cn(gridContentFrameVariants({ variant }))}>
-      {collapsed ? (
-        <div className="flex gap-2.5 min-w-0 items-center [writing-mode:vertical-lr]">
-          <h2 className="text-xl flex self-center ms-4">{title}</h2>
-          {indicators.length > 0 && <div className="flex gap-2 whitespace-nowrap">{indicators}</div>}
-        </div>
-      ) : (
-        <>
-          {/* header */}
-          <div className={cn(gridContentFrameHeaderVariants({ variant }))}>
-            {/* Title + Indicators */}
-            <div className="flex flex-grow gap-2 overflow-hidden">
-              <h2 className="text-xl overflow-hidden text-ellipsis whitespace-nowrap">{titleLink ?? title}</h2>
-              {indicators.length > 0 && <div className="flex gap-2 whitespace-nowrap">{indicators}</div>}
-            </div>
-
-            {/* Controls */}
-            {controls.length > 0 && <div className="flex gap-2 whitespace-nowrap">{controls}</div>}
-
-            {/* Expand button */}
-            {onExpand && (
-              <Button
-                title="Expand"
-                onClick={onExpand}
-                variant="outline"
-                size="icon"
-                className="size-6 ml-2"
-                __e2e_test_id__={`${title.toLowerCase().replaceAll(' ', '-')}-modal-button`}
-              >
-                <EnterFullScreenIcon />
-              </Button>
-            )}
-          </div>
-
-          {/* content */}
-          <div className="h-full min-h-0 overflow-auto relative">
-            {children}
-            {isLoading && <Loader label="Loading..." />}
-          </div>
-        </>
-      )}
-    </div>
-  )
-}

package/dist/frontend-core/template/src/components/ui/context-menu/context-menu.stories.tsx

@@ -1,78 +0,0 @@
-import { Meta } from '@storybook/react-vite'
-
-import {
-  ContextMenu,
-  ContextMenuCheckboxItem,
-  ContextMenuContent,
-  ContextMenuItem,
-  ContextMenuLabel,
-  ContextMenuRadioGroup,
-  ContextMenuRadioItem,
-  ContextMenuSeparator,
-  ContextMenuShortcut,
-  ContextMenuSub,
-  ContextMenuSubContent,
-  ContextMenuSubTrigger,
-  ContextMenuTrigger,
-} from './context-menu'
-import type { StoryObj } from '@storybook/react-vite'
-
-const meta: Meta<typeof ContextMenu> = {
-  title: 'Context Menu',
-  component: ContextMenu,
-  tags: ['autodocs'],
-} satisfies Meta<typeof ContextMenu>
-
-export default meta
-
-export const Default: StoryObj<typeof meta> = {
-  render: () => (
-    <div className="flex items-center justify-center">
-      <ContextMenu>
-        <ContextMenuTrigger className="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm">
-          Right click here
-        </ContextMenuTrigger>
-        <ContextMenuContent className="w-64">
-          <ContextMenuItem inset>
-            Back
-            <ContextMenuShortcut>⌘[</ContextMenuShortcut>
-          </ContextMenuItem>
-          <ContextMenuItem inset disabled>
-            Forward
-            <ContextMenuShortcut>⌘]</ContextMenuShortcut>
-          </ContextMenuItem>
-          <ContextMenuItem inset>
-            Reload
-            <ContextMenuShortcut>⌘R</ContextMenuShortcut>
-          </ContextMenuItem>
-          <ContextMenuSub>
-            <ContextMenuSubTrigger inset>More Tools</ContextMenuSubTrigger>
-            <ContextMenuSubContent className="w-48">
-              <ContextMenuItem>
-                Save Page As...
-                <ContextMenuShortcut>⇧⌘S</ContextMenuShortcut>
-              </ContextMenuItem>
-              <ContextMenuItem>Create Shortcut...</ContextMenuItem>
-              <ContextMenuItem>Name Window...</ContextMenuItem>
-              <ContextMenuSeparator />
-              <ContextMenuItem>Developer Tools</ContextMenuItem>
-            </ContextMenuSubContent>
-          </ContextMenuSub>
-          <ContextMenuSeparator />
-          <ContextMenuCheckboxItem checked>
-            Show Bookmarks Bar
-            <ContextMenuShortcut>⌘⇧B</ContextMenuShortcut>
-          </ContextMenuCheckboxItem>
-          <ContextMenuCheckboxItem>Show Full URLs</ContextMenuCheckboxItem>
-          <ContextMenuSeparator />
-          <ContextMenuRadioGroup value="pedro">
-            <ContextMenuLabel inset>People</ContextMenuLabel>
-            <ContextMenuSeparator />
-            <ContextMenuRadioItem value="pedro">Pedro Duarte</ContextMenuRadioItem>
-            <ContextMenuRadioItem value="colm">Colm Tuite</ContextMenuRadioItem>
-          </ContextMenuRadioGroup>
-        </ContextMenuContent>
-      </ContextMenu>
-    </div>
-  ),
-}