fix
parent
c0533b62af
commit
6e336ba512
|
|
@ -9,6 +9,7 @@ import { ToastContainer } from 'react-toastify';
|
|||
import graphql from "src/utils/graphql";
|
||||
|
||||
import { Rubik, Roboto } from "next/font/google";
|
||||
import { Bounce } from "react-toastify";
|
||||
|
||||
const gql = `
|
||||
query Navbars($locale: I18NLocaleCode) {
|
||||
|
|
@ -94,6 +95,20 @@ export default async function LocaleLayout({
|
|||
<NextIntlClientProvider messages={messages}>
|
||||
<Navbar items={navbaritems} />
|
||||
{children}
|
||||
<ToastContainer
|
||||
position="bottom-right"
|
||||
autoClose={5000}
|
||||
limit={5}
|
||||
hideProgressBar={false}
|
||||
newestOnTop={false}
|
||||
closeOnClick
|
||||
rtl={false}
|
||||
pauseOnFocusLoss
|
||||
draggable
|
||||
pauseOnHover
|
||||
theme="light"
|
||||
transition={Bounce}
|
||||
/>
|
||||
<Footer />
|
||||
<ToastContainer />
|
||||
</NextIntlClientProvider>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
import { Home } from "lucide-react";
|
||||
import { ChevronRight } from "lucide-react";
|
||||
import { Share2 } from "lucide-react";
|
||||
import { Share } from "lucide-react";
|
||||
import { ShoppingCart } from "lucide-react";
|
||||
import { getLocale, getMessages } from "next-intl/server";
|
||||
import Link from "next/link";
|
||||
|
|
@ -179,7 +181,7 @@ export async function generateMetadata({ params }) {
|
|||
// "start": 0,
|
||||
// "limit": 1500
|
||||
// })
|
||||
|
||||
|
||||
// return products.map((product) =>
|
||||
// ({ slug: product.slug })
|
||||
// );
|
||||
|
|
@ -209,36 +211,39 @@ export default async function ProductPage({ params }) {
|
|||
|
||||
|
||||
|
||||
<div className="flex flex-col lg:flex-row gap-8">
|
||||
<div className="flex flex-col lg:flex-row gap-8 items-center lg:items-start">
|
||||
<ProductGallery images={product.images} />
|
||||
<div className="flex flex-col gap-4 w-full ">
|
||||
<div className={`flex items-center gap-2 mb-6 `}>
|
||||
<Link href="/" className=" underline inline-flex gap-2">
|
||||
<Home />
|
||||
</Link>
|
||||
<div className="flex justify-between w-full">
|
||||
<div className={`flex items-center gap-2 mb-6 `}>
|
||||
<Link href="/" className=" underline inline-flex gap-2">
|
||||
<Home />
|
||||
</Link>
|
||||
|
||||
|
||||
{
|
||||
product?.category?.slug &&
|
||||
<>
|
||||
<ChevronRight className={`size-4 ${locale !== "en" && "rotate-180"} `} />
|
||||
<Link href={`/products/${product.category.slug}`} className=" underline">
|
||||
{
|
||||
product?.category?.slug &&
|
||||
<>
|
||||
<ChevronRight className={`size-4 ${locale !== "en" && "rotate-180"} `} />
|
||||
<Link href={`/products/${product.category.slug}`} className=" underline">
|
||||
|
||||
{product.category.title}
|
||||
</Link>
|
||||
</>
|
||||
}
|
||||
{
|
||||
product?.brand?.slug &&
|
||||
<>
|
||||
<ChevronRight className={`size-4 ${locale !== "en" && "rotate-180"} `} />
|
||||
<Link href={`/products/${product.brand.slug}`} className=" underline">
|
||||
{product.brand.title}
|
||||
</Link>
|
||||
</>
|
||||
}
|
||||
<ChevronRight className={`size-4 ${locale !== "en" && "rotate-180"} `} />
|
||||
<span>{product.title}</span>
|
||||
</div>
|
||||
|
||||
{product.category.title}
|
||||
</Link>
|
||||
</>
|
||||
}
|
||||
{
|
||||
product?.brand?.slug &&
|
||||
<>
|
||||
<ChevronRight className={`size-4 ${locale !== "en" && "rotate-180"} `} />
|
||||
<Link href={`/products/${product.brand.slug}`} className=" underline">
|
||||
{product.brand.title}
|
||||
</Link>
|
||||
</>
|
||||
}
|
||||
<ChevronRight className={`size-4 ${locale !== "en" && "rotate-180"} `} />
|
||||
<span>{product.title}</span>
|
||||
</div>
|
||||
<div className="h-full flex justify-between flex-row w-full items-start">
|
||||
|
||||
|
|
|
|||
|
|
@ -113,13 +113,20 @@ export default function ContactModal({ close, open }) {
|
|||
</div>
|
||||
|
||||
{/* Submit Button */}
|
||||
<div>
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
type="submit"
|
||||
className="w-full px-4 py-2 bg-primary text-white rounded-md hover:bg-primary-dark transition-colors"
|
||||
>
|
||||
{t("sendButton")}
|
||||
</button>
|
||||
<button
|
||||
onClick={close}
|
||||
type="button"
|
||||
className="w-fit border px-4 py-2 bg-white text-gray-500 rounded-md hover:bg-primary-dark transition-colors"
|
||||
>
|
||||
{t("closeButton")}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ export default async function ProductDescription({ description }) {
|
|||
description &&
|
||||
<>
|
||||
<h2 className="text-2xl font-bold mb-4">{t.PDP.productDescription}</h2>
|
||||
<div className="prose max-w-none content" dangerouslySetInnerHTML={{ __html: description }}/>
|
||||
<div className="prose max-w-none content text-justify [&_p]:leading-8" dangerouslySetInnerHTML={{ __html: description }}/>
|
||||
|
||||
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -9,6 +9,8 @@ import ContactModal from "../ContactUs";
|
|||
import { useState } from "react";
|
||||
import { useTranslations } from "next-intl";
|
||||
import BrandInfo from "./BrandInfo";
|
||||
import { Share2 } from "lucide-react";
|
||||
import { toast } from "react-toastify";
|
||||
|
||||
|
||||
export default function ProductInfo({ title, price, discount, showPrice, category, summery, brand }) {
|
||||
|
|
@ -31,10 +33,39 @@ export default function ProductInfo({ title, price, discount, showPrice, categor
|
|||
|
||||
const t = useTranslations("ContactModal")
|
||||
|
||||
const shareLink = async () => {
|
||||
if (navigator.share) {
|
||||
navigator.share({
|
||||
title: title,
|
||||
text: 'Check out this on Advanced Horizon !',
|
||||
url: window.location.href,
|
||||
})
|
||||
|
||||
} else if (navigator.clipboard) {
|
||||
try {
|
||||
await navigator.clipboard.writeText(text);
|
||||
toast.success("link copied!")
|
||||
} catch (err) {
|
||||
console.error('Failed to copy: ', err);
|
||||
}
|
||||
} else {
|
||||
const tempInput = document.createElement('input');
|
||||
tempInput.style.position = 'absolute';
|
||||
tempInput.style.left = '-9999px';
|
||||
tempInput.value = window.location.href;
|
||||
document.body.appendChild(tempInput);
|
||||
tempInput.select();
|
||||
document.execCommand('copy');
|
||||
document.body.removeChild(tempInput);
|
||||
toast.success("link copied!")
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="w-full">
|
||||
<ContactModal close={closeModal} open={open} />
|
||||
<div className="flex items-start w-full justify-between">
|
||||
<div className="flex items-start w-full justify-between lg:flex-row flex-col-reverse gap-4">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold">{title}</h1>
|
||||
<Link href={`/products/${category.slug}`} className="mt-4 flex items-center">
|
||||
|
|
@ -105,11 +136,14 @@ export default function ProductInfo({ title, price, discount, showPrice, categor
|
|||
}
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-10 w-full border-t pt-10">
|
||||
<div className="mt-10 w-full border-t pt-10 flex gap-2 items-center">
|
||||
{/* Replaced Button with Tailwind CSS */}
|
||||
<button onClick={openModal} className="w-full lg:w-fit px-8 ltr flex items-center justify-center py-2 bg-primary text-white rounded-md hover:bg-primary-dark transition-colors">
|
||||
<ShoppingCart className="mr-2 h-4 w-4" /> {t("cta")}
|
||||
</button>
|
||||
<button className="btn shadow-none" onClick={() => shareLink()}>
|
||||
<Share2 size={24} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
Loading…
Reference in New Issue