From 98c7ce8f873df41980f644a796f4ed347467c624 Mon Sep 17 00:00:00 2001 From: skidoodle Date: Fri, 17 Oct 2025 08:59:44 +0200 Subject: [PATCH] foglalas --- bun.lock | 3 + package.json | 1 + src/App.tsx | 14 +-- src/components/About.tsx | 6 +- src/components/Contact.tsx | 4 +- src/components/Delivery.tsx | 4 +- src/components/Footer.tsx | 4 +- src/components/Header.tsx | 4 +- src/components/Hero.tsx | 4 +- src/components/Menu.tsx | 4 +- src/components/Reservations.tsx | 181 ++++++++++++++++++++++++-------- src/components/ui/label.tsx | 22 ++++ src/components/ui/popover.tsx | 48 +++++++++ 13 files changed, 229 insertions(+), 70 deletions(-) create mode 100644 src/components/ui/label.tsx create mode 100644 src/components/ui/popover.tsx diff --git a/bun.lock b/bun.lock index f246705..6f97a47 100644 --- a/bun.lock +++ b/bun.lock @@ -6,6 +6,7 @@ "dependencies": { "@radix-ui/react-accordion": "^1.2.12", "@radix-ui/react-label": "^2.1.7", + "@radix-ui/react-popover": "^1.1.15", "@radix-ui/react-select": "^2.2.6", "@radix-ui/react-slot": "^1.2.3", "bun-plugin-tailwind": "^0.1.2", @@ -89,6 +90,8 @@ "@radix-ui/react-label": ["@radix-ui/react-label@2.1.7", "", { "dependencies": { "@radix-ui/react-primitive": "2.1.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-YT1GqPSL8kJn20djelMX7/cTRp/Y9w5IZHvfxQTVHrOqa2yMl7i/UfMqKRU5V7mEyKTrUVgJXhNQPVCG8PBLoQ=="], + "@radix-ui/react-popover": ["@radix-ui/react-popover@1.1.15", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-dismissable-layer": "1.1.11", "@radix-ui/react-focus-guards": "1.1.3", "@radix-ui/react-focus-scope": "1.1.7", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-popper": "1.2.8", "@radix-ui/react-portal": "1.1.9", "@radix-ui/react-presence": "1.1.5", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-slot": "1.2.3", "@radix-ui/react-use-controllable-state": "1.2.2", "aria-hidden": "^1.2.4", "react-remove-scroll": "^2.6.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-kr0X2+6Yy/vJzLYJUPCZEc8SfQcf+1COFoAqauJm74umQhta9M7lNJHP7QQS3vkvcGLQUbWpMzwrXYwrYztHKA=="], + "@radix-ui/react-popper": ["@radix-ui/react-popper@1.2.8", "", { "dependencies": { "@floating-ui/react-dom": "^2.0.0", "@radix-ui/react-arrow": "1.1.7", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-callback-ref": "1.1.1", "@radix-ui/react-use-layout-effect": "1.1.1", "@radix-ui/react-use-rect": "1.1.1", "@radix-ui/react-use-size": "1.1.1", "@radix-ui/rect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-0NJQ4LFFUuWkE7Oxf0htBKS6zLkkjBH+hM1uk7Ng705ReR8m/uelduy1DBo0PyBXPKVnBA6YBlU94MBGXrSBCw=="], "@radix-ui/react-portal": ["@radix-ui/react-portal@1.1.9", "", { "dependencies": { "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-bpIxvq03if6UNwXZ+HTK71JLh4APvnXntDc6XOX8UVq4XQOVl7lwok0AvIl+b8zgCw3fSaVTZMpAPPagXbKmHQ=="], diff --git a/package.json b/package.json index 59050ab..52f2750 100644 --- a/package.json +++ b/package.json @@ -11,6 +11,7 @@ "dependencies": { "@radix-ui/react-accordion": "^1.2.12", "@radix-ui/react-label": "^2.1.7", + "@radix-ui/react-popover": "^1.1.15", "@radix-ui/react-select": "^2.2.6", "@radix-ui/react-slot": "^1.2.3", "bun-plugin-tailwind": "^0.1.2", diff --git a/src/App.tsx b/src/App.tsx index 61623d2..d54eea6 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,10 +1,10 @@ -import Header from './components/Header'; -import Hero from './components/Hero'; -import About from './components/About'; -import Menu from './components/Menu'; -import Reservations from './components/Reservations'; -import Delivery from './components/Delivery'; -import Footer from './components/Footer'; +import Header from '@/components/Header'; +import Hero from '@/components/Hero'; +import About from '@/components/About'; +import Menu from '@/components/Menu'; +import Reservations from '@/components/Reservations'; +import Delivery from '@/components/Delivery'; +import Footer from '@/components/Footer'; export function App() { return ( diff --git a/src/components/About.tsx b/src/components/About.tsx index c76881d..8448d38 100644 --- a/src/components/About.tsx +++ b/src/components/About.tsx @@ -1,11 +1,11 @@ import rolunk from "@/public/rolunk.png"; -function About() { +export default function About() { return (
-

Történetünk

+

Rólunk

Az autentikus magyar ízek iránti szenvedélyből született a Budapest Bisztró, hogy elhozza kultúránk melegségét és gazdagságát az Ön asztalára. Séfjeink generációkon át örökített családi recepteket követnek, a legjobb helyi alapanyagokat felhasználva, hogy ételeink egyszerre legyenek hagyományosak és újszerűek.

@@ -22,5 +22,3 @@ function About() {
); } - -export default About; diff --git a/src/components/Contact.tsx b/src/components/Contact.tsx index 70b17af..bdf6d77 100644 --- a/src/components/Contact.tsx +++ b/src/components/Contact.tsx @@ -1,4 +1,4 @@ -function Contact() { +export default function Contact() { return (
@@ -10,5 +10,3 @@ function Contact() {
); } - -export default Contact; diff --git a/src/components/Delivery.tsx b/src/components/Delivery.tsx index 1d77c33..7e5802a 100644 --- a/src/components/Delivery.tsx +++ b/src/components/Delivery.tsx @@ -1,7 +1,7 @@ import wolt from "@/public/wolt.png"; import foodora from "@/public/foodora.png"; -function Delivery() { +export default function Delivery() { return (
@@ -44,5 +44,3 @@ function Delivery() {
); } - -export default Delivery; diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx index 08b2e8d..577605c 100644 --- a/src/components/Footer.tsx +++ b/src/components/Footer.tsx @@ -1,4 +1,4 @@ -function Footer() { +export default function Footer() { return ( ); } - -export default Footer; diff --git a/src/components/Header.tsx b/src/components/Header.tsx index 01e31e1..cf9ca38 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -1,4 +1,4 @@ -function Header() { +export default function Header() { return (
); } - -export default Header; diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx index bbd60d1..21a9f38 100644 --- a/src/components/Hero.tsx +++ b/src/components/Hero.tsx @@ -9,7 +9,7 @@ const heroImages = [ hero3 ]; -function Hero() { +export default function Hero() { const [currentIndex, setCurrentIndex] = useState(0); const nextSlide = useCallback(() => { @@ -55,5 +55,3 @@ function Hero() { ); } - -export default Hero; diff --git a/src/components/Menu.tsx b/src/components/Menu.tsx index 0a6dbb0..fa70c91 100644 --- a/src/components/Menu.tsx +++ b/src/components/Menu.tsx @@ -30,7 +30,7 @@ const menuItems = [ }, ]; -function Menu() { +export default function Menu() { return ( ); } - -export default Menu; diff --git a/src/components/Reservations.tsx b/src/components/Reservations.tsx index c095d42..a4d8485 100644 --- a/src/components/Reservations.tsx +++ b/src/components/Reservations.tsx @@ -1,58 +1,157 @@ -import { Button } from './ui/button'; -import { Calendar } from './ui/calendar'; -import { Input } from './ui/input'; -import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './ui/select'; +import { useState } from 'react'; +import { format } from 'date-fns'; +import { hu } from 'date-fns/locale'; +import { Calendar as CalendarIcon, CheckCircle2, AlertTriangle } from 'lucide-react'; +import { cn } from '@/lib/utils'; +import { Button } from '@/components/ui/button'; +import { Calendar } from '@/components/ui/calendar'; +import { Input } from '@/components/ui/input'; +import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'; +import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'; +import { Label } from '@/components/ui/label'; import foglalas from '@/public/foglalas.png'; -function Foglalas() { +type SubmissionStatus = 'idle' | 'error' | 'success' | 'loading'; + +export default function Reservations() { + const [date, setDate] = useState(); + const [formData, setFormData] = useState({ + name: '', + email: '', + partySize: '', + time: '18:00', + }); + const [status, setStatus] = useState('idle'); + const [message, setMessage] = useState(''); + + const handleChange = (e: React.ChangeEvent) => { + const { name, value } = e.target; + setFormData((prev) => ({ ...prev, [name]: value })); + }; + + const handleSelectChange = (name: 'partySize') => (value: string) => { + setFormData((prev) => ({ ...prev, [name]: value })); + }; + + const handleSubmit = (e: React.FormEvent) => { + e.preventDefault(); + setMessage(''); + + if (!date || !formData.name || !formData.email || !formData.partySize || !formData.time) { + setMessage('Kérjük, töltse ki az összes mezőt a folytatáshoz.'); + setStatus('error'); + return; + } + + setStatus('loading'); + + setTimeout(() => { + const reservationData = { + ...formData, + date: format(date, 'yyyy-MM-dd'), + }; + console.log('Foglalási adatok:', reservationData); + + setStatus('success'); + setMessage(`Köszönjük a foglalást, ${formData.name}! Hamarosan emailben is megerősítjük.`); + }, 1000); + }; + + const resetForm = () => { + setFormData({ name: '', email: '', partySize: '', time: '18:00' }); + setDate(undefined); + setStatus('idle'); + setMessage(''); + }; + return ( -
-
+
+

Foglaljon Asztalt

-

+

Biztosítsa helyét egy felejthetetlen gasztronómiai élményhez. Örömmel látjuk vendégül!

Étterem belső
-
-
- - -
- - + +
+ {status === 'success' ? ( +
+ +

Foglalás elküldve!

+

{message}

+
- - - + ) : ( +
+
+ + +
+ +
+ + +
+ +
+
+ + +
+
+ + +
+
+ +
+ + + + + + + day < new Date(new Date().setDate(new Date().getDate() - 1))} /> + + +
+ +
+ {status === 'error' && message && ( +
+ +

{message}

+
+ )} +
+ + +
+ )}
); } - -export default Foglalas; diff --git a/src/components/ui/label.tsx b/src/components/ui/label.tsx new file mode 100644 index 0000000..ef7133a --- /dev/null +++ b/src/components/ui/label.tsx @@ -0,0 +1,22 @@ +import * as React from "react" +import * as LabelPrimitive from "@radix-ui/react-label" + +import { cn } from "@/lib/utils" + +function Label({ + className, + ...props +}: React.ComponentProps) { + return ( + + ) +} + +export { Label } diff --git a/src/components/ui/popover.tsx b/src/components/ui/popover.tsx new file mode 100644 index 0000000..01e468b --- /dev/null +++ b/src/components/ui/popover.tsx @@ -0,0 +1,48 @@ +"use client" + +import * as React from "react" +import * as PopoverPrimitive from "@radix-ui/react-popover" + +import { cn } from "@/lib/utils" + +function Popover({ + ...props +}: React.ComponentProps) { + return +} + +function PopoverTrigger({ + ...props +}: React.ComponentProps) { + return +} + +function PopoverContent({ + className, + align = "center", + sideOffset = 4, + ...props +}: React.ComponentProps) { + return ( + + + + ) +} + +function PopoverAnchor({ + ...props +}: React.ComponentProps) { + return +} + +export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }