{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "ksier",
  "type": "registry:block",
  "title": "Ksier",
  "description": "Ksier",
  "files": [
    {
      "path": "components/usages/ksierusage.tsx",
      "content": "import { Resto } from \"@/registry/open-source/ksier\";\n\nexport default function Usage() {\n\treturn <Resto />;\n}\n",
      "type": "registry:block",
      "target": "~/example.tsx"
    },
    {
      "path": "components/usages/ksierusage.tsx",
      "content": "import { Resto } from \"@/registry/open-source/ksier\";\n\nexport default function Usage() {\n\treturn <Resto />;\n}\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/open-source/ksier.tsx",
      "content": "// Credit:\n// https://github.com/nurulid/ui-component-collections/blob/main/src/components/ksier/Total.tsx\n\nimport React, { useState } from \"react\";\n\nimport {\n\tBanknote,\n\tCheckCircle2,\n\tQrCode,\n\tReceiptText,\n\tUtensils,\n} from \"lucide-react\";\n\nimport { cn } from \"@/registry/utilities/cn\";\n\nexport interface MenuItem {\n\tname: string;\n\tprice: string;\n\ttype: string;\n}\n\nexport const Total = ({\n\ttotal,\n\tonOrder,\n\tonPaymentMethodChange,\n\tpaymentMethod,\n\tfoodLength,\n\tdrinkLength,\n\tonCancel,\n}: {\n\ttotal: number;\n\tonOrder: () => void;\n\tonPaymentMethodChange: (method: string) => void;\n\tpaymentMethod: string;\n\tfoodLength: number;\n\tdrinkLength: number;\n\tonCancel?: () => void;\n}) => {\n\tconst [selectedPaymentMethod, setSelectedPaymentMethod] =\n\t\tuseState<string>(\"\");\n\n\tconst handlePaymentMethodSelect = (method: string) => {\n\t\tsetSelectedPaymentMethod(method);\n\t\tonPaymentMethodChange(method); // Notify parent component of the change\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<div\n\t\t\t\tclassName={[\n\t\t\t\t\t\"p-5 space-y-4\",\n\t\t\t\t\ttotal > 0\n\t\t\t\t\t\t? \"bg-green-50/50 border border-green-300\"\n\t\t\t\t\t\t: \"bg-gray-50/50 border border-gray-300\",\n\t\t\t\t].join(\" \")}\n\t\t\t>\n\t\t\t\t<div className=\"space-y-2\">\n\t\t\t\t\t<div>\n\t\t\t\t\t\t<div className=\"flex items-center justify-between\">\n\t\t\t\t\t\t\t<span className=\"text-lg\">Total:</span>\n\t\t\t\t\t\t\t<span className=\"text-xs opacity-50\">Order ID: 0001</span>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<p className=\"text-4xl font-semibold flex items-start gap-2\">\n\t\t\t\t\t\t\t<span className=\"text-2xl\">Rp.</span>{\" \"}\n\t\t\t\t\t\t\t{formatThousandSeparator(total)}\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<p className=\"opacity-50 text-sm\">\n\t\t\t\t\t\t{foodLength} foods, {drinkLength} drinks\n\t\t\t\t\t</p>\n\t\t\t\t</div>\n\t\t\t\t<hr className=\"border-gray-200\" />\n\t\t\t\t<div className=\"space-y-4\">\n\t\t\t\t\t<p className=\"opacity-50 text-sm\">\n\t\t\t\t\t\tPayment method:{\" \"}\n\t\t\t\t\t\t<span className=\"font-semibold\">{paymentMethod}</span>\n\t\t\t\t\t</p>\n\t\t\t\t\t<div className=\"flex gap-4 justify-end\">\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\tclassName={`py-1 px-2 border ${paymentMethod === \"Cash\"\n\t\t\t\t\t\t\t\t\t? \"bg-white border-black\"\n\t\t\t\t\t\t\t\t\t: \"border-white\"\n\t\t\t\t\t\t\t\t} bg-gray-200`}\n\t\t\t\t\t\t\tonClick={() => handlePaymentMethodSelect(\"Cash\")}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Banknote className=\"inline-block mr-1\" />\n\t\t\t\t\t\t\t<span className=\"text-xs font-semibold\">Cash</span>\n\t\t\t\t\t\t</button>\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\tclassName={`py-1 px-2 border ${paymentMethod === \"QRIS\"\n\t\t\t\t\t\t\t\t\t? \"bg-white border-black\"\n\t\t\t\t\t\t\t\t\t: \"border-white\"\n\t\t\t\t\t\t\t\t} bg-gray-200`}\n\t\t\t\t\t\t\tonClick={() => handlePaymentMethodSelect(\"QRIS\")}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<QrCode className=\"inline-block mr-1\" />\n\t\t\t\t\t\t\t<span className=\"text-xs font-semibold\">QRIS</span>\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<button\n\t\t\t\tonClick={onOrder}\n\t\t\t\tdisabled={!total || !paymentMethod} // Disable if no total or no payment method selected}\n\t\t\t\tclassName={[\n\t\t\t\t\t\"w-full border border-green-500 shadow-md bg-green-300 btn\",\n\t\t\t\t].join(\" \")}\n\t\t\t>\n\t\t\t\tOrder\n\t\t\t</button>\n\t\t\t{/* <button\n        onClick={onCancel}\n        className=\"w-full border border-black bg-black text-white mt-auto btn\"\n      >\n        New order\n      </button> */}\n\t\t</>\n\t);\n};\n\nexport function formatThousandSeparator(amount: number | string) {\n\treturn amount.toString().replace(/\\B(?=(\\d{3})+(?!\\d))/g, \".\");\n}\n\nexport const SelectedMenu = ({\n\tselectedFoods,\n\tselectedDrinks,\n\tonCancel,\n}: {\n\tselectedFoods: MenuItem[];\n\tselectedDrinks: MenuItem[];\n\tonCancel: () => void;\n}) => {\n\treturn (\n\t\t<>\n\t\t\t<KsierSection\n\t\t\t\ttitle=\"Selected menu\"\n\t\t\t\ticon={CheckCircle2}\n\t\t\t\tclassName=\"min-w-[270px] px-0\"\n\t\t\t>\n\t\t\t\t<div className=\"flex flex-col gap-4\">\n\t\t\t\t\t<div className=\"h-[35dvh] overflow-auto space-y-4\">\n\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t<h3 className=\"font-semibold\">Foods</h3>\n\t\t\t\t\t\t\t{selectedFoods.length > 0 ? (\n\t\t\t\t\t\t\t\t<ul>\n\t\t\t\t\t\t\t\t\t{selectedFoods.map((food, index) => (\n\t\t\t\t\t\t\t\t\t\t<li\n\t\t\t\t\t\t\t\t\t\t\tkey={index}\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"py-2 not-last:border-b border-gray-100\"\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{food.name}\n\t\t\t\t\t\t\t\t\t\t\t<div className=\"flex items-center justify-between text-xs opacity-50\">\n\t\t\t\t\t\t\t\t\t\t\t\t<span>1x</span>\n\t\t\t\t\t\t\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t\t\t\t\t\t\tRp. {formatThousandSeparator(food.price)}\n\t\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t</ul>\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<p className=\"opacity-50\">No foods selected</p>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t<h3 className=\"font-semibold\">Drinks</h3>\n\t\t\t\t\t\t\t{selectedDrinks.length > 0 ? (\n\t\t\t\t\t\t\t\t<ul>\n\t\t\t\t\t\t\t\t\t{selectedDrinks.map((drink, index) => (\n\t\t\t\t\t\t\t\t\t\t<li\n\t\t\t\t\t\t\t\t\t\t\tkey={index}\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"py-2 not-last:border-b border-gray-100\"\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{drink.name}\n\t\t\t\t\t\t\t\t\t\t\t<div className=\"flex items-center justify-between text-xs opacity-50\">\n\t\t\t\t\t\t\t\t\t\t\t\t<span>1x</span>\n\t\t\t\t\t\t\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t\t\t\t\t\t\tRp.{\" \"}\n\t\t\t\t\t\t\t\t\t\t\t\t\t{formatThousandSeparator(drink.price)}\n\t\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t</ul>\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<p className=\"opacity-50\">No drinks selected</p>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t\t{selectedFoods.length > 0 || selectedDrinks.length > 0 ? (\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\tonClick={onCancel}\n\t\t\t\t\t\t\tclassName=\"w-full border border-black bg-black text-white mt-auto btn\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\tCancel\n\t\t\t\t\t\t</button>\n\t\t\t\t\t) : null}\n\t\t\t\t</div>\n\t\t\t</KsierSection>\n\t\t</>\n\t);\n};\n\nconst KsierSection = ({\n\ticon: Icon,\n\ttitle,\n\tchildren,\n\tclassName,\n}: {\n\ticon: React.ElementType;\n\ttitle: string;\n\tchildren: React.ReactNode;\n}) => {\n\treturn (\n\t\t<div className={cn(\"p-5 space-y-2\", className)}>\n\t\t\t<h2 className=\"p-2 text-lg flex items-center gap-2 border-b border-green-200 font-semibold\">\n\t\t\t\t<Icon className=\"text-green-500\" /> {title}\n\t\t\t</h2>\n\t\t\t<div className=\"p-2\">{children}</div>\n\t\t</div>\n\t);\n};\n\nexport const Resto = () => {\n\tconst [selectedFoodItems, setSelectedFoodItems] = useState<MenuItem[]>([]);\n\tconst [selectedDrinkItems, setSelectedDrinkItems] = useState<MenuItem[]>([]);\n\tconst [orderedItems, setOrderedItems] = useState<MenuItem[]>([]);\n\tconst [paymentMethod, setPaymentMethod] = useState<string>(\"\");\n\n\tconst handleSelectFoodItem = (item: MenuItem) => {\n\t\tif (selectedFoodItems.some((selected) => selected.name === item.name)) {\n\t\t\tsetSelectedFoodItems(\n\t\t\t\tselectedFoodItems.filter((i) => i.name !== item.name)\n\t\t\t);\n\t\t} else {\n\t\t\tsetSelectedFoodItems([...selectedFoodItems, item]);\n\t\t}\n\t};\n\n\tconst handleSelectDrinkItem = (item: MenuItem) => {\n\t\tif (selectedDrinkItems.some((selected) => selected.name === item.name)) {\n\t\t\tsetSelectedDrinkItems(\n\t\t\t\tselectedDrinkItems.filter((i) => i.name !== item.name)\n\t\t\t);\n\t\t} else {\n\t\t\tsetSelectedDrinkItems([...selectedDrinkItems, item]);\n\t\t}\n\t};\n\n\tconst handleCancel = () => {\n\t\tsetSelectedFoodItems([]);\n\t\tsetSelectedDrinkItems([]);\n\t\tsetOrderedItems([]);\n\t\tsetPaymentMethod(\"\");\n\t};\n\n\tconst handleOrder = () => {\n\t\tsetOrderedItems([...selectedFoodItems, ...selectedDrinkItems]);\n\t\t// handleCancel(); // Optionally clear selections after ordering\n\t};\n\n\tconst handlePaymentMethodChange = (method: string) => {\n\t\tsetPaymentMethod(method);\n\t};\n\n\t// Function to calculate the total price\n\tconst calculateTotalPrice = (items: MenuItem[]) => {\n\t\treturn items.reduce((total, item) => total + parseFloat(item.price), 0);\n\t};\n\n\t// Calculate totals for food and drinks\n\tconst totalFoodPrice = calculateTotalPrice(selectedFoodItems);\n\tconst totalDrinkPrice = calculateTotalPrice(selectedDrinkItems);\n\n\t// Calculate the grand total\n\tconst grandTotal = totalFoodPrice + totalDrinkPrice;\n\tconst foodLength = selectedFoodItems.length;\n\tconst drinkLength = selectedDrinkItems.length;\n\n\treturn (\n\t\t<div className=\"flex gap-3 w-full\">\n\t\t\t<Receipt\n\t\t\t\torderedMenu={orderedItems}\n\t\t\t\ttotal={grandTotal}\n\t\t\t\tpaymentMethod={paymentMethod}\n\t\t\t\tfoodLength={foodLength}\n\t\t\t\tdrinkLength={drinkLength}\n\t\t\t/>\n\t\t\t<Menus\n\t\t\t\tonFoodItemSelect={handleSelectFoodItem}\n\t\t\t\tonDrinkItemSelect={handleSelectDrinkItem}\n\t\t\t\tselectedFoods={selectedFoodItems}\n\t\t\t\tselectedDrinks={selectedDrinkItems}\n\t\t\t/>\n\t\t\t<div className=\"space-y-4\">\n\t\t\t\t<Total\n\t\t\t\t\ttotal={grandTotal ?? 0}\n\t\t\t\t\tonOrder={handleOrder}\n\t\t\t\t\tonPaymentMethodChange={handlePaymentMethodChange}\n\t\t\t\t\tpaymentMethod={paymentMethod}\n\t\t\t\t\tfoodLength={foodLength}\n\t\t\t\t\tdrinkLength={drinkLength}\n\t\t\t\t\tonCancel={handleCancel}\n\t\t\t\t/>\n\t\t\t\t<SelectedMenu\n\t\t\t\t\tselectedFoods={selectedFoodItems}\n\t\t\t\t\tselectedDrinks={selectedDrinkItems}\n\t\t\t\t\tonCancel={handleCancel}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n\nexport const Receipt = ({\n\torderedMenu,\n\ttotal,\n\tpaymentMethod,\n\tfoodLength,\n\tdrinkLength,\n}: {\n\torderedMenu: MenuItem[];\n\ttotal: number | string;\n\tpaymentMethod?: string;\n\tfoodLength: number;\n\tdrinkLength: number;\n}) => {\n\treturn (\n\t\t<KsierSection\n\t\t\ttitle=\"Receipt\"\n\t\t\ticon={ReceiptText}\n\t\t\tclassName=\"min-w-[280px] p-0\"\n\t\t>\n\t\t\t<div className=\"line border h-3 rounded-full bg-gray-200 p-1\">\n\t\t\t\t<div className=\"receipt font-inconsolata\">\n\t\t\t\t\t{orderedMenu.length > 0 ? (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<div className=\"receipt-content bg-white w-full min-h-[80px] shadow-2xs border-[0.5px] border-gray-200 border-t-0 relative\">\n\t\t\t\t\t\t\t\t<div className=\"p-4 pb-6 space-y-2 border-t-2 border-gray-200 border-dashed\">\n\t\t\t\t\t\t\t\t\t<div className=\"text-sm opacity-50\">\n\t\t\t\t\t\t\t\t\t\t<h3>Order ID: 0001</h3>\n\t\t\t\t\t\t\t\t\t\t<p>Date: {new Date().toLocaleDateString()}</p>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t<ul>\n\t\t\t\t\t\t\t\t\t\t{orderedMenu.map((menu, index) => (\n\t\t\t\t\t\t\t\t\t\t\t<li\n\t\t\t\t\t\t\t\t\t\t\t\tkey={index}\n\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"py-2 not-last:border-b border-gray-100\"\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t{menu.name}\n\t\t\t\t\t\t\t\t\t\t\t\t<div className=\"flex items-center justify-between text-xs opacity-50\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<span>1x</span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tRp.{\" \"}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t{formatThousandSeparator(menu.price)}\n\t\t\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t\t</ul>\n\t\t\t\t\t\t\t\t\t<div className=\"pt-4 border-t border-dashed border-gray-300\">\n\t\t\t\t\t\t\t\t\t\t<p className=\"opacity-50 text-sm\">\n\t\t\t\t\t\t\t\t\t\t\t{foodLength} foods, {drinkLength} drinks\n\t\t\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t\t\t\t<p className=\"text-xl font-semibold\">\n\t\t\t\t\t\t\t\t\t\t\tTotal:{\" \"}\n\t\t\t\t\t\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t\t\t\t\t\tRp. {formatThousandSeparator(total)}\n\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t\t\t\t<p className=\"opacity-50 text-sm\">\n\t\t\t\t\t\t\t\t\t\t\tPayment menthod:{\" \"}\n\t\t\t\t\t\t\t\t\t\t\t<span className=\"font-semibold\">\n\t\t\t\t\t\t\t\t\t\t\t\t{paymentMethod}\n\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div className=\"z-10 absolute -bottom-[6px] left-0 right-0 space-x-1 px-1 w-auto flex  justify-center\">\n\t\t\t\t\t\t\t\t\t{Array.from({ length: 17 }).map((i, index) => {\n\t\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\t\t\tkey={index.toString()}\n\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"inline-block size-3 rounded-full bg-white shadow-inner tutup relative\"\n\t\t\t\t\t\t\t\t\t\t\t></span>\n\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<div className=\"receipt-content-s bg-white w-full h-[80px] shadow-2xs border-[0.5px] border-gray-200 border-t-0 relative\">\n\t\t\t\t\t\t\t<div className=\"flex items-center justify-center h-full border-t-2 border-gray-200 border-dashed\">\n\t\t\t\t\t\t\t\t<span className=\"opacity-50\">\n\t\t\t\t\t\t\t\t\tWaiting for a new order\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<div className=\"z-10 absolute -bottom-[6px] left-0 right-0 space-x-1 px-1 w-auto flex  justify-center\">\n\t\t\t\t\t\t\t\t{Array.from({ length: 17 }).map((i, index) => {\n\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\t\tkey={index.toString()}\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"inline-block size-3 rounded-full bg-white shadow-inner tutup relative\"\n\t\t\t\t\t\t\t\t\t\t></span>\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</KsierSection>\n\t);\n};\n\nexport const Menus = ({\n\tonFoodItemSelect,\n\tonDrinkItemSelect,\n\tselectedFoods,\n\tselectedDrinks,\n}: {\n\tonFoodItemSelect: (item: MenuItem) => void;\n\tonDrinkItemSelect: (item: MenuItem) => void;\n\tselectedFoods: MenuItem[];\n\tselectedDrinks: MenuItem[];\n}) => {\n\tconst menus = [\n\t\t{\n\t\t\tname: \"Soto\",\n\t\t\tprice: \"15000\",\n\t\t\ttype: \"food\",\n\t\t},\n\t\t{\n\t\t\tname: \"Mie ayam pangsit\",\n\t\t\tprice: \"13000\",\n\t\t\ttype: \"food\",\n\t\t},\n\t\t{\n\t\t\tname: \"Miso\",\n\t\t\tprice: \"17000\",\n\t\t\ttype: \"food\",\n\t\t},\n\t\t{\n\t\t\tname: \"Ketoprak\",\n\t\t\tprice: \"13000\",\n\t\t\ttype: \"food\",\n\t\t},\n\t\t{\n\t\t\tname: \"Nasi pecel + ayam goreng\",\n\t\t\tprice: \"25000\",\n\t\t\ttype: \"food\",\n\t\t},\n\t\t{\n\t\t\tname: \"Pecel ayam\",\n\t\t\tprice: \"22000\",\n\t\t\ttype: \"food\",\n\t\t},\n\t\t{\n\t\t\tname: \"Pecel lele\",\n\t\t\tprice: \"20000\",\n\t\t\ttype: \"food\",\n\t\t},\n\t\t{\n\t\t\tname: \"Orange\",\n\t\t\tprice: \"5000\",\n\t\t\ttype: \"drink\",\n\t\t},\n\t\t{\n\t\t\tname: \"Mineral water\",\n\t\t\tprice: \"3500\",\n\t\t\ttype: \"drink\",\n\t\t},\n\t\t{\n\t\t\tname: \"Ice tea\",\n\t\t\tprice: \"7000\",\n\t\t\ttype: \"drink\",\n\t\t},\n\t\t{\n\t\t\tname: \"Ice lemon tea\",\n\t\t\tprice: \"8000\",\n\t\t\ttype: \"drink\",\n\t\t},\n\t\t{\n\t\t\tname: \"Kelapa muda\",\n\t\t\tprice: \"10000\",\n\t\t\ttype: \"drink\",\n\t\t},\n\t];\n\n\treturn (\n\t\t<KsierSection\n\t\t\ttitle=\"Menus\"\n\t\t\ticon={Utensils}\n\t\t\tclassName=\"flex-1 min-w-[450px] py-0\"\n\t\t>\n\t\t\t<div className=\"space-y-4\">\n\t\t\t\t<h3 className=\"font-semibold\">Foods</h3>\n\t\t\t\t<ul className=\"grid grid-cols-2 gap-3\">\n\t\t\t\t\t{menus\n\t\t\t\t\t\t.filter((menu) => menu.type === \"food\")\n\t\t\t\t\t\t.map((food, i) => {\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<li\n\t\t\t\t\t\t\t\t\tkey={i}\n\t\t\t\t\t\t\t\t\tclassName={[\n\t\t\t\t\t\t\t\t\t\t\"p-2 border cursor-pointer flex flex-col justify-between gap-2\",\n\t\t\t\t\t\t\t\t\t\tselectedFoods.some(\n\t\t\t\t\t\t\t\t\t\t\t(selected) => selected.name === food.name\n\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t? \"border-yellow-200 bg-yellow-50/20\"\n\t\t\t\t\t\t\t\t\t\t\t: \"border-dashed\",\n\t\t\t\t\t\t\t\t\t].join(\" \")}\n\t\t\t\t\t\t\t\t\tonClick={() => onFoodItemSelect(food)}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<span className=\"flex justify-between\">\n\t\t\t\t\t\t\t\t\t\t<span className=\"flex-1 leading-[1.2]\">\n\t\t\t\t\t\t\t\t\t\t\t{food.name}\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t{selectedFoods.some(\n\t\t\t\t\t\t\t\t\t\t\t(selected) => selected.name === food.name\n\t\t\t\t\t\t\t\t\t\t) ? (\n\t\t\t\t\t\t\t\t\t\t\t<CheckCircle2\n\t\t\t\t\t\t\t\t\t\t\t\tsize={18}\n\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"text-yellow-500\"\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t\t\"\"\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t<span className=\"opacity-50 text-xs\">\n\t\t\t\t\t\t\t\t\t\tRp. {formatThousandSeparator(food.price)}\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t})}\n\t\t\t\t</ul>\n\t\t\t</div>\n\t\t\t<div className=\"h-8\" />\n\t\t\t<div className=\"space-y-4\">\n\t\t\t\t<h3 className=\"font-semibold\">Drinks</h3>\n\t\t\t\t<ul className=\"grid grid-cols-2 gap-3\">\n\t\t\t\t\t{menus\n\t\t\t\t\t\t.filter((menu) => menu.type === \"drink\")\n\t\t\t\t\t\t.map((drink, i) => {\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<li\n\t\t\t\t\t\t\t\t\tkey={i}\n\t\t\t\t\t\t\t\t\tclassName={[\n\t\t\t\t\t\t\t\t\t\t\"p-2 border cursor-pointer flex flex-col justify-between gap-2\",\n\t\t\t\t\t\t\t\t\t\tselectedDrinks.some(\n\t\t\t\t\t\t\t\t\t\t\t(selected) => selected.name === drink.name\n\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t? \"border-yellow-200 bg-yellow-50/20\"\n\t\t\t\t\t\t\t\t\t\t\t: \"border-dashed\",\n\t\t\t\t\t\t\t\t\t].join(\" \")}\n\t\t\t\t\t\t\t\t\tonClick={() => onDrinkItemSelect(drink)}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<span className=\"flex justify-between\">\n\t\t\t\t\t\t\t\t\t\t<span className=\"flex-1 leading-[1.2]\">\n\t\t\t\t\t\t\t\t\t\t\t{drink.name}\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t{selectedDrinks.some(\n\t\t\t\t\t\t\t\t\t\t\t(selected) => selected.name === drink.name\n\t\t\t\t\t\t\t\t\t\t) ? (\n\t\t\t\t\t\t\t\t\t\t\t<CheckCircle2\n\t\t\t\t\t\t\t\t\t\t\t\tsize={18}\n\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"text-yellow-500\"\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t\t\"\"\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t<span className=\"opacity-50 text-xs\">\n\t\t\t\t\t\t\t\t\t\tRp. {formatThousandSeparator(drink.price)}\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t})}\n\t\t\t\t</ul>\n\t\t\t</div>\n\t\t\t<div className=\"h-8\" />\n\t\t</KsierSection>\n\t);\n};\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/utilities/cn.ts",
      "content": "import { ClassValue, clsx } from \"clsx\";\r\nimport { twMerge } from \"tailwind-merge\";\r\n\r\nexport function cn(...inputs: ClassValue[]) {\r\n\treturn twMerge(clsx(inputs));\r\n}\r\n",
      "type": "registry:ui"
    }
  ]
}