DropdownMenu component doesn't work

[floyergilmour]

The DropdownMenu component doesn't show the list of the DropdownMenuItems when clicked. The component is located in packages/ui/src/components/ui

And I'm using the component in apps/my_app/app/page.tsx

"use client"
import { Button } from "@repo/ui/components/ui/button"
import { Badge } from "@ui/components/ui/badge"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger
} from "@ui/components/ui/dropdown-menu"
import { Moon, Sun } from "lucide-react"
import * as React from "react"
import { useTheme } from "next-themes"

export default function Page() {
  const { setTheme } = useTheme()

  return (
    <main>
      <Button
        onClick={() => {
          console.log("Setting theme to light")
        }}
      >
        Click me
      </Button>
      <Badge variant="destructive">hello</Badge>
      <DropdownMenu>
        <DropdownMenuTrigger asChild>
          <Button variant="outline" size="icon">
            <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
            <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
            <span className="sr-only">Toggle theme</span>
          </Button>
        </DropdownMenuTrigger>
        <DropdownMenuContent align="end">
          <DropdownMenuItem onClick={() => setTheme("light")}>
            Light
          </DropdownMenuItem>
          <DropdownMenuItem onClick={() => setTheme("dark")}>
            Dark
          </DropdownMenuItem>
          <DropdownMenuItem onClick={() => setTheme("system")}>
            System
          </DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
    </main>
  )
}

I'm I missing something here?

[floyergilmour]

@dan5py any ideas?

[floyergilmour]

never mind i removed the html and body tag, that why i broke the whole thing