TheVine/itsthevine
Archived
1
0
Fork 0
Code Issues 1 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

card form added

Browse Source
This commit is contained in:
Paul Fresnel
2024-11-09 16:46:49 +01:00
parent df3268f494
commit d391dcf24e
3 changed files with 218 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Header.tsx
+8 -2
View File
@@ -26,7 +26,7 @@ const Header = () => {
height={60}
className="h-12 w-auto"
/>
<span className="ml-3 font-serif text-xl text-bakery-800">
<span className="ml-3 font-serif text-2xl text-bakery-800">
Au Blé d&apos;Or
</span>
</Link>
@@ -71,7 +71,13 @@ const Header = () => {
`}>
<div className="p-4">
<div className="flex justify-between items-center mb-8">
<span className="font-serif text-xl text-bakery-800">Menu</span>
<span className="font-serif text-xl text-bakery-800"><Image
src="/images/ressources/logo.png"
alt="Au Blé d'Or - Boulangerie Artisanale"
width={60}
height={60}
className="mb-4 mr-4"
/><p>Au Blé d&apos;Or</p></span>
<button
onClick={() => setIsMobileMenuOpen(false)}
className="p-2"
src/components/HomePage.tsx
+110 -16
View File
@@ -2,10 +2,9 @@
import Link from 'next/link';
import Image from 'next/image';
import { useState } from 'react';
import LoyaltyCardForm from './LoyaltyCardForm';
const HomePage = () => {
const [isLoyaltyFormOpen, setIsLoyaltyFormOpen] = useState(false);
const [showLoyaltyForm, setShowLoyaltyForm] = useState(false);
return (
<div className="min-h-screen">
@@ -85,14 +84,15 @@ const HomePage = () => {
</div>
</section>
{/* Carte de Fidélité */}
{/* Loyalty Card Section */}
<section className="py-16 bg-bakery-600 text-white">
<div className="container mx-auto px-4 text-center">
<h2 className="font-serif text-4xl mb-8">Carte de Fidélité</h2>
<p className="text-xl mb-8 max-w-2xl mx-auto">
Rejoignez notre programme de fidélité et bénéficiez d&apos;avantages exclusifs.
Votre 10ème baguette offerte !
<div className="container mx-auto px-4">
<div className="text-center mb-8">
<h2 className="font-serif text-3xl mb-4">Carte de Fidélité</h2>
<p className="text-lg mb-8">
Profitez de nombreux avantages avec notre carte de fidélité
</p>
</div>
{/* Loyalty Card with Flip Effect */}
<div className="card-container max-w-2xl mx-auto aspect-[1.586/1] mb-8">
@@ -122,12 +122,111 @@ const HomePage = () => {
</div>
</div>
{/* Button and Form Section */}
<div className="max-w-2xl mx-auto">
<button
onClick={() => setIsLoyaltyFormOpen(true)}
className="bg-white text-bakery-600 px-8 py-3 rounded-md hover:bg-bakery-50 transition"
onClick={() => setShowLoyaltyForm(!showLoyaltyForm)}
className="bg-white text-bakery-600 px-8 py-3 rounded-md hover:bg-bakery-50 transition mb-8 mx-auto block"
>
Obtenir ma carte
{showLoyaltyForm ? 'Masquer le formulaire' : 'Obtenir ma carte'}
</button>
{/* Form */}
{showLoyaltyForm && (
<div className="bg-white text-bakery-800 rounded-lg p-6 mt-8 shadow-lg">
<h3 className="font-serif text-2xl mb-6">Demande de Carte de Fidélité</h3>
<form className="space-y-4">
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label className="block text-sm font-medium mb-1">
Prénom
</label>
<input
type="text"
required
className="w-full px-3 py-2 border border-bakery-200 rounded-md focus:outline-none focus:ring-2 focus:ring-bakery-500"
/>
</div>
<div>
<label className="block text-sm font-medium mb-1">
Nom
</label>
<input
type="text"
required
className="w-full px-3 py-2 border border-bakery-200 rounded-md focus:outline-none focus:ring-2 focus:ring-bakery-500"
/>
</div>
</div>
<div>
<label className="block text-sm font-medium mb-1">
Âge
</label>
<input
type="number"
required
min="0"
className="w-full px-3 py-2 border border-bakery-200 rounded-md focus:outline-none focus:ring-2 focus:ring-bakery-500"
/>
</div>
<div>
<label className="block text-sm font-medium mb-1">
Adresse
</label>
<input
type="text"
required
className="w-full px-3 py-2 border border-bakery-200 rounded-md focus:outline-none focus:ring-2 focus:ring-bakery-500"
/>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label className="block text-sm font-medium mb-1">
Code Postal
</label>
<input
type="text"
required
className="w-full px-3 py-2 border border-bakery-200 rounded-md focus:outline-none focus:ring-2 focus:ring-bakery-500"
/>
</div>
<div>
<label className="block text-sm font-medium mb-1">
Ville
</label>
<input
type="text"
required
className="w-full px-3 py-2 border border-bakery-200 rounded-md focus:outline-none focus:ring-2 focus:ring-bakery-500"
/>
</div>
</div>
<div>
<label className="block text-sm font-medium mb-1">
Email
</label>
<input
type="email"
required
className="w-full px-3 py-2 border border-bakery-200 rounded-md focus:outline-none focus:ring-2 focus:ring-bakery-500"
/>
</div>
<button
type="submit"
className="w-full bg-bakery-600 text-white py-3 px-4 rounded-md hover:bg-bakery-700 transition duration-200 mt-6"
>
Demander ma carte
</button>
</form>
</div>
)}
</div>
</div>
</section>
@@ -164,11 +263,6 @@ const HomePage = () => {
</div>
</div>
</section>
<LoyaltyCardForm
isOpen={isLoyaltyFormOpen}
onClose={() => setIsLoyaltyFormOpen(false)}
/>
</div>
);
};
src/components/LoyaltyCardForm.tsx
+65 -32
View File
@@ -1,5 +1,5 @@
'use client'
import { useState } from 'react';
import { useState, useEffect, useRef } from 'react';
interface LoyaltyCardFormProps {
isOpen: boolean;
@@ -7,6 +7,7 @@ interface LoyaltyCardFormProps {
}
const LoyaltyCardForm = ({ isOpen, onClose }: LoyaltyCardFormProps) => {
const modalRef = useRef<HTMLDivElement>(null);
const [formData, setFormData] = useState({
firstName: '',
lastName: '',
@@ -17,11 +18,20 @@ const LoyaltyCardForm = ({ isOpen, onClose }: LoyaltyCardFormProps) => {
email: '',
});
useEffect(() => {
if (isOpen) {
document.body.style.overflow = 'hidden';
} else {
document.body.style.overflow = 'unset';
}
return () => {
document.body.style.overflow = 'unset';
};
}, [isOpen]);
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
// Handle form submission here
console.log('Form submitted:', formData);
// Reset form and close overlay
setFormData({
firstName: '',
lastName: '',
@@ -37,15 +47,29 @@ const LoyaltyCardForm = ({ isOpen, onClose }: LoyaltyCardFormProps) => {
if (!isOpen) return null;
return (
<div className="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4">
<div className="bg-white rounded-lg max-w-md w-full max-h-[90vh] overflow-y-auto">
<div className="p-6">
<div className="fixed inset-0 z-50 overflow-y-auto bg-black/50 backdrop-blur-sm">
<div className="min-h-screen px-4 text-center">
{/* This element centers the modal */}
<span
className="inline-block h-screen align-middle"
aria-hidden="true"
>
&#8203;
</span>
{/* Modal */}
<div
ref={modalRef}
className="inline-block w-full max-w-md p-6 my-8 text-left align-middle bg-white rounded-lg shadow-xl transform transition-all"
onClick={(e) => e.stopPropagation()}
>
<div className="flex justify-between items-center mb-6">
<h2 className="font-serif text-2xl text-bakery-800">Demande de Carte de Fidélité</h2>
<h2 className="font-serif text-2xl text-bakery-800">
Demande de Carte de Fidélité
</h2>
<button
onClick={onClose}
className="text-bakery-600 hover:text-bakery-800"
aria-label="Fermer"
>
<svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
@@ -54,86 +78,95 @@ const LoyaltyCardForm = ({ isOpen, onClose }: LoyaltyCardFormProps) => {
</div>
<form onSubmit={handleSubmit} className="space-y-4">
<div className="grid grid-cols-2 gap-4">
<div>
<label htmlFor="firstName" className="block text-sm font-medium text-bakery-700">Prénom</label>
<label className="block text-sm font-medium text-bakery-700 mb-1">
Prénom
</label>
<input
type="text"
id="firstName"
required
className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-bakery-500 focus:ring-bakery-500"
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-bakery-500"
value={formData.firstName}
onChange={(e) => setFormData({ ...formData, firstName: e.target.value })}
/>
</div>
<div>
<label htmlFor="lastName" className="block text-sm font-medium text-bakery-700">Nom</label>
<label className="block text-sm font-medium text-bakery-700 mb-1">
Nom
</label>
<input
type="text"
id="lastName"
required
className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-bakery-500 focus:ring-bakery-500"
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-bakery-500"
value={formData.lastName}
onChange={(e) => setFormData({ ...formData, lastName: e.target.value })}
/>
</div>
</div>
<div>
<label htmlFor="age" className="block text-sm font-medium text-bakery-700">Âge</label>
<label className="block text-sm font-medium text-bakery-700 mb-1">
Âge
</label>
<input
type="number"
id="age"
required
min="0"
className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-bakery-500 focus:ring-bakery-500"
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-bakery-500"
value={formData.age}
onChange={(e) => setFormData({ ...formData, age: e.target.value })}
/>
</div>
<div>
<label htmlFor="address" className="block text-sm font-medium text-bakery-700">Adresse</label>
<label className="block text-sm font-medium text-bakery-700 mb-1">
Adresse
</label>
<input
type="text"
id="address"
required
className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-bakery-500 focus:ring-bakery-500"
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-bakery-500"
value={formData.address}
onChange={(e) => setFormData({ ...formData, address: e.target.value })}
/>
</div>
<div className="grid grid-cols-2 gap-4">
<div>
<label htmlFor="postalCode" className="block text-sm font-medium text-bakery-700">Code Postal</label>
<label className="block text-sm font-medium text-bakery-700 mb-1">
Code Postal
</label>
<input
type="text"
id="postalCode"
required
className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-bakery-500 focus:ring-bakery-500"
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-bakery-500"
value={formData.postalCode}
onChange={(e) => setFormData({ ...formData, postalCode: e.target.value })}
/>
</div>
<div>
<label htmlFor="city" className="block text-sm font-medium text-bakery-700">Ville</label>
<label className="block text-sm font-medium text-bakery-700 mb-1">
Ville
</label>
<input
type="text"
id="city"
required
className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-bakery-500 focus:ring-bakery-500"
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-bakery-500"
value={formData.city}
onChange={(e) => setFormData({ ...formData, city: e.target.value })}
/>
</div>
</div>
<div>
<label htmlFor="email" className="block text-sm font-medium text-bakery-700">Email</label>
<label className="block text-sm font-medium text-bakery-700 mb-1">
Email
</label>
<input
type="email"
id="email"
required
className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-bakery-500 focus:ring-bakery-500"
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-bakery-500"
value={formData.email}
onChange={(e) => setFormData({ ...formData, email: e.target.value })}
/>
@@ -141,7 +174,7 @@ const LoyaltyCardForm = ({ isOpen, onClose }: LoyaltyCardFormProps) => {
<button
type="submit"
className="w-full bg-bakery-600 text-white py-2 px-4 rounded-md hover:bg-bakery-700 transition duration-200"
className="w-full bg-bakery-600 text-white py-3 px-4 rounded-md hover:bg-bakery-700 transition duration-200 mt-6"
>
Demander ma carte
</button>