From 9af0bf27f2e85bf38d65287ac10a5eca047c623e Mon Sep 17 00:00:00 2001 From: bender Date: Thu, 5 Mar 2026 07:44:53 +0000 Subject: [PATCH] Add src/app/order/page.tsx --- src/app/order/page.tsx | 365 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 365 insertions(+) create mode 100644 src/app/order/page.tsx diff --git a/src/app/order/page.tsx b/src/app/order/page.tsx new file mode 100644 index 0000000..77e8f96 --- /dev/null +++ b/src/app/order/page.tsx @@ -0,0 +1,365 @@ +"use client"; + +import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; +import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered"; +import FooterCard from "@/components/sections/footer/FooterCard"; +import { Mail, Linkedin, ShoppingCart, Fish, Truck, Package } from "lucide-react"; +import Image from "next/image"; +import { useState } from "react"; + +interface OrderItem { + id: string; + name: string; + price: number; + quantity: number; + image: string; +} + +export default function OrderPage() { + const [orderItems, setOrderItems] = useState([ + { + id: "1", name: "Goldfood Salmon Premium Loin - 200g", price: 24.99, + quantity: 0, + image: "http://img.b2bpic.net/free-photo/close-up-picture-red-fish-slices_259150-58650.jpg?_wi=1"}, + { + id: "2", name: "Goldfood Salmon Portions - 150g x 4", price: 18.99, + quantity: 0, + image: "http://img.b2bpic.net/free-photo/high-angle-fish-slate-with-cutlery_23-2148643612.jpg"}, + { + id: "3", name: "Premium Seafood Selection Box", price: 34.99, + quantity: 0, + image: "http://img.b2bpic.net/free-photo/top-view-fish-ready-be-cooked_23-2150239066.jpg"}, + { + id: "4", name: "Chef Special - Sea Bass Fillets", price: 29.99, + quantity: 0, + image: "http://img.b2bpic.net/free-photo/front-view-chef-apron-putting-raw-fish-chopping-board-pepper-grinder-pomegranate-seeds-bowl-table_179666-44288.jpg"}, + ]); + + const [email, setEmail] = useState(""); + const [address, setAddress] = useState(""); + const [city, setCity] = useState(""); + const [postalCode, setPostalCode] = useState(""); + const [phone, setPhone] = useState(""); + const [submitted, setSubmitted] = useState(false); + + const updateQuantity = (id: string, quantity: number) => { + setOrderItems( + orderItems.map((item) => + item.id === id ? { ...item, quantity: Math.max(0, quantity) } : item + ) + ); + }; + + const totalPrice = orderItems.reduce( + (sum, item) => sum + item.price * item.quantity, + 0 + ); + + const handleSubmitOrder = async (e: React.FormEvent) => { + e.preventDefault(); + + const orderData = { + email, + address, + city, + postalCode, + phone, + items: orderItems.filter((item) => item.quantity > 0), + totalPrice, + }; + + console.log("Order submitted:", orderData); + setSubmitted(true); + + setTimeout(() => { + setSubmitted(false); + setEmail(""); + setAddress(""); + setCity(""); + setPostalCode(""); + setPhone(""); + setOrderItems(orderItems.map((item) => ({ ...item, quantity: 0 }))); + }, 3000); + }; + + return ( + + + +
+
+ {/* Page Header */} +
+

+ Direct Bestellen +

+

+ Premium seafood direct naar uw deur. Kies uw producten en plaats uw bestelling. +

+
+ +
+ {/* Logo Display */} +
+
+ Goldfood Logo +
+
+ + {/* Product Selection */} +
+
+

+ + Producten +

+
+ {orderItems.map((item) => ( +
+
+ {item.name} +
+
+

+ {item.name} +

+

+ €{item.price.toFixed(2)} +

+
+ + + updateQuantity( + item.id, + parseInt(e.target.value) || 0 + ) + } + className="w-12 text-center px-2 py-1 bg-[var(--background)] text-[var(--foreground)] rounded border border-[var(--accent)]/20" + min="0" + /> + +
+
+
+

+ €{(item.price * item.quantity).toFixed(2)} +

+
+
+ ))} +
+ + {/* Order Summary */} +
+
+ Subtotaal: + €{totalPrice.toFixed(2)} +
+
+ Verzending: + Gratis (NL) +
+
+ Totaal: + + €{totalPrice.toFixed(2)} + +
+
+
+
+ + {/* Delivery Information */} +
+
+

+ + Levering +

+
+
+

Snelle bezorging

+

Binnen 1-2 werkdagen

+
+
+

Verzending

+

Gekoeld & verzegeld

+
+
+

Regio

+

Heel Nederland

+
+
+
+
+
+ + {/* Order Form */} +
+

+ + Afleveradres +

+
+
+
+ + setEmail(e.target.value)} + required + className="w-full px-4 py-2 bg-[var(--background)] text-[var(--foreground)] rounded border border-[var(--accent)]/20 focus:outline-none focus:border-[var(--primary-cta)]" + placeholder="uw@email.com" + /> +
+
+ + setPhone(e.target.value)} + required + className="w-full px-4 py-2 bg-[var(--background)] text-[var(--foreground)] rounded border border-[var(--accent)]/20 focus:outline-none focus:border-[var(--primary-cta)]" + placeholder="+31 6 12345678" + /> +
+
+
+
+ + setAddress(e.target.value)} + required + className="w-full px-4 py-2 bg-[var(--background)] text-[var(--foreground)] rounded border border-[var(--accent)]/20 focus:outline-none focus:border-[var(--primary-cta)]" + placeholder="Straatnaam 123" + /> +
+
+
+ + setPostalCode(e.target.value)} + required + className="w-full px-4 py-2 bg-[var(--background)] text-[var(--foreground)] rounded border border-[var(--accent)]/20 focus:outline-none focus:border-[var(--primary-cta)]" + placeholder="1234 AB" + /> +
+
+ + setCity(e.target.value)} + required + className="w-full px-4 py-2 bg-[var(--background)] text-[var(--foreground)] rounded border border-[var(--accent)]/20 focus:outline-none focus:border-[var(--primary-cta)]" + placeholder="Amsterdam" + /> +
+
+
+ + + +

+ We respecteren je privacy. Je gegevens worden alleen gebruikt voor je bestelling. +

+
+
+
+
+ + + + ); +}