fix: add missing SEO to About and Contact pages
- Add keywords, canonical, OpenGraph to About page - Refactor Contact page to server component with generateMetadata - Create ContactPageClient for form functionality - All pages now have complete SEO coverage
This commit is contained in:
Unchained
@@ -3,18 +3,42 @@ import Header from "@/components/layout/Header";
|
|||||||
import Footer from "@/components/layout/Footer";
|
import Footer from "@/components/layout/Footer";
|
||||||
import { getPageMetadata } from "@/lib/i18n/pageMetadata";
|
import { getPageMetadata } from "@/lib/i18n/pageMetadata";
|
||||||
import { isValidLocale, DEFAULT_LOCALE, type Locale } from "@/lib/i18n/locales";
|
import { isValidLocale, DEFAULT_LOCALE, type Locale } from "@/lib/i18n/locales";
|
||||||
|
import { getPageKeywords } from "@/lib/seo/keywords";
|
||||||
|
import { Metadata } from "next";
|
||||||
|
|
||||||
|
const baseUrl = process.env.NEXT_PUBLIC_SITE_URL || "https://dev.manoonoils.com";
|
||||||
|
|
||||||
interface AboutPageProps {
|
interface AboutPageProps {
|
||||||
params: Promise<{ locale: string }>;
|
params: Promise<{ locale: string }>;
|
||||||
}
|
}
|
||||||
|
|
||||||
export async function generateMetadata({ params }: AboutPageProps) {
|
export async function generateMetadata({ params }: AboutPageProps): Promise<Metadata> {
|
||||||
const { locale } = await params;
|
const { locale } = await params;
|
||||||
const validLocale = isValidLocale(locale) ? locale : DEFAULT_LOCALE;
|
const validLocale = isValidLocale(locale) ? locale : DEFAULT_LOCALE;
|
||||||
const metadata = getPageMetadata(validLocale as Locale);
|
const metadata = getPageMetadata(validLocale as Locale);
|
||||||
|
const keywords = getPageKeywords(validLocale as Locale, 'about');
|
||||||
|
|
||||||
|
const localePrefix = validLocale === DEFAULT_LOCALE ? "" : `/${validLocale}`;
|
||||||
|
const canonicalUrl = `${baseUrl}${localePrefix}/about`;
|
||||||
|
|
||||||
return {
|
return {
|
||||||
title: metadata.about.title,
|
title: metadata.about.title,
|
||||||
description: metadata.about.description,
|
description: metadata.about.description,
|
||||||
|
keywords: [...keywords.primary, ...keywords.secondary].join(', '),
|
||||||
|
alternates: {
|
||||||
|
canonical: canonicalUrl,
|
||||||
|
},
|
||||||
|
openGraph: {
|
||||||
|
title: metadata.about.title,
|
||||||
|
description: metadata.about.description,
|
||||||
|
type: 'website',
|
||||||
|
url: canonicalUrl,
|
||||||
|
},
|
||||||
|
twitter: {
|
||||||
|
card: 'summary',
|
||||||
|
title: metadata.about.title,
|
||||||
|
description: metadata.about.description,
|
||||||
|
},
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
195
src/app/[locale]/contact/ContactPageClient.tsx
Normal file
195
src/app/[locale]/contact/ContactPageClient.tsx
Normal file
@@ -0,0 +1,195 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useState } from "react";
|
||||||
|
import { useTranslations, useLocale } from "next-intl";
|
||||||
|
import Header from "@/components/layout/Header";
|
||||||
|
import Footer from "@/components/layout/Footer";
|
||||||
|
import { Mail, MapPin, Truck, Check } from "lucide-react";
|
||||||
|
|
||||||
|
interface ContactPageClientProps {
|
||||||
|
locale: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function ContactPageClient({ locale }: ContactPageClientProps) {
|
||||||
|
const t = useTranslations("Contact");
|
||||||
|
const [formData, setFormData] = useState({
|
||||||
|
name: "",
|
||||||
|
email: "",
|
||||||
|
message: "",
|
||||||
|
});
|
||||||
|
const [submitted, setSubmitted] = useState(false);
|
||||||
|
|
||||||
|
const handleSubmit = (e: React.FormEvent) => {
|
||||||
|
e.preventDefault();
|
||||||
|
setSubmitted(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Header locale={locale} />
|
||||||
|
<main className="min-h-screen bg-white">
|
||||||
|
<div className="pt-[104px]">
|
||||||
|
<div className="container py-12 md:py-16">
|
||||||
|
<div className="max-w-2xl mx-auto text-center">
|
||||||
|
<span className="text-xs uppercase tracking-[0.2em] text-[#666666] mb-3 block">
|
||||||
|
{t("subtitle")}
|
||||||
|
</span>
|
||||||
|
<h1 className="text-4xl md:text-5xl font-medium tracking-tight mb-4">
|
||||||
|
{t("title")}
|
||||||
|
</h1>
|
||||||
|
<p className="text-[#666666]">
|
||||||
|
{t("getInTouchDesc")}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<section className="py-12 md:py-16">
|
||||||
|
<div className="container">
|
||||||
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-20">
|
||||||
|
<div>
|
||||||
|
<h2 className="text-2xl font-medium mb-6">
|
||||||
|
{t("getInTouch")}
|
||||||
|
</h2>
|
||||||
|
<p className="text-[#666666] mb-8 leading-relaxed">
|
||||||
|
{t("getInTouchDesc")}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="space-y-6">
|
||||||
|
<div className="flex items-start gap-4">
|
||||||
|
<div className="w-12 h-12 rounded-full bg-[#f8f9fa] flex items-center justify-center flex-shrink-0">
|
||||||
|
<Mail className="w-5 h-5 text-[#666666]" strokeWidth={1.5} />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 className="font-medium mb-1">{t("email")}</h3>
|
||||||
|
<p className="text-[#666666] text-sm">hello@manoonoils.com</p>
|
||||||
|
<p className="text-[#999999] text-xs mt-1">{t("emailReply")}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-start gap-4">
|
||||||
|
<div className="w-12 h-12 rounded-full bg-[#f8f9fa] flex items-center justify-center flex-shrink-0">
|
||||||
|
<Truck className="w-5 h-5 text-[#666666]" strokeWidth={1.5} />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 className="font-medium mb-1">{t("shippingTitle")}</h3>
|
||||||
|
<p className="text-[#666666] text-sm">{t("freeShipping")}</p>
|
||||||
|
<p className="text-[#999999] text-xs mt-1">{t("deliveryTime")}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-start gap-4">
|
||||||
|
<div className="w-12 h-12 rounded-full bg-[#f8f9fa] flex items-center justify-center flex-shrink-0">
|
||||||
|
<MapPin className="w-5 h-5 text-[#666666]" strokeWidth={1.5} />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 className="font-medium mb-1">{t("location")}</h3>
|
||||||
|
<p className="text-[#666666] text-sm">{t("locationDesc")}</p>
|
||||||
|
<p className="text-[#999999] text-xs mt-1">{t("worldwideShipping")}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-[#f8f9fa] p-8 md:p-10">
|
||||||
|
{submitted ? (
|
||||||
|
<div className="text-center py-12">
|
||||||
|
<div className="w-16 h-16 rounded-full bg-green-100 flex items-center justify-center mx-auto mb-4">
|
||||||
|
<Check className="w-8 h-8 text-green-600" strokeWidth={1.5} />
|
||||||
|
</div>
|
||||||
|
<h3 className="text-xl font-medium mb-2">{t("thankYou")}</h3>
|
||||||
|
<p className="text-[#666666]">
|
||||||
|
{t("thankYouDesc")}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<form onSubmit={handleSubmit} className="space-y-6">
|
||||||
|
<div>
|
||||||
|
<label htmlFor="name" className="block text-sm font-medium mb-2">
|
||||||
|
{t("name")}
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="name"
|
||||||
|
required
|
||||||
|
value={formData.name}
|
||||||
|
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
|
||||||
|
className="w-full px-4 py-3 bg-white border border-[#e5e5e5] focus:outline-none focus:border-black transition-colors"
|
||||||
|
placeholder={t("namePlaceholder")}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label htmlFor="email" className="block text-sm font-medium mb-2">
|
||||||
|
{t("emailField")}
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="email"
|
||||||
|
id="email"
|
||||||
|
required
|
||||||
|
value={formData.email}
|
||||||
|
onChange={(e) => setFormData({ ...formData, email: e.target.value })}
|
||||||
|
className="w-full px-4 py-3 bg-white border border-[#e5e5e5] focus:outline-none focus:border-black transition-colors"
|
||||||
|
placeholder={t("emailPlaceholder")}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label htmlFor="message" className="block text-sm font-medium mb-2">
|
||||||
|
{t("message")}
|
||||||
|
</label>
|
||||||
|
<textarea
|
||||||
|
id="message"
|
||||||
|
required
|
||||||
|
rows={5}
|
||||||
|
value={formData.message}
|
||||||
|
onChange={(e) => setFormData({ ...formData, message: e.target.value })}
|
||||||
|
className="w-full px-4 py-3 bg-white border border-[#e5e5e5] focus:outline-none focus:border-black transition-colors resize-none"
|
||||||
|
placeholder={t("messagePlaceholder")}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
className="w-full py-4 bg-black text-white text-sm uppercase tracking-[0.1em] font-medium hover:bg-[#333333] transition-colors"
|
||||||
|
>
|
||||||
|
{t("sendMessage")}
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section className="py-16 md:py-24 border-t border-[#e5e5e5]">
|
||||||
|
<div className="container">
|
||||||
|
<div className="max-w-3xl mx-auto">
|
||||||
|
<h2 className="text-2xl font-medium text-center mb-12">
|
||||||
|
{t("faqTitle")}
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<div className="space-y-6">
|
||||||
|
{[
|
||||||
|
{ q: t("faq1q"), a: t("faq1a") },
|
||||||
|
{ q: t("faq2q"), a: t("faq2a") },
|
||||||
|
{ q: t("faq3q"), a: t("faq3a") },
|
||||||
|
{ q: t("faq4q"), a: t("faq4a") },
|
||||||
|
].map((faq, index) => (
|
||||||
|
<div key={index} className="border-b border-[#e5e5e5] pb-6">
|
||||||
|
<h3 className="font-medium mb-2">{faq.q}</h3>
|
||||||
|
<p className="text-[#666666] text-sm leading-relaxed">{faq.a}</p>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<div className="pt-16">
|
||||||
|
<Footer locale={locale} />
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -1,192 +1,48 @@
|
|||||||
"use client";
|
import { Metadata } from "next";
|
||||||
|
import { getPageMetadata } from "@/lib/i18n/pageMetadata";
|
||||||
|
import { isValidLocale, DEFAULT_LOCALE, type Locale } from "@/lib/i18n/locales";
|
||||||
|
import { getPageKeywords } from "@/lib/seo/keywords";
|
||||||
|
import ContactPageClient from "./ContactPageClient";
|
||||||
|
|
||||||
import { useState } from "react";
|
const baseUrl = process.env.NEXT_PUBLIC_SITE_URL || "https://dev.manoonoils.com";
|
||||||
import { useTranslations, useLocale } from "next-intl";
|
|
||||||
import Header from "@/components/layout/Header";
|
|
||||||
import Footer from "@/components/layout/Footer";
|
|
||||||
import { Mail, MapPin, Truck, Check } from "lucide-react";
|
|
||||||
|
|
||||||
export default function ContactPage() {
|
interface ContactPageProps {
|
||||||
const t = useTranslations("Contact");
|
params: Promise<{ locale: string }>;
|
||||||
const locale = useLocale();
|
}
|
||||||
const [formData, setFormData] = useState({
|
|
||||||
name: "",
|
|
||||||
email: "",
|
|
||||||
message: "",
|
|
||||||
});
|
|
||||||
const [submitted, setSubmitted] = useState(false);
|
|
||||||
|
|
||||||
const handleSubmit = (e: React.FormEvent) => {
|
export async function generateMetadata({ params }: ContactPageProps): Promise<Metadata> {
|
||||||
e.preventDefault();
|
const { locale } = await params;
|
||||||
setSubmitted(true);
|
const validLocale = isValidLocale(locale) ? locale : DEFAULT_LOCALE;
|
||||||
|
const metadata = getPageMetadata(validLocale as Locale);
|
||||||
|
const keywords = getPageKeywords(validLocale as Locale, 'contact');
|
||||||
|
|
||||||
|
const localePrefix = validLocale === DEFAULT_LOCALE ? "" : `/${validLocale}`;
|
||||||
|
const canonicalUrl = `${baseUrl}${localePrefix}/contact`;
|
||||||
|
|
||||||
|
return {
|
||||||
|
title: metadata.contact.title,
|
||||||
|
description: metadata.contact.description,
|
||||||
|
keywords: [...keywords.primary, ...keywords.secondary].join(', '),
|
||||||
|
alternates: {
|
||||||
|
canonical: canonicalUrl,
|
||||||
|
},
|
||||||
|
openGraph: {
|
||||||
|
title: metadata.contact.title,
|
||||||
|
description: metadata.contact.description,
|
||||||
|
type: 'website',
|
||||||
|
url: canonicalUrl,
|
||||||
|
},
|
||||||
|
twitter: {
|
||||||
|
card: 'summary',
|
||||||
|
title: metadata.contact.title,
|
||||||
|
description: metadata.contact.description,
|
||||||
|
},
|
||||||
};
|
};
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
export default async function ContactPage({ params }: ContactPageProps) {
|
||||||
<>
|
const { locale } = await params;
|
||||||
<Header locale={locale} />
|
const validLocale = isValidLocale(locale) ? locale : DEFAULT_LOCALE;
|
||||||
<main className="min-h-screen bg-white">
|
|
||||||
<div className="pt-[104px]">
|
return <ContactPageClient locale={validLocale} />;
|
||||||
<div className="container py-12 md:py-16">
|
}
|
||||||
<div className="max-w-2xl mx-auto text-center">
|
|
||||||
<span className="text-xs uppercase tracking-[0.2em] text-[#666666] mb-3 block">
|
|
||||||
{t("subtitle")}
|
|
||||||
</span>
|
|
||||||
<h1 className="text-4xl md:text-5xl font-medium tracking-tight mb-4">
|
|
||||||
{t("title")}
|
|
||||||
</h1>
|
|
||||||
<p className="text-[#666666]">
|
|
||||||
{t("getInTouchDesc")}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<section className="py-12 md:py-16">
|
|
||||||
<div className="container">
|
|
||||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-20">
|
|
||||||
<div>
|
|
||||||
<h2 className="text-2xl font-medium mb-6">
|
|
||||||
{t("getInTouch")}
|
|
||||||
</h2>
|
|
||||||
<p className="text-[#666666] mb-8 leading-relaxed">
|
|
||||||
{t("getInTouchDesc")}
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div className="space-y-6">
|
|
||||||
<div className="flex items-start gap-4">
|
|
||||||
<div className="w-12 h-12 rounded-full bg-[#f8f9fa] flex items-center justify-center flex-shrink-0">
|
|
||||||
<Mail className="w-5 h-5 text-[#666666]" strokeWidth={1.5} />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 className="font-medium mb-1">{t("email")}</h3>
|
|
||||||
<p className="text-[#666666] text-sm">hello@manoonoils.com</p>
|
|
||||||
<p className="text-[#999999] text-xs mt-1">{t("emailReply")}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex items-start gap-4">
|
|
||||||
<div className="w-12 h-12 rounded-full bg-[#f8f9fa] flex items-center justify-center flex-shrink-0">
|
|
||||||
<Truck className="w-5 h-5 text-[#666666]" strokeWidth={1.5} />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 className="font-medium mb-1">{t("shippingTitle")}</h3>
|
|
||||||
<p className="text-[#666666] text-sm">{t("freeShipping")}</p>
|
|
||||||
<p className="text-[#999999] text-xs mt-1">{t("deliveryTime")}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex items-start gap-4">
|
|
||||||
<div className="w-12 h-12 rounded-full bg-[#f8f9fa] flex items-center justify-center flex-shrink-0">
|
|
||||||
<MapPin className="w-5 h-5 text-[#666666]" strokeWidth={1.5} />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 className="font-medium mb-1">{t("location")}</h3>
|
|
||||||
<p className="text-[#666666] text-sm">{t("locationDesc")}</p>
|
|
||||||
<p className="text-[#999999] text-xs mt-1">{t("worldwideShipping")}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="bg-[#f8f9fa] p-8 md:p-10">
|
|
||||||
{submitted ? (
|
|
||||||
<div className="text-center py-12">
|
|
||||||
<div className="w-16 h-16 rounded-full bg-green-100 flex items-center justify-center mx-auto mb-4">
|
|
||||||
<Check className="w-8 h-8 text-green-600" strokeWidth={1.5} />
|
|
||||||
</div>
|
|
||||||
<h3 className="text-xl font-medium mb-2">{t("thankYou")}</h3>
|
|
||||||
<p className="text-[#666666]">
|
|
||||||
{t("thankYouDesc")}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<form onSubmit={handleSubmit} className="space-y-6">
|
|
||||||
<div>
|
|
||||||
<label htmlFor="name" className="block text-sm font-medium mb-2">
|
|
||||||
{t("name")}
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
id="name"
|
|
||||||
required
|
|
||||||
value={formData.name}
|
|
||||||
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
|
|
||||||
className="w-full px-4 py-3 bg-white border border-[#e5e5e5] focus:outline-none focus:border-black transition-colors"
|
|
||||||
placeholder={t("namePlaceholder")}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label htmlFor="email" className="block text-sm font-medium mb-2">
|
|
||||||
{t("emailField")}
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="email"
|
|
||||||
id="email"
|
|
||||||
required
|
|
||||||
value={formData.email}
|
|
||||||
onChange={(e) => setFormData({ ...formData, email: e.target.value })}
|
|
||||||
className="w-full px-4 py-3 bg-white border border-[#e5e5e5] focus:outline-none focus:border-black transition-colors"
|
|
||||||
placeholder={t("emailPlaceholder")}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label htmlFor="message" className="block text-sm font-medium mb-2">
|
|
||||||
{t("message")}
|
|
||||||
</label>
|
|
||||||
<textarea
|
|
||||||
id="message"
|
|
||||||
required
|
|
||||||
rows={5}
|
|
||||||
value={formData.message}
|
|
||||||
onChange={(e) => setFormData({ ...formData, message: e.target.value })}
|
|
||||||
className="w-full px-4 py-3 bg-white border border-[#e5e5e5] focus:outline-none focus:border-black transition-colors resize-none"
|
|
||||||
placeholder={t("messagePlaceholder")}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
className="w-full py-4 bg-black text-white text-sm uppercase tracking-[0.1em] font-medium hover:bg-[#333333] transition-colors"
|
|
||||||
>
|
|
||||||
{t("sendMessage")}
|
|
||||||
</button>
|
|
||||||
</form>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section className="py-16 md:py-24 border-t border-[#e5e5e5]">
|
|
||||||
<div className="container">
|
|
||||||
<div className="max-w-3xl mx-auto">
|
|
||||||
<h2 className="text-2xl font-medium text-center mb-12">
|
|
||||||
{t("faqTitle")}
|
|
||||||
</h2>
|
|
||||||
|
|
||||||
<div className="space-y-6">
|
|
||||||
{[
|
|
||||||
{ q: t("faq1q"), a: t("faq1a") },
|
|
||||||
{ q: t("faq2q"), a: t("faq2a") },
|
|
||||||
{ q: t("faq3q"), a: t("faq3a") },
|
|
||||||
{ q: t("faq4q"), a: t("faq4a") },
|
|
||||||
].map((faq, index) => (
|
|
||||||
<div key={index} className="border-b border-[#e5e5e5] pb-6">
|
|
||||||
<h3 className="font-medium mb-2">{faq.q}</h3>
|
|
||||||
<p className="text-[#666666] text-sm leading-relaxed">{faq.a}</p>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<div className="pt-16">
|
|
||||||
<Footer locale={locale} />
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|||||||
Reference in New Issue
Block a user