20 lines
1.1 KiB
TypeScript
20 lines
1.1 KiB
TypeScript
"use client";
|
|
|
|
import { useState, type ReactNode } from "react";
|
|
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
export function CommissionTicketPanels({ summary, chat }: { summary: ReactNode; chat: ReactNode }) {
|
|
const [active, setActive] = useState<"chat" | "summary">("chat");
|
|
return <div className="flex min-h-0 flex-1 flex-col gap-2 lg:grid lg:grid-cols-[minmax(0,300px)_minmax(0,1fr)] lg:grid-rows-[minmax(0,1fr)] lg:gap-4">
|
|
<ToggleGroup aria-label="ส่วนของ Ticket" variant="outline" size="sm" value={[active]}
|
|
onValueChange={(values) => { if (values[0] === "chat" || values[0] === "summary") setActive(values[0]); }}
|
|
className="shrink-0 lg:hidden">
|
|
<ToggleGroupItem value="chat">แชต</ToggleGroupItem>
|
|
<ToggleGroupItem value="summary">รายละเอียดคำขอ</ToggleGroupItem>
|
|
</ToggleGroup>
|
|
<div className={cn("min-h-0 min-w-0 flex-1", active !== "summary" && "hidden lg:block")}>{summary}</div>
|
|
<div className={cn("min-h-0 min-w-0 flex-1", active !== "chat" && "hidden lg:block")}>{chat}</div>
|
|
</div>;
|
|
}
|