Dropdown Menu

"use client";

import React from "react";
import { DropdownMenu } from "@/ui/components/DropdownMenu";
import { FeatherStar } from "@subframe/core";
import { FeatherPlus } from "@subframe/core";
import { FeatherEdit2 } from "@subframe/core";
import { FeatherTrash } from "@subframe/core";
import * as SubframeCore from "@subframe/core";

function DropdownMenuExample() {
  return (
    <SubframeCore.DropdownMenu.Root>
      <SubframeCore.DropdownMenu.Trigger asChild={true}>
        <span className="text-body font-body text-default-font">
          Dropdown Menu Trigger
        </span>
      </SubframeCore.DropdownMenu.Trigger>
      <SubframeCore.DropdownMenu.Portal>
        <SubframeCore.DropdownMenu.Content
          side="bottom"
          align="start"
          sideOffset={4}
          asChild={true}
        >
          <DropdownMenu>
            <DropdownMenu.DropdownItem icon={<FeatherStar />}>
              Favorite
            </DropdownMenu.DropdownItem>
            <DropdownMenu.DropdownItem icon={<FeatherPlus />}>
              Add
            </DropdownMenu.DropdownItem>
            <DropdownMenu.DropdownItem icon={<FeatherEdit2 />}>
              Edit
            </DropdownMenu.DropdownItem>
            <DropdownMenu.DropdownItem icon={<FeatherTrash />}>
              Delete
            </DropdownMenu.DropdownItem>
          </DropdownMenu>
        </SubframeCore.DropdownMenu.Content>
      </SubframeCore.DropdownMenu.Portal>
    </SubframeCore.DropdownMenu.Root>
  );
}

export default DropdownMenuExample;