ragusa-it/ragusaitweb
1
0
Fork 0
Code Issues Pull Requests 6 Actions Packages Projects Releases Wiki Activity

fix: updated contact information in imprint & /contact page

Browse Source
This commit is contained in:
Melvin Ragusa
2026-01-24 10:47:40 +01:00
parent 516f29f312
commit 77fd62447c
3 changed files with 77 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/components/layout/ImpressumModal.tsx
View File

@@ -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) {
<section>
<h3>Angaben gemäß § 5 TMG</h3>
<p>
Melvin Ragusa<br />
Provinzialstraße 177<br />
Melvin Ragusa
<br />
Provinzialstraße 177
<br />
44388 Dortmund
</p>
</section>
@@ -25,24 +27,31 @@ export function ImpressumModal({ isOpen, onClose }: ImpressumModalProps) {
<section>
<h3>Kontakt</h3>
<p>
Telefon: 0160 95098973<br />
E-Mail: info@ragusa-it.dev
Telefon: 0160 95098973
<br />
E-Mail: kontakt@ragusa-it.dev
</p>
</section>
<section>
<h3>Umsatzsteuer-ID</h3>
<p>
Umsatzsteuer-Identifikationsnummer gemäß § 27 a Umsatzsteuergesetz:<br />
<em>Als Kleinunternehmer im Sinne von § 19 Abs. 1 UStG wird keine Umsatzsteuer berechnet.</em>
Umsatzsteuer-Identifikationsnummer gemäß § 27 a Umsatzsteuergesetz:
<br />
<em>
Als Kleinunternehmer im Sinne von § 19 Abs. 1 UStG wird keine
Umsatzsteuer berechnet.
</em>
</p>
</section>
<section>
<h3>Redaktionell verantwortlich</h3>
<p>
Melvin Ragusa<br />
Provinzialstraße 177<br />
Melvin Ragusa
<br />
Provinzialstraße 177
<br />
44388 Dortmund
</p>
</section>

25
src/components/ui/Modal.tsx
View File

@@ -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) {
</motion.div>
)}
</AnimatePresence>,
document.body
document.body,
);
}

77
src/pages/Contact.tsx
View File

@@ -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<FormData>({
name: '',
email: '',
subject: '',
message: '',
name: "",
email: "",
subject: "",
message: "",
});
const [errors, setErrors] = useState<FormErrors>({});
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}
</Button>
{submitStatus === 'success' && (
{submitStatus === "success" && (
<motion.p
className={styles.success}
initial={{ opacity: 0, y: 10 }}
@@ -191,7 +195,7 @@ export function Contact() {
</motion.p>
)}
{submitStatus === 'error' && (
{submitStatus === "error" && (
<motion.p
className={styles.error}
initial={{ opacity: 0, y: 10 }}
@@ -215,14 +219,21 @@ export function Contact() {
<div className={styles.infoList}>
<div className={styles.infoItem}>
<div className={styles.infoIcon}>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
<svg
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
>
<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" />
<polyline points="22,6 12,13 2,6" />
</svg>
</div>
<div>
<h3>{t.contact.info.email}</h3>
<a href="mailto:info@ragusa-it.dev">info@ragusa-it.dev</a>
<a href="mailto:kontakt@ragusa-it.dev">
kontakt@ragusa-it.dev
</a>
</div>
</div>