+
+
+
+
+
+
+
+
+
+ )}
+
+
+
+ );
+};
diff --git a/src/components/cart-table.tsx b/src/components/cart-table.tsx
new file mode 100644
index 0000000..6239ec5
--- /dev/null
+++ b/src/components/cart-table.tsx
@@ -0,0 +1,83 @@
+import { useCart } from '@/provider/cart-provider';
+import { Input } from './ui/input';
+import { ArrowUpDown } from 'lucide-react';
+import { useMemo, useState } from 'react';
+
+export const CartTable = () => {
+ const { cart, updateProduct, removeProduct } = useCart();
+ const [sort, setSort] = useState<'asc' | 'desc'>('asc');
+
+ const toggleSort = () => {
+ setSort(sort === 'asc' ? 'desc' : 'asc');
+ };
+
+ const sortedProducts = useMemo(
+ () =>
+ (cart?.products ?? []).sort((a, b) => {
+ if (sort === 'asc') {
+ return a.title.localeCompare(b.title);
+ }
+
+ return b.title.localeCompare(a.title);
+ }),
+ [cart, sort]
+ );
+
+ return (
+ Cargando producto...
+
+
+
+
+
+ );
+};
diff --git a/src/components/home.tsx b/src/components/home.tsx
new file mode 100644
index 0000000..eb9c222
--- /dev/null
+++ b/src/components/home.tsx
@@ -0,0 +1,91 @@
+import { Power, Printer, Terminal, Volume2, VolumeX } from 'lucide-react';
+import { Button } from './ui/button';
+import { CartForm } from './cart-form';
+import { useCart } from '@/provider/cart-provider';
+import { useCallback, useState } from 'react';
+import { Receipt } from './receipt';
+import { CartTable } from './cart-table';
+
+interface Props {
+ isSoundEnabled: boolean;
+ toggleSound: () => void;
+ isPoweredOn: boolean;
+ togglePower: () => void;
+}
+
+export default function HomePage({ isPoweredOn, isSoundEnabled, togglePower, toggleSound }: Props) {
+ const { cart } = useCart();
+
+ const [showReceipt, setShowReceipt] = useState(false);
+
+ const toggleReceipt = useCallback(() => setShowReceipt(!showReceipt), [showReceipt]);
+ return (
+ | Cant | +
+ Nombre |
+ Precio U | +Precio T | +Foto | +
|---|---|---|---|---|
| + { + const newQuantity = Number(e.currentTarget.value); + + if (newQuantity !== item.quantity) { + if (newQuantity === 0) { + removeProduct(item.id); + return; + } + + updateProduct({ ...item, quantity: newQuantity }); + } + }} + onKeyDown={e => { + const actionsKeys = ['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight']; + + if (isNaN(Number(e.key)) && !actionsKeys.includes(e.key)) { + e.preventDefault(); + } + }} + /> + | +{item.title} | +${item.price.toFixed(2)} | +${(item.price * item.quantity).toFixed(2)} | +
+
+
+ |
+
+
+ );
+};
diff --git a/src/components/retro-screen.tsx b/src/components/retro-screen.tsx
new file mode 100644
index 0000000..83d0023
--- /dev/null
+++ b/src/components/retro-screen.tsx
@@ -0,0 +1,47 @@
+import { cn } from '@/lib/utils';
+import React from 'react';
+
+interface Props {
+ children: React.ReactNode;
+ className?: string;
+}
+
+export const RetroScreen = ({ children, className }: Props) => {
+ return (
+ e.stopPropagation()}
+ >
+
+
+
+
+ EL TOPO
+{cart.createdAt.toLocaleDateString("es", {
+ weekday: 'long',
+ year: 'numeric',
+ month: 'long',
+ day: 'numeric',
+ })}
+ ORDEN #{orderNumber}
+
+
+
+ Vendendor: Emirchus
+ @emirchus
+
+ {cart.products.map((item, index) => (
+
+
+
+
+ ))}
+ + {item.quantity}x {item.title} +
+${(item.price * item.quantity).toFixed(2)}
+
+
+
+
+
+ SUBTOTAL:
+ ${orderTotal.toFixed(2)}
+
+
+ IVA (16%):
+ ${tax.toFixed(2)}
+
+
+ TOTAL:
+ ${(orderTotal + tax).toFixed(2)}
+
+
+
+ Atendido por: Wallbit©
+ {new Date().toLocaleTimeString()}
+
+
+
+ CÓDIGO DE CUPÓN: {Math.random().toString(36).substring(2, 6).toUpperCase()}-GONCYBIT
+ Guardalo para tu próxima compra!
+
+
+ GRACIAS POR TU COMPRA!
+ el-topo.emirchus.ar
+
+
+
+
+
+ );
+};
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
new file mode 100644
index 0000000..65d4fcd
--- /dev/null
+++ b/src/components/ui/button.tsx
@@ -0,0 +1,57 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+ "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+ {
+ variants: {
+ variant: {
+ default:
+ "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+ destructive:
+ "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+ outline:
+ "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+ secondary:
+ "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+ ghost: "hover:bg-accent hover:text-accent-foreground",
+ link: "text-primary underline-offset-4 hover:underline",
+ },
+ size: {
+ default: "h-9 px-4 py-2",
+ sm: "h-8 rounded-md px-3 text-xs",
+ lg: "h-10 rounded-md px-8",
+ icon: "h-9 w-9",
+ },
+ },
+ defaultVariants: {
+ variant: "default",
+ size: "default",
+ },
+ }
+)
+
+export interface ButtonProps
+ extends React.ButtonHTMLAttributes
+
+
+ {children}
+
+
+