diff --git a/src/components/layout/ImpressumModal.tsx b/src/components/layout/ImpressumModal.tsx index ea24a8e..1ae157b 100644 --- a/src/components/layout/ImpressumModal.tsx +++ b/src/components/layout/ImpressumModal.tsx @@ -1,6 +1,6 @@ -import { Modal } from '../ui/Modal'; -import { useTranslation } from '../../i18n'; -import styles from './ImpressumModal.module.css'; +import { Modal } from "../ui/Modal"; +import { useTranslation } from "../../i18n"; +import styles from "./ImpressumModal.module.css"; interface ImpressumModalProps { isOpen: boolean; @@ -16,8 +16,10 @@ export function ImpressumModal({ isOpen, onClose }: ImpressumModalProps) {

Angaben gemäß § 5 TMG

- Melvin Ragusa
- Provinzialstraße 177
+ Melvin Ragusa +
+ Provinzialstraße 177 +
44388 Dortmund

@@ -25,31 +27,38 @@ export function ImpressumModal({ isOpen, onClose }: ImpressumModalProps) {

Kontakt

- Telefon: 0160 95098973
- E-Mail: info@ragusa-it.dev + Telefon: 0160 95098973 +
+ E-Mail: kontakt@ragusa-it.dev

Umsatzsteuer-ID

- Umsatzsteuer-Identifikationsnummer gemäß § 27 a Umsatzsteuergesetz:
- Als Kleinunternehmer im Sinne von § 19 Abs. 1 UStG wird keine Umsatzsteuer berechnet. + Umsatzsteuer-Identifikationsnummer gemäß § 27 a Umsatzsteuergesetz: +
+ + Als Kleinunternehmer im Sinne von § 19 Abs. 1 UStG wird keine + Umsatzsteuer berechnet. +

Redaktionell verantwortlich

- Melvin Ragusa
- Provinzialstraße 177
+ Melvin Ragusa +
+ Provinzialstraße 177 +
44388 Dortmund

-

Hinweis

-

Kein Ladengeschäft. Termine nur nach Vereinbarung.

+

Hinweis

+

Kein Ladengeschäft. Termine nur nach Vereinbarung.

diff --git a/src/components/ui/Modal.tsx b/src/components/ui/Modal.tsx index eee73b3..7853e83 100644 --- a/src/components/ui/Modal.tsx +++ b/src/components/ui/Modal.tsx @@ -1,10 +1,7 @@ -import { type ReactNode, useEffect } from 'react'; -import { createPortal } from 'react-dom'; -import { motion, AnimatePresence } from 'motion/react'; -import styles from './Modal.module.css'; - -// I need to check if lucide-react is installed. -// Based on package list, react-icons is installed. +import { type ReactNode, useEffect } from "react"; +import { createPortal } from "react-dom"; +import { motion, AnimatePresence } from "motion/react"; +import styles from "./Modal.module.css"; interface ModalProps { isOpen: boolean; @@ -17,22 +14,22 @@ export function Modal({ isOpen, onClose, title, children }: ModalProps) { // Prevent body scroll when modal is open useEffect(() => { if (isOpen) { - document.body.style.overflow = 'hidden'; + document.body.style.overflow = "hidden"; } else { - document.body.style.overflow = 'unset'; + document.body.style.overflow = "unset"; } return () => { - document.body.style.overflow = 'unset'; + document.body.style.overflow = "unset"; }; }, [isOpen]); // Close on escape key useEffect(() => { const handleEscape = (e: KeyboardEvent) => { - if (e.key === 'Escape') onClose(); + if (e.key === "Escape") onClose(); }; - window.addEventListener('keydown', handleEscape); - return () => window.removeEventListener('keydown', handleEscape); + window.addEventListener("keydown", handleEscape); + return () => window.removeEventListener("keydown", handleEscape); }, [onClose]); return createPortal( @@ -88,6 +85,6 @@ export function Modal({ isOpen, onClose, title, children }: ModalProps) { )} , - document.body + document.body, ); } diff --git a/src/pages/Contact.tsx b/src/pages/Contact.tsx index 083e82b..cca7807 100644 --- a/src/pages/Contact.tsx +++ b/src/pages/Contact.tsx @@ -1,10 +1,10 @@ -import { useState, type FormEvent } from 'react'; -import { motion } from 'motion/react'; -import emailjs from '@emailjs/browser'; -import { useTranslation } from '../i18n'; -import { config } from '../config'; -import { Button, Input, Textarea } from '../components/ui'; -import styles from './Contact.module.css'; +import { useState, type FormEvent } from "react"; +import { motion } from "motion/react"; +import emailjs from "@emailjs/browser"; +import { useTranslation } from "../i18n"; +import { config } from "../config"; +import { Button, Input, Textarea } from "../components/ui"; +import styles from "./Contact.module.css"; interface FormData { name: string; @@ -23,34 +23,36 @@ interface FormErrors { export function Contact() { const { t } = useTranslation(); const [formData, setFormData] = useState({ - name: '', - email: '', - subject: '', - message: '', + name: "", + email: "", + subject: "", + message: "", }); const [errors, setErrors] = useState({}); const [isSubmitting, setIsSubmitting] = useState(false); - const [submitStatus, setSubmitStatus] = useState<'idle' | 'success' | 'error'>('idle'); + const [submitStatus, setSubmitStatus] = useState< + "idle" | "success" | "error" + >("idle"); const validateForm = (): boolean => { const newErrors: FormErrors = {}; if (!formData.name.trim()) { - newErrors.name = 'Required'; + newErrors.name = "Required"; } if (!formData.email.trim()) { - newErrors.email = 'Required'; + newErrors.email = "Required"; } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) { - newErrors.email = 'Invalid email'; + newErrors.email = "Invalid email"; } if (!formData.subject.trim()) { - newErrors.subject = 'Required'; + newErrors.subject = "Required"; } if (!formData.message.trim()) { - newErrors.message = 'Required'; + newErrors.message = "Required"; } setErrors(newErrors); @@ -63,7 +65,7 @@ export function Contact() { if (!validateForm()) return; setIsSubmitting(true); - setSubmitStatus('idle'); + setSubmitStatus("idle"); try { const templateParams = { @@ -79,7 +81,7 @@ export function Contact() { config.emailJs.serviceId, config.emailJs.templateIdAdmin, templateParams, - { publicKey: config.emailJs.publicKey } + { publicKey: config.emailJs.publicKey }, ); // Send Auto-reply to User @@ -87,14 +89,14 @@ export function Contact() { config.emailJs.serviceId, config.emailJs.templateIdUser, templateParams, - { publicKey: config.emailJs.publicKey } + { publicKey: config.emailJs.publicKey }, ); - setSubmitStatus('success'); - setFormData({ name: '', email: '', subject: '', message: '' }); + setSubmitStatus("success"); + setFormData({ name: "", email: "", subject: "", message: "" }); } catch (error) { - console.error('EmailJS Error:', error); - setSubmitStatus('error'); + console.error("EmailJS Error:", error); + setSubmitStatus("error"); } finally { setIsSubmitting(false); } @@ -141,7 +143,7 @@ export function Contact() { label={t.contact.form.name} placeholder={t.contact.form.namePlaceholder} value={formData.name} - onChange={(e) => handleChange('name', e.target.value)} + onChange={(e) => handleChange("name", e.target.value)} error={errors.name} /> @@ -150,7 +152,7 @@ export function Contact() { type="email" placeholder={t.contact.form.emailPlaceholder} value={formData.email} - onChange={(e) => handleChange('email', e.target.value)} + onChange={(e) => handleChange("email", e.target.value)} error={errors.email} /> @@ -158,7 +160,7 @@ export function Contact() { label={t.contact.form.subject} placeholder={t.contact.form.subjectPlaceholder} value={formData.subject} - onChange={(e) => handleChange('subject', e.target.value)} + onChange={(e) => handleChange("subject", e.target.value)} error={errors.subject} /> @@ -166,7 +168,7 @@ export function Contact() { label={t.contact.form.message} placeholder={t.contact.form.messagePlaceholder} value={formData.message} - onChange={(e) => handleChange('message', e.target.value)} + onChange={(e) => handleChange("message", e.target.value)} error={errors.message} rows={6} /> @@ -178,10 +180,12 @@ export function Contact() { isLoading={isSubmitting} disabled={isSubmitting} > - {isSubmitting ? t.contact.form.sending : t.contact.form.submit} + {isSubmitting + ? t.contact.form.sending + : t.contact.form.submit} - {submitStatus === 'success' && ( + {submitStatus === "success" && ( )} - {submitStatus === 'error' && ( + {submitStatus === "error" && (
- +