dress/resources/js/pages/admin/manage/order/partials/printer-settings.tsx

83 lines
3.1 KiB
TypeScript

import { Bluetooth, Printer, Unplug, Usb } from 'lucide-react';
import { Button } from '@/components/ui/button';
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuRadioGroup,
DropdownMenuRadioItem,
DropdownMenuSeparator,
DropdownMenuSub,
DropdownMenuSubContent,
DropdownMenuSubTrigger,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
interface PrinterSettingsProps {
isConnected: boolean;
name: string | null;
paperSize: string;
onConnectBluetooth: () => void;
onConnectUsb: () => void;
onDisconnect: () => void;
onPaperSizeChange: (size: any) => void;
}
export function PrinterSettings({
isConnected,
name,
paperSize,
onConnectBluetooth,
onConnectUsb,
onDisconnect,
onPaperSizeChange
}: PrinterSettingsProps) {
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant={isConnected ? "outline" : "secondary"} className="gap-2">
<Printer className="size-4" />
{isConnected ? name : 'Hubungkan Printer'}
{isConnected && <div className="size-2 rounded-full bg-green-500 animate-pulse" />}
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end" className="w-56">
<DropdownMenuLabel>Koneksi Printer</DropdownMenuLabel>
<DropdownMenuSeparator />
{isConnected ? (
<>
<DropdownMenuSub>
<DropdownMenuSubTrigger>
Ukuran Kertas: {paperSize}mm
</DropdownMenuSubTrigger>
<DropdownMenuSubContent>
<DropdownMenuRadioGroup value={paperSize} onValueChange={onPaperSizeChange}>
<DropdownMenuRadioItem value="58">58mm</DropdownMenuRadioItem>
<DropdownMenuRadioItem value="80">80mm</DropdownMenuRadioItem>
</DropdownMenuRadioGroup>
</DropdownMenuSubContent>
</DropdownMenuSub>
<DropdownMenuSeparator />
<DropdownMenuItem onClick={onDisconnect} variant="destructive">
<Unplug className="mr-2 size-4" />
Putus Koneksi
</DropdownMenuItem>
</>
) : (
<>
<DropdownMenuItem onClick={onConnectBluetooth}>
<Bluetooth className="mr-2 size-4" />
Bluetooth
</DropdownMenuItem>
<DropdownMenuItem onClick={onConnectUsb}>
<Usb className="mr-2 size-4" />
USB
</DropdownMenuItem>
</>
)}
</DropdownMenuContent>
</DropdownMenu>
);
}