@tohuhono/puck-blocks/dist/components/cards/team-members.js

A collection of puck components for building pages in OberonCMS

"use client";
import { jsxs, jsx } from "react/jsx-runtime";
import { ChevronDownIcon } from "../../node_modules/.pnpm/@radix-ui_react-icons@1.3.2_react@19.2.4/node_modules/@radix-ui/react-icons/dist/react-icons.esm.js";
import { Avatar, AvatarFallback } from "@tohuhono/ui/avatar";
import { Button } from "@tohuhono/ui/button";
import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "@tohuhono/ui/card";
import { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem } from "@tohuhono/ui/command";
import { Popover, PopoverTrigger, PopoverContent } from "@tohuhono/ui/popover";
function CardsTeamMembers() {
  return /* @__PURE__ */ jsxs(Card, { children: [
    /* @__PURE__ */ jsxs(CardHeader, { children: [
      /* @__PURE__ */ jsx(CardTitle, { children: "Team Members" }),
      /* @__PURE__ */ jsx(CardDescription, { children: "Invite your team members to collaborate." })
    ] }),
    /* @__PURE__ */ jsxs(CardContent, { className: "grid gap-6", children: [
      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between space-x-4", children: [
        /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-4", children: [
          /* @__PURE__ */ jsx(Avatar, { className: "size-8", children: /* @__PURE__ */ jsx(AvatarFallback, { children: "OM" }) }),
          /* @__PURE__ */ jsxs("div", { children: [
            /* @__PURE__ */ jsx("p", { className: "text-sm leading-none font-medium", children: "Sofia Davis" }),
            /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "m@example.com" })
          ] })
        ] }),
        /* @__PURE__ */ jsxs(Popover, { children: [
          /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", className: "ml-auto", children: [
            "Owner",
            " ",
            /* @__PURE__ */ jsx(ChevronDownIcon, { className: "ml-2 size-4 text-muted-foreground" })
          ] }) }),
          /* @__PURE__ */ jsx(PopoverContent, { className: "p-0", align: "end", children: /* @__PURE__ */ jsxs(Command, { children: [
            /* @__PURE__ */ jsx(CommandInput, { placeholder: "Select new role..." }),
            /* @__PURE__ */ jsxs(CommandList, { children: [
              /* @__PURE__ */ jsx(CommandEmpty, { children: "No roles found." }),
              /* @__PURE__ */ jsxs(CommandGroup, { children: [
                /* @__PURE__ */ jsxs(CommandItem, { className: "flex flex-col items-start space-y-1 px-4 py-2", children: [
                  /* @__PURE__ */ jsx("p", { children: "Viewer" }),
                  /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Can view and comment." })
                ] }),
                /* @__PURE__ */ jsxs(CommandItem, { className: "flex flex-col items-start space-y-1 px-4 py-2", children: [
                  /* @__PURE__ */ jsx("p", { children: "Developer" }),
                  /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Can view, comment and edit." })
                ] }),
                /* @__PURE__ */ jsxs(CommandItem, { className: "flex flex-col items-start space-y-1 px-4 py-2", children: [
                  /* @__PURE__ */ jsx("p", { children: "Billing" }),
                  /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Can view, comment and manage billing." })
                ] }),
                /* @__PURE__ */ jsxs(CommandItem, { className: "flex flex-col items-start space-y-1 px-4 py-2", children: [
                  /* @__PURE__ */ jsx("p", { children: "Owner" }),
                  /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Admin-level access to all resources." })
                ] })
              ] })
            ] })
          ] }) })
        ] })
      ] }),
      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between space-x-4", children: [
        /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-4", children: [
          /* @__PURE__ */ jsx(Avatar, { className: "size-8", children: /* @__PURE__ */ jsx(AvatarFallback, { children: "JL" }) }),
          /* @__PURE__ */ jsxs("div", { children: [
            /* @__PURE__ */ jsx("p", { className: "text-sm leading-none font-medium", children: "Jackson Lee" }),
            /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "p@example.com" })
          ] })
        ] }),
        /* @__PURE__ */ jsxs(Popover, { children: [
          /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", className: "ml-auto", children: [
            "Member",
            " ",
            /* @__PURE__ */ jsx(ChevronDownIcon, { className: "ml-2 size-4 text-muted-foreground" })
          ] }) }),
          /* @__PURE__ */ jsx(PopoverContent, { className: "p-0", align: "end", children: /* @__PURE__ */ jsxs(Command, { children: [
            /* @__PURE__ */ jsx(CommandInput, { placeholder: "Select new role..." }),
            /* @__PURE__ */ jsxs(CommandList, { children: [
              /* @__PURE__ */ jsx(CommandEmpty, { children: "No roles found." }),
              /* @__PURE__ */ jsxs(CommandGroup, { className: "p-1.5", children: [
                /* @__PURE__ */ jsxs(CommandItem, { className: "flex flex-col items-start space-y-1 px-4 py-2", children: [
                  /* @__PURE__ */ jsx("p", { children: "Viewer" }),
                  /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Can view and comment." })
                ] }),
                /* @__PURE__ */ jsxs(CommandItem, { className: "flex flex-col items-start space-y-1 px-4 py-2", children: [
                  /* @__PURE__ */ jsx("p", { children: "Developer" }),
                  /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Can view, comment and edit." })
                ] }),
                /* @__PURE__ */ jsxs(CommandItem, { className: "flex flex-col items-start space-y-1 px-4 py-2", children: [
                  /* @__PURE__ */ jsx("p", { children: "Billing" }),
                  /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Can view, comment and manage billing." })
                ] }),
                /* @__PURE__ */ jsxs(CommandItem, { className: "flex flex-col items-start space-y-1 px-4 py-2", children: [
                  /* @__PURE__ */ jsx("p", { children: "Owner" }),
                  /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Admin-level access to all resources." })
                ] })
              ] })
            ] })
          ] }) })
        ] })
      ] }),
      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between space-x-4", children: [
        /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-4", children: [
          /* @__PURE__ */ jsx(Avatar, { className: "size-8", children: /* @__PURE__ */ jsx(AvatarFallback, { children: "IN" }) }),
          /* @__PURE__ */ jsxs("div", { children: [
            /* @__PURE__ */ jsx("p", { className: "text-sm leading-none font-medium", children: "Isabella Nguyen" }),
            /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "i@example.com" })
          ] })
        ] }),
        /* @__PURE__ */ jsxs(Popover, { children: [
          /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", className: "ml-auto", children: [
            "Member",
            " ",
            /* @__PURE__ */ jsx(ChevronDownIcon, { className: "ml-2 size-4 text-muted-foreground" })
          ] }) }),
          /* @__PURE__ */ jsx(PopoverContent, { className: "p-0", align: "end", children: /* @__PURE__ */ jsxs(Command, { children: [
            /* @__PURE__ */ jsx(CommandInput, { placeholder: "Select new role..." }),
            /* @__PURE__ */ jsxs(CommandList, { children: [
              /* @__PURE__ */ jsx(CommandEmpty, { children: "No roles found." }),
              /* @__PURE__ */ jsxs(CommandGroup, { className: "p-1.5", children: [
                /* @__PURE__ */ jsxs(CommandItem, { className: "flex flex-col items-start space-y-1 px-4 py-2", children: [
                  /* @__PURE__ */ jsx("p", { children: "Viewer" }),
                  /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Can view and comment." })
                ] }),
                /* @__PURE__ */ jsxs(CommandItem, { className: "flex flex-col items-start space-y-1 px-4 py-2", children: [
                  /* @__PURE__ */ jsx("p", { children: "Developer" }),
                  /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Can view, comment and edit." })
                ] }),
                /* @__PURE__ */ jsxs(CommandItem, { className: "flex flex-col items-start space-y-1 px-4 py-2", children: [
                  /* @__PURE__ */ jsx("p", { children: "Billing" }),
                  /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Can view, comment and manage billing." })
                ] }),
                /* @__PURE__ */ jsxs(CommandItem, { className: "flex flex-col items-start space-y-1 px-4 py-2", children: [
                  /* @__PURE__ */ jsx("p", { children: "Owner" }),
                  /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Admin-level access to all resources." })
                ] })
              ] })
            ] })
          ] }) })
        ] })
      ] })
    ] })
  ] });
}
export {
  CardsTeamMembers
};