@tohuhono/puck-blocks
Version:
A collection of puck components for building pages in OberonCMS
199 lines (198 loc) • 8.12 kB
JavaScript
import { jsxs, Fragment, jsx } from "react/jsx-runtime";
import * as React from "react";
import { PlusIcon, PaperPlaneIcon, CheckIcon } from "../../node_modules/.pnpm/@radix-ui_react-icons@1.3.2_react@18.3.1/node_modules/@radix-ui/react-icons/dist/react-icons.esm.js";
import { cn } from "@tohuhono/utils";
import { Avatar, AvatarFallback } from "@tohuhono/ui/avatar";
import { Button } from "@tohuhono/ui/button";
import { Card, CardHeader, CardContent, CardFooter } from "@tohuhono/ui/card";
import { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem } from "@tohuhono/ui/command";
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from "@tohuhono/ui/dialog";
import { Input } from "@tohuhono/ui/input";
import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from "@tohuhono/ui/tooltip";
const users = [
{
name: "Olivia Martin",
email: "m@example.com"
},
{
name: "Isabella Nguyen",
email: "isabella.nguyen@email.com"
},
{
name: "Emma Wilson",
email: "emma@example.com"
},
{
name: "Jackson Lee",
email: "lee@example.com"
},
{
name: "William Kim",
email: "will@email.com"
}
];
function CardsChat() {
const [open, setOpen] = React.useState(false);
const [selectedUsers, setSelectedUsers] = React.useState([]);
const [messages, setMessages] = React.useState([
{
role: "agent",
content: "Hi, how can I help you today?"
},
{
role: "user",
content: "Hey, I'm having trouble with my account."
},
{
role: "agent",
content: "What seems to be the problem?"
},
{
role: "user",
content: "I can't log in."
}
]);
const [input, setInput] = React.useState("");
const inputLength = input.trim().length;
return /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsxs(Card, { children: [
/* @__PURE__ */ jsxs(CardHeader, { className: "flex flex-row items-center", children: [
/* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-4", children: [
/* @__PURE__ */ jsx(Avatar, { children: /* @__PURE__ */ jsx(AvatarFallback, { children: "OM" }) }),
/* @__PURE__ */ jsxs("div", { children: [
/* @__PURE__ */ jsx("p", { className: "text-sm font-medium leading-none", children: "Sofia Davis" }),
/* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "m@example.com" })
] })
] }),
/* @__PURE__ */ jsx(TooltipProvider, { delayDuration: 0, children: /* @__PURE__ */ jsxs(Tooltip, { children: [
/* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
Button,
{
size: "icon",
variant: "outline",
className: "ml-auto rounded-full",
onClick: () => setOpen(true),
children: [
/* @__PURE__ */ jsx(PlusIcon, { className: "h-4 w-4" }),
/* @__PURE__ */ jsx("span", { className: "sr-only", children: "New message" })
]
}
) }),
/* @__PURE__ */ jsx(TooltipContent, { sideOffset: 10, children: "New message" })
] }) })
] }),
/* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx("div", { className: "space-y-4", children: messages.map((message, index) => /* @__PURE__ */ jsx(
"div",
{
className: cn(
"flex w-max max-w-[75%] flex-col gap-2 rounded-lg px-3 py-2 text-sm",
message.role === "user" ? "ml-auto bg-primary text-primary-foreground" : "bg-muted"
),
children: message.content
},
index
)) }) }),
/* @__PURE__ */ jsx(CardFooter, { children: /* @__PURE__ */ jsxs(
"form",
{
onSubmit: (event) => {
event.preventDefault();
if (inputLength === 0) {
return;
}
setMessages([
...messages,
{
role: "user",
content: input
}
]);
setInput("");
},
className: "flex w-full items-center space-x-2",
children: [
/* @__PURE__ */ jsx(
Input,
{
id: "message",
placeholder: "Type your message...",
className: "flex-1",
autoComplete: "off",
value: input,
onChange: (event) => setInput(event.target.value)
}
),
/* @__PURE__ */ jsxs(Button, { type: "submit", size: "icon", disabled: inputLength === 0, children: [
/* @__PURE__ */ jsx(PaperPlaneIcon, { className: "h-4 w-4" }),
/* @__PURE__ */ jsx("span", { className: "sr-only", children: "Send" })
] })
]
}
) })
] }),
/* @__PURE__ */ jsx(Dialog, { open, onOpenChange: setOpen, children: /* @__PURE__ */ jsxs(DialogContent, { className: "gap-0 p-0 outline-none", children: [
/* @__PURE__ */ jsxs(DialogHeader, { className: "px-4 pb-4 pt-5", children: [
/* @__PURE__ */ jsx(DialogTitle, { children: "New message" }),
/* @__PURE__ */ jsx(DialogDescription, { children: "Invite a user to this thread. This will create a new group message." })
] }),
/* @__PURE__ */ jsxs(Command, { className: "overflow-hidden rounded-t-none border-t bg-transparent", children: [
/* @__PURE__ */ jsx(CommandInput, { placeholder: "Search user..." }),
/* @__PURE__ */ jsxs(CommandList, { children: [
/* @__PURE__ */ jsx(CommandEmpty, { children: "No users found." }),
/* @__PURE__ */ jsx(CommandGroup, { className: "p-2", children: users.map((user) => /* @__PURE__ */ jsxs(
CommandItem,
{
className: "flex items-center px-2",
onSelect: () => {
if (selectedUsers.includes(user)) {
return setSelectedUsers(
selectedUsers.filter(
(selectedUser) => selectedUser !== user
)
);
}
return setSelectedUsers(
[...users].filter(
(u) => [...selectedUsers, user].includes(u)
)
);
},
children: [
/* @__PURE__ */ jsx(Avatar, { children: /* @__PURE__ */ jsx(AvatarFallback, { children: user.name[0] }) }),
/* @__PURE__ */ jsxs("div", { className: "ml-2", children: [
/* @__PURE__ */ jsx("p", { className: "text-sm font-medium leading-none", children: user.name }),
/* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: user.email })
] }),
selectedUsers.includes(user) ? /* @__PURE__ */ jsx(CheckIcon, { className: "ml-auto flex h-5 w-5 text-primary" }) : null
]
},
user.email
)) })
] })
] }),
/* @__PURE__ */ jsxs(DialogFooter, { className: "flex items-center border-t p-4 sm:justify-between", children: [
selectedUsers.length > 0 ? /* @__PURE__ */ jsx("div", { className: "flex -space-x-2 overflow-hidden", children: selectedUsers.map((user) => /* @__PURE__ */ jsx(
Avatar,
{
className: "inline-block border-2 border-background",
children: /* @__PURE__ */ jsx(AvatarFallback, { children: user.name[0] })
},
user.email
)) }) : /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Select users to add to this thread." }),
/* @__PURE__ */ jsx(
Button,
{
disabled: selectedUsers.length < 2,
onClick: () => {
setOpen(false);
},
children: "Continue"
}
)
] })
] }) })
] });
}
export {
CardsChat
};